feat: Perfetto 风格的本地缓存链接（local_cache_key）

CLAUDE.md

@@ -24,11 +24,29 @@ This document provides comprehensive guidance for AI assistants (like Claude) wo
  - Prevents UI blocking during heavy parsing operations
  - Communication via postMessage/onmessage pattern
 
-3. **LocalStorage Persistence**
+3. **Persistence**
  - Uploaded files and parsing configs persist across sessions
- - 5MB storage limit with quota handling
+ - IndexedDB is the primary store (`src/utils/idb.js` opens the shared DB);
+ localStorage is the fallback where IndexedDB is unavailable, with a 5MB
+ limit and quota handling
  - Config saved on every change (with safeguards)
 
+4. **Perfetto-style Cache Links** (`src/utils/sessionCache.js` + `cacheUrl.js`)
+ - Every analysis (files + parsed metrics + parsing config) is snapshotted to
+ IndexedDB under a UUID and addressed by `#!/viewer?local_cache_key=<uuid>`
+ - Reload, bookmark or a second tab reopens the same logs without re-uploading
+ - Local to the browser by design — nothing is uploaded anywhere
+ - Four stores, split by write frequency: `sessionIndex` (summaries, so
+ listing never reads log text), `sessions` (small metadata), `content`
+ (one record per file, UTF-8 bytes), `metrics` (one record per file,
+ Float64Array pairs). Content and metrics are written only when they
+ actually change, so a checkbox toggle writes ~4ms regardless of how many
+ hundreds of MB are cached
+ - LRU eviction by age (30d), count (20) and bytes (min of 2GB and half the
+ origin's quota); `navigator.storage.persist()` is requested best-effort
+ - Out of space: evict other analyses, then keep the parsed series and drop
+ the raw logs (charts still render; files are flagged for re-upload)
+
 4. **Global Drag-and-Drop**
  - Full-page drag overlay for intuitive file uploads
  - Supports dropping files anywhere in the application
@@ -52,10 +70,15 @@ This document provides comprehensive guidance for AI assistants (like Claude) wo
 │ │ ├── Header.jsx # Header with language/theme toggle
 │ │ ├── RegexControls.jsx # Global parsing config
 │ │ ├── ResizablePanel.jsx # Draggable chart height
+│ │ ├── SessionsModal.jsx # Cached analyses / cache links
 │ │ └── ThemeToggle.jsx # Dark mode toggle
 │ ├── utils/ # Utility functions
 │ │ ├── __tests__/ # Utility tests (colocated)
 │ │ ├── ValueExtractor.js # Core parsing logic
+│ │ ├── idb.js # Shared IndexedDB open/upgrade
+│ │ ├── fileStorage.js # Active working set persistence
+│ │ ├── sessionCache.js # Cached analyses (local_cache_key)
+│ │ ├── cacheUrl.js # local_cache_key URL plumbing
 │ │ ├── getMinSteps.js # Chart step calculation
 │ │ └── mergeFiles.js # File merging logic
 │ ├── workers/

README.md

@@ -22,6 +22,7 @@
 - 🎛️ **灵活展示**：可独立启用或禁用文件和图表，支持调整数据范围与图表尺寸，图表高度可拖拽调整。
 - ⚡ **易用特性**：支持匹配预览、智能推荐解析规则，图表 Shift+拖动可快速缩放。
 - 💾 **数据导出**：每个图表均支持导出 PNG、复制图片到剪贴板以及导出 CSV 数据。
+- 🔗 **本地缓存链接**：上传的日志与解析结果会缓存在浏览器中，地址栏自动生成 `#!/viewer?local_cache_key=<uuid>` 链接（同 [ui.perfetto.dev](https://ui.perfetto.dev/) 的做法）。收藏该链接即可随时回到同一次分析，无需重新上传；链接仅在本机本浏览器有效，日志不会上传到任何服务器。
 
 ## 快速上手 ⚡
 
@@ -30,6 +31,7 @@
 3. 查看自动生成的图表，必要时可上传第二个文件进行对比分析。
 4. 调整图表显示或数据范围以获得更精确的结果。
 5. 使用图表右上角的按钮导出 PNG、复制图片或下载 CSV 数据。
+6. 收藏地址栏中的 `local_cache_key` 链接，或点击侧边栏「缓存」新建、打开、重命名、删除已缓存的分析。
 
 ## 部署
 

package.json

@@ -42,6 +42,7 @@
  "eslint": "^9.25.0",
  "eslint-plugin-react-hooks": "^5.2.0",
  "eslint-plugin-react-refresh": "^0.4.19",
+ "fake-indexeddb": "^6.2.5",
  "globals": "^16.0.0",
  "jsdom": "^24.0.0",
  "vite": "^6.3.5",

public/locales/en/translation.json

@@ -259,5 +259,24 @@
  "toast.reportSaved": "Report saved",
  "toast.exportFailed": "Export failed",
  "toast.noChartsToExport": "No charts to export — upload a log first.",
- "toast.clipboardUnsupported": "Clipboard API unavailable. Use Download instead."
+ "toast.clipboardUnsupported": "Clipboard API unavailable. Use Download instead.",
+ "header.sessions": "Cache",
+ "sessions.aria": "Cached analyses",
+ "sessions.title": "Cached analyses",
+ "sessions.close": "Close",
+ "sessions.hint": "Every analysis is cached in this browser and gets a local_cache_key link in the address bar. Bookmark it to come back to the exact same logs without re-uploading. Links only work in this browser on this machine — nothing is ever uploaded to a server.",
+ "sessions.currentLink": "Link to the current analysis",
+ "sessions.copyLink": "Copy link",
+ "sessions.linkCopied": "Link copied",
+ "sessions.empty": "Nothing cached yet — upload a log and it appears here.",
+ "sessions.open": "Open",
+ "sessions.delete": "Delete",
+ "sessions.clearAll": "Clear cache",
+ "sessions.current": "Current",
+ "sessions.meta": "{{files}} files · {{size}} · {{time}}",
+ "sessions.truncated": "too large to cache in full — metrics only",
+ "sessions.notFound": "No cached analysis for this link in this browser (cache links are local to the machine that made them).",
+ "sessions.newAnalysis": "New analysis (keeps the current one cached)",
+ "sessions.rename": "Rename",
+ "sessions.firstHint": "This analysis is cached — bookmark the link in the address bar to come straight back to it."
 }

public/locales/zh/translation.json

@@ -259,5 +259,24 @@
  "toast.reportSaved": "报告已保存",
  "toast.exportFailed": "导出失败",
  "toast.noChartsToExport": "暂无图表可导出——请先上传日志。",
- "toast.clipboardUnsupported": "剪贴板 API 不可用，请改用下载。"
+ "toast.clipboardUnsupported": "剪贴板 API 不可用，请改用下载。",
+ "header.sessions": "缓存",
+ "sessions.aria": "已缓存的分析",
+ "sessions.title": "已缓存的分析",
+ "sessions.close": "关闭",
+ "sessions.hint": "每次上传的日志和解析结果都会缓存在本浏览器中，并在地址栏生成一个 local_cache_key 链接。收藏该链接即可随时回到这次分析，无需重新上传。链接只在本机本浏览器有效，日志不会上传到任何服务器。",
+ "sessions.currentLink": "当前分析的链接",
+ "sessions.copyLink": "复制链接",
+ "sessions.linkCopied": "链接已复制",
+ "sessions.empty": "暂无缓存，上传日志后会自动生成。",
+ "sessions.open": "打开",
+ "sessions.delete": "删除",
+ "sessions.clearAll": "清空缓存",
+ "sessions.current": "当前",
+ "sessions.meta": "{{files}} 个文件 · {{size}} · {{time}}",
+ "sessions.truncated": "文件过大，仅缓存了解析结果",
+ "sessions.notFound": "该链接对应的缓存不在此浏览器中（缓存链接仅在本机有效）。",
+ "sessions.newAnalysis": "新建分析（保留当前缓存）",
+ "sessions.rename": "重命名",
+ "sessions.firstHint": "本次分析已缓存，地址栏的链接可以收藏，下次直接回到这里。"
 }