元点引擎前端项目重构文档

技术栈选型

• React 19.2 最新版本 + TS + Vite，React Compiler是否启用（暂且搁置讨论）
• 状态管理：Zustand
• 后端数据请求客户端+缓存：Axios+Tanstack Query
• 路由管理，路由懒加载策略：Tanstack Router
• 组件与样式管理：RadixUI+TailwindCSS
• 前端数据校验：zod

代码质量保证工具

• ESLint 用于检查代码质量，确保遵循最佳实践
• Prettier 用于自动格式化代码，保证代码风格的一致性
• clsx + tailwind-merge+cva 解决类名样式的合并冲突，条件判断等问题
• orval 利用它来针对openapi文档来自动生成类型，自动生成Tanstack query方法
• Knip 用来“瘦身”项目代码
• pnpm 包管理工具，避免npm的幽灵依赖问题

测试策略

• react-scan 测试各个页面、组件重刷新次数，提供prompt来针对性优化

Git Workflow & 提交规范

• Husky + lint-staged：在 git commit 时只检查暂存区的文件，强制运行 Lint 和 Format
• Commitlint强制 Git 提交信息遵循 Conventional Commits 规范

其他库

• react-virtuoso：实现虚拟列表
• i18next：实现多语言，未来可能的海外市场（目前只做中文）

前端项目多层流水线操作 服务层自定义Hooks最佳实践 chatbox feature开发思考

Feature 开发文档 瀑布流图片List展示 JSON 美化实现考察

POST 实现 SSE 流解决方案 元点引擎冒烟用例 disvoer feature 的职责描述

状态决策树

• 这个数据来自后端吗？
  • 是：Server State (TanStack Query)
• 如果我刷新页面，这个状态需要保留吗？或者需要分享给别人吗？
  • 是：URL State (TanStack Router Search Params)
• 这个状态是否只在当前这个组件（或其子组件）里有用？
  • 是：Local State (useState)
• 如果是全局状态，需不需要频繁更新？
  • 是：用Zustand这样的全局状态管理
• 最后，像是主题、语言、字体等不常更新的全局状态
  • 再用useContext