
### 目录结构
```
src/
├── api/                    # API 接口管理
│   ├── modules/           # 模块化 API
│   │   ├── auth.js
│   │   ├── user.js
│   │   └── product.js
│   ├── request.js         # Axios 配置和拦截器
│   ├── constants.js       # API 常量
│   └── index.js           # API 统一导出
├── assets/                # 静态资源
│   ├── images/            # 图片资源
│   ├── fonts/             # 字体文件
│   ├── icons/             # SVG 图标
│   └── styles/            # 全局样式
│       ├── _variables.scss # SCSS 变量
│       ├── _mixins.scss    # SCSS 混合
│       ├── _global.scss    # 全局样式
│       └── index.scss      # 样式入口文件
├── components/            # 公共组件
│   ├── common/           # 通用组件（按钮、输入框等）
│   │   ├── Button/
│   │   │   ├── index.tsx
│   │   │   ├── Button.tsx
│   │   │   ├── Button.module.scss
│   │   │   ├── types.ts
│   │   │   └── index.test.tsx
│   ├── layout/           # 布局组件
│   │   ├── Header/
│   │   ├── Sidebar/
│   │   ├── Footer/
│   │   └── PageContainer/
│   └── business/         # 业务组件（可复用的业务模块）
├── containers/           # 容器组件（连接 Redux）
├── pages/               # 页面组件
│   ├── Login/
│   ├── Dashboard/
│   ├── UserManagement/
│   └── ProductManagement/
├── store/               # 状态管理
│   ├── modules/         # Redux 模块
│   │   ├── auth/
│   │   ├── user/
│   │   └── product/
│   ├── rootReducer.ts   # 根 Reducer
│   ├── rootSaga.ts      # 根 Saga
│   ├── store.ts         # Store 配置
│   └── types/           # TypeScript 类型定义
├── hooks/               # 自定义 Hooks
│   ├── useAuth.ts
│   ├── useFetch.ts
│   ├── useLocalStorage.ts
│   └── useDebounce.ts
├── router/              # 路由配置
│   ├── routes/          # 路由配置
│   │   ├── publicRoutes.tsx  # 公开路由
│   │   ├── privateRoutes.tsx # 私有路由
│   │   └── routesConfig.ts   # 路由配置
│   ├── guards/          # 路由守卫
│   │   ├── AuthGuard.tsx
│   │   └── PermissionGuard.tsx
│   └── index.tsx        # 路由主文件
├── utils/               # 工具函数
│   ├── helpers/         # 辅助函数
│   ├── validators/      # 验证函数
│   ├── formatters/      # 格式化函数
│   ├── constants.ts     # 全局常量
│   └── index.ts         # 工具函数统一导出
├── services/            # 服务层
│   ├── authService.ts
│   ├── userService.ts
│   └── storageService.ts
├── types/               # 全局 TypeScript 类型定义
│   ├── global.d.ts      # 全局类型声明
│   ├── api.types.ts     # API 类型
│   └── store.types.ts   # Redux 类型
├── config/              # 配置文件
│   ├── env.ts           # 环境变量配置
│   ├── settings.ts      # 应用设置
│   └── featureFlags.ts  # 功能开关
├── App.tsx              # 根组件
├── main.tsx             # 入口文件
└── setupTests.ts        # 测试配置

public/                  # 静态资源（不经过构建）
├── index.html
├── favicon.ico
├── manifest.json
└── robots.txt

tests/                   # 测试文件
├── unit/               # 单元测试
├── integration/        # 集成测试
├── e2e/               # 端到端测试
└── mocks/             # 测试模拟数据

scripts/                 # 构建脚本
├── build.js
├── start.js
└── deploy.js

config/                  # 构建配置
├── webpack/
│   ├── webpack.common.js
│   ├── webpack.dev.js
│   └── webpack.prod.js
└── jest.config.js

docs/                    # 项目文档
├── api.md
├── architecture.md
└── development.md
```

### 关键配置文件

#### package.json 示例
```json
{
  "name": "react-enterprise-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack serve --config config/webpack/webpack.dev.js",
    "build:dev": "cross-env NODE_ENV=development webpack --config config/webpack/webpack.dev.js",
    "build:prod": "cross-env NODE_ENV=production webpack --config config/webpack/webpack.prod.js",
    "test": "jest",
    "test:coverage": "jest --coverage",
    "lint": "eslint src --ext .ts,.tsx",
    "lint:fix": "eslint src --ext .ts,.tsx --fix",
    "format": "prettier --write \"src/**/*.{ts,tsx,js,json,css,scss}\"",
    "type-check": "tsc --noEmit",
    "prepare": "husky install",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.0",
    "@reduxjs/toolkit": "^1.9.5",
    "react-redux": "^8.1.1",
    "axios": "^1.4.0",
    "dayjs": "^1.11.9",
    "lodash-es": "^4.17.21",
    "immer": "^10.0.3",
    "clsx": "^1.2.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "@types/node": "^20.3.1",
    "typescript": "^5.1.3",
    "webpack": "^5.88.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1",
    "sass": "^1.62.1",
    "@babel/core": "^7.22.5",
    "@babel/preset-env": "^7.22.5",
    "@babel/preset-react": "^7.22.5",
    "@babel/preset-typescript": "^7.22.5",
    "eslint": "^8.43.0",
    "@typescript-eslint/eslint-plugin": "^5.60.1",
    "@typescript-eslint/parser": "^5.60.1",
    "prettier": "^2.8.8",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.3",
    "jest": "^29.5.0",
    "@testing-library/react": "^14.0.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@storybook/react": "^7.0.24",
    "cross-env": "^7.0.3"
  }
}
```

#### TypeScript 配置 (tsconfig.json)
```json
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"],
      "@components/*": ["components/*"],
      "@pages/*": ["pages/*"],
      "@utils/*": ["utils/*"],
      "@api/*": ["api/*"],
      "@store/*": ["store/*"],
      "@hooks/*": ["hooks/*"],
      "@types/*": ["types/*"]
    }
  },
  "include": ["src", "types"],
  "exclude": ["node_modules", "dist", "build"]
}
```




