🌟 愿景
一直想做一个介于“随手涂鸦”和“工业级产品”之间的东西。通过坚持 TDD 流程和组件驱动开发(CDD),为自己搭建了一套既能玩转复杂逻辑,又能保持视觉丝滑的 Web 应用框架。
🚀 技术方案
“三剑客”的使用心得
- React 19: 为什么非它不可?因为它早已超越了 UI 库,成为了我的思维底座。特别是 React 19 的 Actions 模式和
use原语,让原本繁琐的异步逻辑和状态管理变得非常纯粹。这种声明式的开发范式,是我构建高度抽象且可复用的RT组件集的核心基石。 - TypeScript 5: TS 不仅仅是类型标注,它是我的“防错网”。我利用 TS 5 的声明式特性在组件间建立了强类型契约,这让我在大范围重构代码时心态非常放松。
- Tailwind CSS 4: 脱离了以前繁琐的配置,Tailwind 4 的纯 CSS 配置模式让我管理设计令牌(Design Tokens)时感觉顺手多了。
基础设施的选择
- Ant Design 6: 我把它作为视觉基石,因为它提供了极佳的组件一致性。
- React Router v7: 它统一了数据加载和状态持久化,让这个 Web 应用用起来有种原生 App 的流畅感。
- Redux Toolkit & TanStack Query: RTK 帮我打理 UI 状态,Query 负责和服务器同步数据,缓存和预取做得非常到位。
📁 RT 组件库
我根据原子设计理念,自己写了一套名为 RT (React-Toolkit) 的组件库。它们是我整个应用的视觉基础:
src/components/
├── RTHeading/ # 我设计的标题系统,兼顾 SEO 和视觉节奏
├── RTText/ # 专门处理多语言排版和行高的正文组件
├── RTButton/ # 交互核心,我集成了防抖和触感反馈
├── RTStack/ # Flexbox 辅助组件,帮我减少了大量的零散 CSS
├── RTImage/ # 会“偷懒”的图片加载器,支持渐进式显示
└── RTContainer/ # 响应式安全区域控制
🛠 对开发体验 (DX) 的偏执
我深信,好的流程才能出好的产品。在开发这个项目时,我有几个坚持:
- Biome: 我抛弃了以往 ESLint + Prettier 那套笨重的配置。Biome 运行得极快,让我能更专注于写代码本身,而不是去修格式。
- Storybook 10: 我的组件都是在 Storybook 里独立“练出来的”。我会在这里测试每一种边缘情况,确保它们在任何地方都不掉链子。
- Strict TDD: 核心逻辑我坚持“先写测试,后写代码”。这种契约精神给了我长期维护这个项目的信心。
🎨 视觉与交互的“小巧思”
我喜欢在细节上下功夫。我集成了 tsparticles 和 TextTypewriter 这种轻量级的库,不想让数据看起来太死板。配合 Tailwind 的微过渡动画,我希望你在点击每一个按钮时都能感受到即时的“呼吸感”。
🌍 三语切换的“灵魂”
通过 react-i18next,我实现了中、英、日三语切换。我不只是做了文字翻译,连布局都根据不同语言的长度做了自适应,确保不管你读哪种语言,体验都是一致的。
📁 项目目录概览
src/
├── app/
│ ├── core/ # 核心应用配置(Providers, Store, Theme)
│ ├── resume/ # 模块化业务视图
│ └── nav/ # 路由网格配置
├── components/ # 自研 RT (React-Toolkit) 组件库
├── shared/
│ ├── api/ # 强类型 API 客户端 (Axios)
│ ├── hooks/ # 高度抽象的自定义复用逻辑
│ ├── utils/ # 函数式工具方法
│ └── forms/ # 基于 RHF + Zod 的表单解决方案
├── i18n/ # 国际化多语言资源
└── styles/ # Tailwind 4 现代样式系统