项目结构 #

src/
├── components/          # 组件
│   ├── common/         # 通用组件
│   ├── layout/         # 布局组件
│   └── ui/             # UI组件
├── hooks/              # 自定义Hooks
├── pages/              # 页面组件
├── services/           # API服务
├── store/              # 状态管理
├── utils/              # 工具函数
├── constants/          # 常量
├── styles/             # 全局样式
└── App.jsx

src/
├── features/           # 功能模块
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── services/
│   │   ├── store/
│   │   └── index.js
│   ├── todos/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── store/
│   │   └── index.js
│   └── users/
├── components/         # 共享组件
│   ├── Button/
│   ├── Input/
│   └── Modal/
├── hooks/              # 共享Hooks
├── layouts/            # 布局组件
├── pages/              # 页面入口
├── services/           # API服务
├── store/              # 全局状态
├── utils/              # 工具函数
└── App.jsx

src/
├── components/
│   ├── Header.jsx
│   ├── Footer.jsx
│   └── TodoList.jsx
├── hooks/
│   └── useTodos.js
├── App.jsx
└── main.jsx

components/
├── Button/
│   ├── Button.jsx       # 组件实现
│   ├── Button.test.jsx  # 测试文件
│   ├── Button.module.css # 样式文件
│   ├── Button.stories.jsx # Storybook
│   └── index.js         # 导出文件

// Button.jsx
import styles from './Button.module.css';

export function Button({ children, variant = 'primary', onClick }) {
  return (
    <button
      className={`${styles.button} ${styles[variant]}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

// index.js
export { Button } from './Button';
export { default } from './Button';

components/
├── ui/                  # 基础UI组件
│   ├── Button/
│   ├── Input/
│   ├── Select/
│   └── Modal/
├── layout/              # 布局组件
│   ├── Header/
│   ├── Footer/
│   ├── Sidebar/
│   └── Layout/
└── common/              # 通用业务组件
    ├── UserCard/
    ├── ProductCard/
    └── SearchBar/

contexts/
├── AuthContext.jsx
├── ThemeContext.jsx
├── CartContext.jsx
└── index.js

store/
├── index.js
├── rootReducer.js
└── middleware/

features/
├── auth/
│   ├── authSlice.js
│   ├── authSelectors.js
│   └── authThunks.js
└── todos/
    ├── todosSlice.js
    ├── todosSelectors.js
    └── todosThunks.js

routes/
├── index.jsx            # 路由入口
├── publicRoutes.jsx     # 公开路由
├── protectedRoutes.jsx  # 受保护路由
└── constants.js         # 路由常量

// routes/index.jsx
import { createBrowserRouter } from 'react-router-dom';
import { publicRoutes } from './publicRoutes';
import { protectedRoutes } from './protectedRoutes';

export const router = createBrowserRouter([
  ...publicRoutes,
  ...protectedRoutes
]);

// routes/publicRoutes.jsx
export const publicRoutes = [
  {
    path: '/',
    element: <Home />
  },
  {
    path: '/login',
    element: <Login />
  }
];

// routes/protectedRoutes.jsx
export const protectedRoutes = [
  {
    path: '/dashboard',
    element: (
      <ProtectedRoute>
        <Dashboard />
      </ProtectedRoute>
    )
  }
];

services/
├── api/
│   ├── client.js        # Axios实例
│   ├── interceptors.js  # 拦截器
│   └── endpoints.js     # 端点配置
├── auth/
│   └── authService.js
├── user/
│   └── userService.js
└── index.js

// services/api/client.js
import axios from 'axios';

export const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// services/auth/authService.js
import { apiClient } from '../api/client';

export const authService = {
  login: (credentials) => 
    apiClient.post('/auth/login', credentials),
  
  logout: () => 
    apiClient.post('/auth/logout'),
  
  refreshToken: (token) => 
    apiClient.post('/auth/refresh', { token }),
  
  getCurrentUser: () => 
    apiClient.get('/auth/me')
};

utils/
├── format/
│   ├── date.js
│   ├── number.js
│   └── string.js
├── validation/
│   ├── form.js
│   └── schema.js
├── storage/
│   ├── localStorage.js
│   └── sessionStorage.js
└── helpers/
    ├── array.js
    └── object.js

// utils/format/date.js
export const formatDate = (date, format = 'YYYY-MM-DD') => {
  // 格式化日期
};

export const formatTime = (date) => {
  // 格式化时间
};

// utils/validation/form.js
export const isEmail = (value) => {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
};

export const isPhone = (value) => {
  return /^1[3-9]\d{9}$/.test(value);
};

styles/
├── variables.css        # CSS变量
├── reset.css           # 重置样式
├── global.css          # 全局样式
├── utilities.css       # 工具类
└── themes/
    ├── light.css
    └── dark.css

/* components/Button/Button.module.css */
.button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}

.primary {
  background-color: var(--color-primary);
  color: white;
}

.secondary {
  background-color: var(--color-secondary);
  color: white;
}

# .env.development
VITE_API_URL=http://localhost:3000/api
VITE_APP_TITLE=React App (Dev)

# .env.production
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=React App

// config/index.js
export const config = {
  api: {
    baseURL: import.meta.env.VITE_API_URL,
    timeout: 10000
  },
  app: {
    title: import.meta.env.VITE_APP_TITLE
  },
  features: {
    darkMode: true,
    i18n: true
  }
};

// 命名导出
export { Button };
export { useAuth };

// 默认导出（页面组件）
export default HomePage;

// 统一导出
export { Button } from './Button';
export { IconButton } from './IconButton';

// 1. React相关
import { useState, useEffect } from 'react';

// 2. 第三方库
import { BrowserRouter } from 'react-router-dom';
import { useSelector } from 'react-redux';

// 3. 内部模块（按层级）
import { Button } from '@/components/Button';
import { useAuth } from '@/hooks/useAuth';
import { formatDate } from '@/utils/format';

// 4. 样式
import styles from './App.module.css';