# HP-web

**Repository Path**: lordvv/hp-web

## Basic Information

- **Project Name**: HP-web
- **Description**: GraphIntell官网web系统
- **Primary Language**: TypeScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-08
- **Last Updated**: 2026-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# GraphIntell Web

天大智图官网前端应用 - 基于 Next.js 的现代化企业官网

## 项目概述

本项目使用 Next.js 14+ 构建，采用 App Router 架构，集成 shadcn/ui 组件库。前端通过 API 与 Strapi CMS 交互，实现内容的动态展示。

## 技术栈

- **框架**: Next.js 14+ (App Router)
- **语言**: TypeScript
- **UI组件**: shadcn/ui
- **样式**: Tailwind CSS
- **状态管理**: React Server Components
- **API**: Strapi 5 REST API

## 项目结构

```
web/
├── app/                    # Next.js App Router 页面
│   ├── page.tsx           # 首页
│   ├── news/              # 新闻页面
│   ├── products/          # 产品页面
│   ├── solutions/         # 解决方案页面
│   ├── cases/             # 案例页面
│   └── about/             # 关于页面
├── components/            # React 组件
│   ├── ui/               # shadcn/ui 基础组件
│   └── ...               # 业务组件
├── lib/                  # 工具函数和数据
└── public/               # 静态资源
```

## 安装步骤

### 1. 安装依赖

```bash
cd web
npm install
```

或使用其他包管理器：

```bash
pnpm install
# 或
yarn install
```

### 2. 配置环境变量

创建 `.env.local` 文件：

```env
# Strapi CMS 配置
STRAPI_API_URL=http://localhost:1337
STRAPI_API_URL_PUBLIC=http://localhost:1337

# Next.js 配置（可选）
NEXT_PUBLIC_SITE_NAME=GraphIntell
NEXT_PUBLIC_SITE_URL=http://localhost:3000
```

**环境变量说明：**
- `STRAPI_API_URL`: Strapi API 地址，用于数据请求
- `STRAPI_API_URL_PUBLIC`: Strapi 公开访问地址，用于图片等资源
- `NEXT_PUBLIC_SITE_NAME`: 网站名称
- `NEXT_PUBLIC_SITE_URL`: 网站 URL

### 3. 启动开发服务器

```bash
npm run dev
```

应用将在 `http://localhost:3000` 启动

### 4. 构建生产版本

```bash
npm run build
```

### 5. 启动生产服务器

```bash
npm start
```

## 主要功能

### 1. 首页 (`/`)
- Hero 区域
- 特性展示
- 行业场景
- 合作伙伴 Logo 墙
- 最新动态预览

### 2. 新闻模块 (`/news`)
- 新闻列表页面
- 新闻详情页面
- 与 Strapi CMS 实时同步

### 3. 产品展示 (`/products`)
- 产品列表
- 产品详情

### 4. 解决方案 (`/solutions`)
- 行业解决方案展示

### 5. 案例展示 (`/cases`)
- 客户案例展示

### 6. 关于我们 (`/about`)
- 公司介绍

## 开发命令

```bash
# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 启动生产服务器
npm start

# 代码检查
npm run lint

# 类型检查
npm run type-check
```

## CMS 数据集成

### 数据获取示例

```typescript
// 获取文章列表
async function getArticles() {
  const apiUrl = process.env.STRAPI_API_URL || 'http://localhost:1337';
  const res = await fetch(`${apiUrl}/api/articles?populate=*`, {
    cache: 'no-store' // 实时数据
  });
  return res.json();
}
```

### 数据字段映射

- `title` → 文章标题
- `description` → 文章描述
- `cover.url` → 封面图片
- `category.name` → 分类名称
- `author.name` → 作者名称
- `publishedAt` → 发布时间

## 生产部署

### Vercel 部署（推荐）

1. 推送代码到 GitHub
2. 在 Vercel 中导入项目
3. 配置环境变量
4. 自动部署

### Docker 部署

创建 `Dockerfile`:

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

构建和运行:

```bash
docker build -t graphintell-web .
docker run -p 3000:3000 -d graphintell-web
```

### 传统服务器部署

```bash
# 构建
npm run build

# 使用 PM2 启动
pm2 start npm --name "graphintell-web" -- start
```

## 注意事项

1. **环境变量**: 生产环境必须配置正确的 Strapi 地址
2. **图片优化**: 大图片建议使用 Strapi 的图片格式化功能
3. **API 缓存**: 根据需求调整 `cache` 设置
4. **SEO优化**: 完善各页面的 metadata
5. **性能优化**: 生产环境会自动启用图片优化和代码分割

## 相关项目

- **CMS项目**: `../new_hp_cms` - Strapi 内容管理系统

## 技术支持

如有问题，请联系技术团队或查看相关文档。

## 许可证

Copyright © 2024 GraphIntell. All rights reserved.