# react-website-temp

**Repository Path**: tsweb/react-website-temp

## Basic Information

- **Project Name**: react-website-temp
- **Description**: react 官网
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-20
- **Last Updated**: 2025-05-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LynTime Power Industry Website

LynTime is a modern website template for power industry companies, built with React, Next.js, TypeScript, Tailwind CSS, and Ant Design.

## Features

- **Responsive Design**: Fully responsive layout for all device sizes
- **Modern UI**: Clean and professional interface using Tailwind CSS and Ant Design components
- **Animations**: Smooth animations and transitions using Framer Motion
- **Internationalization**: Multilingual support with i18next (English and Chinese)
- **Page Sections**: Homepage, Products, About Us, Contact pages
- **Floating Consultation Button**: Always accessible customer assistance

## Technology Stack

- **React**: Frontend library for building user interfaces
- **Next.js**: React framework for server-rendered applications
- **TypeScript**: Static type checking for JavaScript
- **Tailwind CSS**: Utility-first CSS framework
- **Ant Design**: UI component library
- **Framer Motion**: Animation library
- **i18next**: Internationalization framework
- **Redux Toolkit**: State management (setup ready for extension)

## Getting Started

### Prerequisites

- Node.js 18.x or higher
- npm or yarn

### Installation

1. Clone the repository:

   ```bash
   git clone https://github.com/your-username/lyntime-website.git
   cd lyntime-website
   ```

2. Install dependencies:

   ```bash
   npm install
   # or
   yarn install
   ```

3. Run the development server:

   ```bash
   npm run dev
   # or
   yarn dev
   ```

4. Open [http://localhost:3000](http://localhost:3000) in your browser.

## Customization

### Content

- Update text in the translation files:
  - `src/locales/en/translation.ts` (English)
  - `src/locales/zh/translation.ts` (Chinese)

### Images

- Add your own images to the `public/images/` directory
- Update image references in components

### Styles

- Customize colors in `tailwind.config.js`
- Update component styles in their respective files

## Project Structure

```
lyntime-website/
├── public/             # Static assets
│   └── images/         # Images
├── src/                # Source code
│   ├── app/            # Next.js pages
│   ├── components/     # React components
│   │   ├── layout/     # Layout components
│   │   └── ui/         # UI components
│   ├── locales/        # Translation files
│   ├── store/          # Redux store
│   ├── styles/         # Global styles
│   └── utils/          # Utility functions
├── README.md           # Project documentation
└── package.json        # Dependencies and scripts
```

## License

This project is licensed under the MIT License - see the LICENSE file for details.

## Acknowledgements

- [Next.js](https://nextjs.org/)
- [React](https://reactjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Ant Design](https://ant.design/)
- [Framer Motion](https://www.framer.com/motion/)

## 技术栈说明

本项目使用了以下主要技术栈：

- React 19.0.0
- Next.js 15.3.2
- Ant Design 5.25.2
- TypeScript

## React 19 与 Ant Design 兼容性配置

### 1. 依赖配置

项目使用了以下关键依赖来确保 React 19 与 Ant Design 的兼容性：

```json
{
  "dependencies": {
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "antd": "^5.25.2",
    "@ant-design/v5-patch-for-react-19": "^1.0.3",
    "@ant-design/cssinjs": "^1.23.0"
  }
}
```

### 2. 兼容性补丁

项目通过以下方式确保 React 19 与 Ant Design 的兼容性：

1. **React 19 兼容性补丁**

   - 使用 `@ant-design/v5-patch-for-react-19` 包
   - 在应用启动时通过 `src/utils/react19-compatibility.ts` 导入补丁
   - 确保在渲染任何 Ant Design 组件之前应用补丁

2. **样式处理**
   - 使用 `@ant-design/cssinjs` 进行样式管理
   - 通过 `AntdRegistry` 组件实现服务端渲染支持
   - 确保样式在服务端和客户端的一致性

### 3. 关键文件说明

#### src/utils/react19-compatibility.ts

```typescript
// 导入 React 19 兼容性补丁
import "@ant-design/v5-patch-for-react-19";
```

- 确保在应用启动时加载兼容性补丁
- 需要在任何 Ant Design 组件渲染之前执行

#### src/lib/AntdRegistry.tsx

- 处理 Ant Design 组件的样式注册
- 配置主题和样式缓存
- 确保服务端渲染时样式的正确加载

### 4. 使用注意事项

1. 确保在应用入口处导入兼容性补丁
2. 使用 `AntdRegistry` 组件包裹应用
3. 避免直接修改 Ant Design 的样式系统
4. 使用 `ConfigProvider` 进行主题配置

### 5. 开发建议

1. 使用最新版本的 TypeScript 类型定义
2. 遵循 Ant Design 的最佳实践
3. 在开发新组件时注意 React 19 的新特性
4. 定期更新依赖以获取最新的兼容性修复

## 项目启动

```bash
# 安装依赖
npm install

# 开发环境运行
npm run dev

# 构建项目
npm run build

# 启动生产环境
npm run start
```