AI Notes App - React + Next.js 前端

高性能AI驱动的笔记应用，基于React 19 + Next.js 15 + TypeScript 5开发。

🚀 快速开始

npm run dev:mock     # 开发模式（带mock数据）
npm run dev         # 标准开发模式
npm run build       # 生产构建
npm run start       # 生产启动

🏗️ 技术栈

• React 19 + Next.js 15 + TypeScript 5 (严格模式)
• Zustand 5 - 高性能状态管理
• Ant Design 5 - UI组件库（二次封装）
• Tailwind CSS 4 - 原子化样式系统
• React.memo + useShallow - 渲染优化
• next/dynamic - 代码分割

✅ 大厂最佳实践检查清单

⚛️ React 优化

• ✅ 状态最小化 - 仅存储认证/会话/UI状态
• ✅ 组件粒度控制 - 基于复用单一职责拆分
• ✅ 渲染优化 - React.memo + useShallow 精确订阅

🌐 Next.js 模式

• ✅ 智能渲染 - SSR/CSR混合策略
• ✅ Middleware优化 - 边缘节点性能提升
• ✅ 代码拆分 - 按需加载减少bundle体积

📦 Zustand 状态管理

• ✅ 边界清晰 - 不存储远程数据
• ✅ 性能优化 - useShallow selectors
• ✅ 模块分离 - auth/layout/theme独立store

🎨 样式系统

• ✅ Design System - src/design-system/ui/ 统一组件封装
• ✅ 代码分割 - clsx + tailwind-merge 智能类名合并
• ✅ 响应式 - 原子化设计系统

📁 项目结构

frontend/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (protected)/        # 受保护路由
│   │   │   ├── dashboard/      # 仪表板 (SSR优化)
│   │   │   ├── notes/          # 笔记管理
│   │   │   ├── settings/       # 设置页面
│   │   │   └── profile/        # 个人资料
│   │   ├── login/              # 登录页面
│   │   └── page.tsx            # 主页
│   ├── components/
│   │   ├── glassmorphism/      # 玻璃态UI组件
│   │   ├── design-system/      # 原子级设计系统
│   │   └── Memoized...         # React.memo优化组件
│   ├── stores/
│   │   ├── auth/               # 认证状态管理
│   │   ├── layout/             # 布局状态管理
│   │   └── theme/              # 主题状态管理
│   ├── services/               # API服务层
│   └── utils/
└── tailwind.config.js          # Tailwind配置

🎯 开发规范

状态管理使用示例

// ✅ 使用优化过的selectors
import { useAuth } from '@/stores/auth/selectors';
const { isAuthenticated, user } = useAuth();

// ✅ 使用design-system组件
import { Button, Card } from '@/design-system/ui';
<Button variant="primary" size="md">操作按钮</Button>
<Card variant="glass">玻璃卡片</Card>

动态加载示例

// ✅ 代码分割
const DynamicComponent = dynamic(() => import('@/components/ExpensiveComponent'));

🔧 环境配置

# .env.development.local
NEXT_PUBLIC_MOCK_MODE=true
NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
NEXT_PUBLIC_DEFAULT_USERNAME=mockuser
NEXT_PUBLIC_DEFAULT_PASSWORD=mockpass

📊 性能优化特性

• Bundle优化: 智能代码分割 + 动态加载
• 渲染优化: React.memo + useShallow 精确订阅
• 样式优化: 统一的design-system减少重复代码
• 开发效率: 完整的TypeScript类型定义

🎨 新功能亮点

1. 设计系统组件 (src/design-system/ui/)

• Button - 封装antd按钮，支持glass/fill/ghost等变体
• Card - 玻璃态卡片，支持拖拽交互
• LoadingSpinner - 统一加载状态

2. 性能优化工具

• useShallow selectors - 防止不必要的重渲染
• next/dynamic配置 - 按需代码分割
• Middleware优化 - 边缘节点性能提升

3. 开发体验提升

• 完整TypeScript支持 - 严格的类型检查
• 一致的设计风格 - 玻璃态UI系统
• 响应式优先 - 移动优先设计

📚 相关文档

• Next.js Documentation
• Ant Design Components
• Zustand Documentation
• Tailwind CSS

🔍 学习更多

查看 src/design-system/ui/ 了解原子组件设计模式，查看 src/stores/**/*selectors.ts 了解状态管理最佳实践。