2367d87db6
原实现 messages.map 渲染所有消息，500 条消息会产生 10000+ DOM 节点（每条 MessageBubble 含 ReactMarkdown 解析），导致首次渲染 卡顿、滚动掉帧、流式输出每 token 都全量 diff。 引入 @tanstack/react-virtual 实现虚拟化： - 只渲染视口内 + overscan=6 条消息，DOM 节点数恒定 - measureElement 动态测量变高度消息（一行文本 vs 50 行代码块） - estimateSize=120 提供初始估计，测量后自动校正 - Firefox 特殊处理 measureElement（getBoundingClientRect） 适配现有功能： - 自动滚到底部：bottomRef.scrollIntoView 改为 virtualizer.scrollToIndex - viewKey 滚动位置记忆：保留 scrollTop 保存/恢复逻辑 - highlightedMessageId：先 scrollToIndex 渲染目标项，rAF 后加 class - newMessageCount：流式 delta 不计数（消息条数不变） - space-y-6 改为每项 pb-6（虚拟化下相邻 margin 不生效） 性能对比（500 条消息）： - DOM 节点：10000+ → ~200（仅可见+overscan） - 首次渲染：数百 ms → <16ms - 流式 diff：全量列表 → 仅可见项
49 lines
1.3 KiB
JSON
49 lines
1.3 KiB
JSON
{
|
|
"name": "picobot-web",
|
|
"private": true,
|
|
"version": "1.0.0",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc && vite build",
|
|
"preview": "vite preview",
|
|
"test": "vitest run",
|
|
"test:watch": "vitest",
|
|
"lint": "eslint .",
|
|
"lint:fix": "eslint . --fix",
|
|
"format": "prettier --write \"src/**/*.{ts,tsx,css,json}\"",
|
|
"format:check": "prettier --check \"src/**/*.{ts,tsx,css,json}\""
|
|
},
|
|
"dependencies": {
|
|
"@tanstack/react-virtual": "^3.14.9",
|
|
"@types/react": "^19.2.15",
|
|
"@types/react-dom": "^19.2.3",
|
|
"lucide-react": "^1.16.0",
|
|
"react": "^19.2.6",
|
|
"react-dom": "^19.2.6",
|
|
"react-markdown": "^10.1.0",
|
|
"remark-gfm": "^4.0.1",
|
|
"typescript": "^6.0.3"
|
|
},
|
|
"devDependencies": {
|
|
"@eslint/js": "^9.18.0",
|
|
"@tailwindcss/postcss": "^4.3.0",
|
|
"@testing-library/jest-dom": "^6.9.1",
|
|
"@testing-library/react": "^16.3.2",
|
|
"@testing-library/user-event": "^14.6.1",
|
|
"@vitejs/plugin-react": "^6.0.2",
|
|
"autoprefixer": "^10.5.0",
|
|
"eslint": "^9.18.0",
|
|
"eslint-plugin-react-hooks": "^5.1.0",
|
|
"eslint-plugin-react-refresh": "^0.4.16",
|
|
"globals": "^15.14.0",
|
|
"jsdom": "^29.1.1",
|
|
"postcss": "^8.5.15",
|
|
"prettier": "^3.4.2",
|
|
"tailwindcss": "^4.3.0",
|
|
"typescript-eslint": "^8.20.0",
|
|
"vite": "^8.0.14",
|
|
"vitest": "^4.1.10"
|
|
}
|
|
}
|