# 东云科技官网 (DongYun Technology)

## 项目简介

这是一个使用 Next.js 14 App Router 构建的企业官网，支持多语言国际化，主要面向 AWS 云服务业务。

## 技术栈

- **前端框架**: Next.js 14 (App Router)
- **语言**: TypeScript
- **样式**: Tailwind CSS
- **UI组件**: Radix UI + 自定义组件
- **国际化**: react-i18next
- **状态管理**: React Hooks
- **部署**: Vercel / 自定义服务器

## 功能特性

- 🌍 多语言支持 (中文简体/繁体/英文)
- 📱 响应式设计
- ⚡ 服务端渲染 (SSR)
- 🎨 现代化UI设计
- 📄 Markdown内容支持
- 🔍 SEO优化
- 🚀 高性能优化

## 项目结构

```
dongyun/
├── app/                          # Next.js App Router
│   ├── [locale]/                 # 国际化路由
│   │   ├── layout.tsx           # 本地化布局
│   │   ├── page.tsx             # 首页
│   │   ├── about/               # 关于我们
│   │   ├── contact/             # 联系我们
│   │   ├── consultation/        # 咨询服务
│   │   ├── news/                # 新闻资讯
│   │   ├── products/            # 产品服务
│   │   └── support/             # 技术支持
│   ├── components/              # React组件
│   │   ├── ui/                  # 基础UI组件
│   │   ├── Header.tsx           # 头部组件
│   │   ├── Footer.tsx           # 底部组件
│   │   ├── Logo.tsx             # Logo组件
│   │   └── providers/           # Context提供者
│   ├── api/                     # API路由
│   ├── globals.css              # 全局样式
│   ├── favicon.ico              # 网站图标
│   ├── robots.ts                # SEO机器人配置
│   └── sitemap.ts               # 站点地图
├── lib/                         # 工具函数库
│   ├── utils.ts                 # 通用工具
│   ├── types.ts                 # TypeScript类型定义
│   ├── i18n.ts                  # 国际化配置
│   ├── cms.ts                   # 内容管理
│   ├── seo-config.ts            # SEO配置
│   └── sitemap-*.ts             # 站点地图工具
├── translations/                # 国际化文件
│   ├── zh-CN.ts                 # 中文简体
│   ├── zh-TW.ts                 # 中文繁体
│   ├── en.ts                    # 英文
│   └── */                       # 其他翻译资源
├── docs/                        # 文档资源
│   ├── zh-CN/                   # 中文文档
│   ├── zh-TW/                   # 繁体文档
│   └── en/                      # 英文文档
├── public/                      # 静态资源
├── middleware.ts                # Next.js中间件
├── tailwind.config.ts           # Tailwind配置
├── next.config.mjs              # Next.js配置
├── tsconfig.json                # TypeScript配置
└── package.json                 # 项目依赖
```

## 开发指南

### 环境要求

- Node.js 18+
- npm / yarn / pnpm / bun

### 安装依赖

```bash
npm install
# 或
yarn install
# 或
pnpm install
# 或
bun install
```

### 开发启动

```bash
npm run dev
# 或
yarn dev
# 或
pnpm dev
# 或
bun dev
```

访问 [http://localhost:3000](http://localhost:3000) 查看开发环境。

### 构建生产版本

```bash
npm run build
npm run start
```

### 代码规范

```bash
# 代码格式化
npm run format

# 代码检查
npm run lint
```

## 国际化开发

### 支持的语言

- `zh-CN`: 中文简体 (默认)
- `zh-TW`: 中文繁体
- `en`: 英文

### 路由结构

```
/zh/         # 中文简体 (默认)
/zh-TW/      # 中文繁体
/en/         # 英文
```

### 添加新翻译

1. 在 `translations/` 目录下编辑对应语言文件
2. 使用 `t('key')` 函数调用翻译
3. 在组件中使用 `useTranslation` Hook

```tsx
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();
  
  return <h1>{t('common.title')}</h1>;
}
```

## 组件开发

### UI组件

基础UI组件位于 `app/components/ui/`，基于 Radix UI 构建。

### 业务组件

业务组件位于 `app/components/`，包括：

- `Header.tsx`: 网站头部导航
- `Footer.tsx`: 网站底部信息
- `Logo.tsx`: 品牌Logo
- 各页面专用组件

### 添加新组件

```tsx
// app/components/MyComponent.tsx
interface MyComponentProps {
  title: string;
  locale: string;
}

export default function MyComponent({ title, locale }: MyComponentProps) {
  return (
    <div>
      <h2>{title}</h2>
    </div>
  );
}
```

## 内容管理

### 文档内容

- 文档存放在 `docs/` 目录
- 支持 Markdown 格式
- 按语言分类存储

### 静态资源

- 图片、字体等资源放在 `public/` 目录
- 使用相对路径引用: `/images/logo.png`

## 部署

### Vercel部署

1. 连接 GitHub 仓库
2. 设置环境变量
3. 自动部署

### 自定义服务器

```bash
# 构建
npm run build

# 启动
npm run start
```

### Docker部署

```dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]
```

## 性能优化

- 使用 Next.js 图片优化
- 启用 Gzip 压缩
- 代码分割和懒加载
- 静态资源缓存
- 服务端渲染优化

## 贡献指南

1. Fork 项目
2. 创建功能分支: `git checkout -b feature/new-feature`
3. 提交更改: `git commit -am 'Add new feature'`
4. 推送分支: `git push origin feature/new-feature`
5. 提交 Pull Request

## 许可证

本项目采用 MIT 许可证。

## 联系我们

- 官网: [东云科技](https://www.dongyun.tech)
- 邮箱: contact@dongyun.tech
- 技术支持: support@dongyun.tech

---

*Built with ❤️ by DongYun Technology Team*