3.1 KiB
3.1 KiB
1. 上下文审查
- 1.1 阅读 design.md，确认范围、需求、决策、执行约束和待解决问题
- 1.2 审查后端
src/server/logger.ts的 Logger 接口和实现模式，确保前端镜像的一致性 - 1.3 审查
eslint.config.js当前 rules 结构，确认新增前端 console 禁止规则的位置和写法
2. 核心日志模块
- 2.1 新建
src/web/utils/logger.ts：定义LogLevel类型、Logger接口（debug/info/warn/error/child/setLevel）、Sink接口 - 2.2 实现
ConsoleSink：按级别映射到 console.log/warn/error，前缀[Alfred:LEVEL]，data 透传不序列化 - 2.3 实现
NoopLogger：所有方法空实现，child 返回自身，静默丢弃日志 - 2.4 实现
MemoryLogger：将日志条目存入entries数组，用于测试断言 - 2.5 实现
ConsoleLogger：组合 ConsoleSink，生产环境（import.meta.env.PROD）屏蔽 debug/info - 2.6 实现
AntdMessageSink：接收 antd MessageInstance，warn→message.warning，error→message.error，debug/info 不触发 - 2.7 实现
DefaultLogger：组合多个 Sink（ConsoleSink + AntdMessageSink），支持child()作用域绑定
3. React 集成
- 3.1 新建
src/web/hooks/use-logger.ts：useLogger()内部调用App.useApp()获取 message 实例，组装 DefaultLogger + ConsoleSink + AntdMessageSink - 3.2 改造
src/web/components/ErrorBoundary.tsx：console.error替换为createConsoleLogger().error()
4. ESLint 规则
- 4.1 在
eslint.config.js新增src/web/**/*.{ts,tsx}的no-restricted-syntax规则，禁止console.*，排除logger.ts - 4.2 运行
bun run lint验证规则生效且无其他文件违规
5. 测试
- 5.1 新建
tests/web/utils/logger.test.ts：测试 ConsoleLogger/MemoryLogger/NoopLogger 的 debug/info/warn/error 级别输出 - 5.2 测试生产环境静默：MemoryLogger 在
isProduction=true时 debug/info 不记录 - 5.3 测试
child()作用域：绑定后的 Logger 在日志消息中携带对应键值，嵌套 child 追加（同 key 覆盖） - 5.4 新建
tests/web/hooks/use-logger.test.ts：测试 useLogger 返回含 ConsoleSink 的 Logger 实例，warn/error 正常输出到 console（AntdMessageSink 映射在 logger.test.ts 的 AntdMessageSink describe 中测试）
6. 文档
- 6.1 更新
docs/development/frontend.md，新增"日志模块"章节：Logger 接口、使用方式、notification 红线（仅 warn+error） - 6.2 确认
docs/development/frontend.md新增的日志模块章节包含 notification 红线、使用场景区分和 ErrorBoundary 特殊说明
7. 质量门禁
- 7.1 运行
bun test确保所有新增和已有测试通过 - 7.2 运行
bun run typecheck确保零类型错误 - 7.3 运行
bun run lint确保零 lint 违规 - 7.4 手动验证：在
src/web/非 logger.ts 文件临时写入console.log("test")确认 ESLint 报错 - 7.5 手动验证：在浏览器 DevTools 中调用
logger.error("msg", { error: new Error("test") })确认 Error 堆栈可展开