# WEBSOFT 企业官网

> 基于 Next.js 15 + TypeScript 构建的现代化企业官网系统，集成 CMS 内容管理功能

[![Next.js](https://img.shields.io/badge/Next.js-15.3.5-black?style=flat-square&logo=next.js)](https://nextjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-4.0-38B2AC?style=flat-square&logo=tailwind-css)](https://tailwindcss.com/)
[![React](https://img.shields.io/badge/React-19.0-61DAFB?style=flat-square&logo=react)](https://reactjs.org/)

## 🌟 项目特色

- **🚀 现代化技术栈** - Next.js 15 + React 19 + TypeScript + Tailwind CSS v4
- **📱 响应式设计** - 完美适配桌面、平板、手机等各种设备
- **🎨 精美UI界面** - 现代化设计风格，用户体验优秀
- **⚡ 高性能优化** - SSR/SSG、图片优化、代码分割等性能优化
- **🔧 CMS集成** - 与后端CMS系统深度集成，内容动态管理
- **🌐 多语言支持** - 支持中英文切换，国际化友好
- **📊 SEO优化** - 动态metadata、结构化数据、搜索引擎友好
- **🔐 类型安全** - 完整的TypeScript类型定义，开发更安全

## 🏗️ 技术架构

### 前端技术栈
- **框架**: Next.js 15 (App Router)
- **语言**: TypeScript 5.0
- **UI库**: React 19
- **样式**: Tailwind CSS v4
- **构建工具**: Turbopack (开发环境)
- **代码规范**: ESLint + Prettier

### 后端集成
- **API服务**: https://cms-api.websoft.top/api
- **内容管理**: CMS系统集成
- **文件存储**: OSS对象存储
- **多租户**: 支持多租户架构

## 📁 项目结构

```
next-10398/
├── src/
│   ├── app/                    # Next.js App Router 页面
│   │   ├── layout.tsx         # 根布局组件
│   │   ├── page.tsx           # 首页
│   │   ├── globals.css        # 全局样式
│   │   └── ...
│   ├── components/            # React 组件
│   │   ├── layout/           # 布局组件
│   │   │   ├── Header.tsx    # 头部导航
│   │   │   └── Footer.tsx    # 底部信息
│   │   └── sections/         # 页面区块组件
│   │       ├── HeroSection.tsx      # 英雄区域
│   │       ├── FeaturesSection.tsx  # 产品服务
│   │       ├── CasesSection.tsx     # 客户案例
│   │       ├── PartnersSection.tsx  # 合作伙伴
│   │       └── ContactSection.tsx   # 联系我们
│   ├── api/                   # API 接口封装
│   │   ├── cms/              # CMS相关API
│   │   ├── system/           # 系统管理API
│   │   ├── layout/           # 布局相关API
│   │   └── modules/          # 业务模块API
│   ├── config/               # 配置文件
│   │   └── setting.ts        # 系统配置
│   └── utils/                # 工具函数
│       ├── request.ts        # HTTP请求封装
│       ├── common.ts         # 通用工具
│       └── token-util.ts     # Token管理
├── public/                   # 静态资源
├── docs/                     # 项目文档
├── package.json             # 项目依赖
├── next.config.ts           # Next.js配置
├── tailwind.config.js       # Tailwind配置
├── tsconfig.json           # TypeScript配置
└── README.md               # 项目说明
```

## 🚀 快速开始

### 环境要求

- Node.js 18.0 或更高版本
- npm 9.0 或更高版本

### 安装依赖

```bash
# 克隆项目
git clone <repository-url>
cd next-10398

# 安装依赖
npm install
```

### 环境配置

创建 `.env.local` 文件：

```env
# API 配置
NEXT_PUBLIC_API_URL=https://cms-api.websoft.top/api
NEXT_PUBLIC_UPLOAD_URL=https://cms-api.websoft.top/api/upload

# 租户配置
NEXT_PUBLIC_TENANT_ID=10398

# 其他配置
NODE_ENV=development
```

### 启动开发服务器

```bash
# 启动开发服务器 (使用 Turbopack)
npm run dev

# 或使用其他包管理器
yarn dev
pnpm dev
bun dev
```

打开 [http://localhost:3000](http://localhost:3000) 查看网站效果。

### 构建生产版本

```bash
# 构建生产版本
npm run build

# 启动生产服务器
npm run start
```

## 🎨 页面功能

### 首页模块

1. **Hero区域** - 主视觉展示，包含主标题、技术标签和服务图标
2. **产品服务** - 四大核心服务展示（全栈开发、企业应用、移动开发、云服务）
3. **客户案例** - 8个精选案例展示，支持分类和链接跳转
4. **合作伙伴** - 知名企业合作伙伴展示
5. **联系我们** - 联系方式和公司信息展示

### 响应式设计

- **桌面端**: 1200px+ 多列布局，完整功能展示
- **平板端**: 768px-1199px 适配布局，保持良好体验
- **移动端**: <768px 单列布局，触摸友好

## 🔧 核心功能

### 动态内容管理

- **网站信息**: 从CMS系统动态获取网站基本信息
- **导航菜单**: 支持多级导航，动态配置
- **页面内容**: 所有内容支持后台管理和实时更新
- **多语言**: 支持中英文内容切换

### SEO优化

- **动态Metadata**: 根据CMS数据生成页面标题、描述、关键词
- **结构化数据**: 支持搜索引擎结构化数据
- **图片优化**: 自动图片压缩和懒加载
- **性能优化**: SSR/SSG、代码分割、缓存策略

### API集成

- **统一封装**: 完整的API请求封装，支持类型安全
- **错误处理**: 统一的错误处理机制
- **认证管理**: 自动token管理和刷新
- **多租户**: 支持多租户架构

## 🛠️ 开发指南

### 添加新页面

```typescript
// src/app/new-page/page.tsx
export default function NewPage() {
  return (
    <div>
      <h1>新页面</h1>
    </div>
  );
}
```

### 创建新组件

```typescript
// src/components/NewComponent.tsx
interface NewComponentProps {
  title: string;
  content: string;
}

export default function NewComponent({ title, content }: NewComponentProps) {
  return (
    <div className="p-4">
      <h2 className="text-xl font-bold">{title}</h2>
      <p>{content}</p>
    </div>
  );
}
```

### API调用示例

```typescript
// 获取网站信息
import { getSiteInfo } from '@/api/layout';

const siteInfo = await getSiteInfo();
console.log(siteInfo.websiteName);

// 使用现代化API
import { request } from '@/api';

const result = await request.get('/cms/article/list', {
  page: 1,
  limit: 10
});
```

## 📱 部署指南

### Vercel 部署 (推荐)

1. 将代码推送到 GitHub
2. 在 [Vercel](https://vercel.com) 导入项目
3. 配置环境变量
4. 自动部署完成

### 其他平台部署

```bash
# 构建静态文件
npm run build

# 部署 .next 目录到服务器
```

## 🔍 性能优化

- **图片优化**: Next.js Image组件自动优化
- **代码分割**: 自动按路由分割代码
- **缓存策略**: 合理的缓存配置
- **CDN加速**: 静态资源CDN分发
- **懒加载**: 图片和组件懒加载

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 📞 联系我们

- **官网**: https://websoft.top
- **邮箱**: contact@websoft.top
- **电话**: 0771-5386339
- **地址**: 广西南宁市

## 🙏 致谢

感谢以下开源项目：

- [Next.js](https://nextjs.org/) - React 全栈框架
- [Tailwind CSS](https://tailwindcss.com/) - 实用优先的CSS框架
- [TypeScript](https://www.typescriptlang.org/) - JavaScript的超集
- [React](https://reactjs.org/) - 用户界面库

---

**WEBSOFT** - 构建现代Web应用 🚀