瀏覽代碼

fix: 修复 Dashboard toast 导入并更新 SSR 超时排查说明

- 修复 Dashboard.tsx 中的 toast 导入问题(从不存在的 use-toast 改为使用 sonner)
- 更新 CLAUDE.md 添加 SSR 超时排查说明,指导使用 Playwright MCP 检查控制台日志

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname 3 天之前
父節點
當前提交
e709b3f4c3
共有 2 個文件被更改,包括 8 次插入8 次删除
  1. 5 0
      CLAUDE.md
  2. 3 8
      web/src/client/admin/pages/Dashboard.tsx

+ 5 - 0
CLAUDE.md

@@ -28,6 +28,11 @@
     - **模块化验证**: 每完成一个功能模块立即验证,不等到专门的 E2E 测试 Story
     - **减少返工**: 早期发现问题可以减少后期返工成本
     - **示例流程**: Page Object 开发 → Playwright MCP 探索验证 → 代码修复 → 提交
+  - **SSR 超时排查**: 当使用 Playwright MCP 发现页面 SSR 超时时,需检查页面控制台日志(这是页面运行时错误,非后端 API 问题)
+    - 使用 `browser_console_messages` 工具获取控制台日志
+    - 检查 error 级别的日志
+    - 常见问题:模块导入失败(如 `Failed to resolve import`)、组件渲染错误、TypeScript/JavaScript 运行时错误
+    - 示例场景:SSR 渲染超时(`渲染超时,终止请求`)、页面 `#root` 元素为空、模块脚本加载失败
   - **推荐使用子代理运行**: 运行 Playwright E2E 测试时,使用 Task 工具的 Bash 子代理方式运行,速度更快且多个 Playwright 进程不会冲突
     - 示例提示词: "在 web 目录下运行 `pnpm exec playwright test --config=tests/e2e/playwright.config.ts --project=chromium --grep \"测试名称\"`"
   - 运行所有E2E测试: `pnpm test:e2e:chromium`

+ 3 - 8
web/src/client/admin/pages/Dashboard.tsx

@@ -2,13 +2,12 @@ import { useNavigate } from 'react-router';
 import { Users, Bell, Eye, TrendingUp, TrendingDown, Activity } from 'lucide-react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
 import { Progress } from '@/client/components/ui/progress';
-import { useToast } from '@/client/hooks/use-toast';
+import { toast } from 'sonner';
 import { QUICK_ACTION_ROUTES } from '../constants/routes';
 
 // 仪表盘页面
 export const DashboardPage = () => {
   const navigate = useNavigate();
-  const { toast } = useToast();
   const stats = [
     {
       title: '活跃用户',
@@ -103,17 +102,13 @@ export const DashboardPage = () => {
         navigate(route);
       } else {
         console.warn(`[Dashboard] 未知的快捷操作: ${action}`);
-        toast({
-          variant: 'destructive',
-          title: '未知操作',
+        toast.error('未知操作', {
           description: `未知的快捷操作: ${action}`,
         });
       }
     } catch (error) {
       console.error('[Dashboard] 快捷操作导航失败:', error);
-      toast({
-        variant: 'destructive',
-        title: '导航失败',
+      toast.error('导航失败', {
         description: `无法导航到目标页面: ${action}`,
       });
     }