diff --git a/.gitignore b/.gitignore index b148d01..bee09aa 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ # Dependencies node_modules/ npm-debug.log* +pnpm-debug.log* yarn-debug.log* yarn-error.log* @@ -8,6 +9,8 @@ yarn-error.log* .next/ out/ build/ +.turbo/ +*.tsbuildinfo # Production dist/ @@ -31,6 +34,7 @@ Thumbs.db # Logs *.log +.eslintcache # Runtime data pids @@ -60,4 +64,4 @@ jspm_packages/ .vercel # Netlify -.netlify \ No newline at end of file +.netlify diff --git a/README.md b/README.md index 818f0a9..5da5cd9 100644 --- a/README.md +++ b/README.md @@ -1,376 +1,92 @@ -# Pinnovate Cloud - 云加速服务平台 - -一个现代化的云加速服务网站,基于 Next.js + TypeScript + TailwindCSS 构建,提供完整的云加速服务展示和客户管理功能。 - -## ✨ 功能特性 - -### 🏠 页面功能 -- **首页** - 产品介绍、核心优势、客户证言 -- **产品特性** - 详细的产品功能展示和技术架构 -- **定价方案** - 灵活的定价计划和优惠信息 -- **客户案例** - 成功案例展示和客户证言 -- **新闻资讯** - 技术更新、产品发布、行业动态 -- **关于我们** - 公司介绍、团队展示、发展历程 -- **联系我们** - 多种联系方式、在线表单、常见问题 - -### 🎨 设计特色 -- **现代化 UI** - 采用渐变背景、卡片设计、悬停效果 -- **响应式布局** - 完美适配桌面、平板、手机设备 -- **交互体验** - 平滑动画、加载状态、用户反馈 -- **品牌统一** - 一致的设计语言和色彩体系 - -### 🛠 技术栈 -- **框架**: Next.js 15+ (React 19+) -- **语言**: TypeScript -- **样式**: TailwindCSS -- **图标**: Lucide React -- **内容管理**: Markdown + Gray Matter -- **表单处理**: Formspree - -## 🚀 快速开始 - -### 环境要求 -- Node.js 18+ -- npm 或 yarn - -### 安装依赖 -```bash -npm install -``` - -### 本地开发 -```bash -npm run dev -``` -访问 http://localhost:3000 - -### 快速部署 - -#### 使用 PowerShell 脚本(推荐) -```powershell -# 静态网站部署 -.\deploy.ps1 -Platform static - -# Vercel 部署 -.\deploy.ps1 -Platform vercel - -# Netlify 部署 -.\deploy.ps1 -Platform netlify - -# GitHub Pages 部署 -.\deploy.ps1 -Platform github - -# Docker 部署 -.\deploy.ps1 -Platform docker -``` - -#### 手动部署 -```bash -# 1. 生成静态文件 -npm run build:static - -# 2. 部署到 Vercel (推荐) -npx vercel - -# 3. 或部署到 Netlify -npx netlify deploy --dir=out --prod -``` - -#### 其他部署命令 -```bash -# 类型检查 -npm run type-check - -# 代码检查 -npm run lint - -# 清理构建文件 -npm run clean - -# 预览生产版本 -npm run preview - -# Vercel 部署 -npm run deploy:vercel - -# Netlify 部署 -npm run deploy:netlify - -# Docker 构建 -npm run docker:build - -# Docker 运行 -npm run docker:run -``` - -### 构建与部署 - -#### 静态站点生成 (SSG) -```bash -# 生成静态文件 -npm run build:static - -# 或者使用传统方式 -npm run export -``` - -静态文件将生成在 `out/` 目录中,可以直接部署到任何静态托管服务。 - -#### 服务器端渲染 (SSR) -```bash -# 构建生产版本 -npm run build - -# 启动生产服务器 -npm start -``` - -## 📁 项目结构 -``` -pinnovate-cloud/ -├── components/ # 可复用组件 -│ ├── Navbar.tsx # 导航栏 -│ ├── Hero.tsx # 首页横幅 -│ ├── Features.tsx # 产品特性 -│ ├── Pricing.tsx # 定价方案 -│ ├── CaseList.tsx # 客户案例 -│ ├── NewsList.tsx # 新闻列表 -│ ├── About.tsx # 关于我们 -│ ├── Contact.tsx # 联系表单 -│ ├── Cta.tsx # 行动号召 -│ ├── Footer.tsx # 页脚 -│ └── ... -├── pages/ # 页面路由 -│ ├── index.tsx # 首页 -│ ├── features.tsx # 产品特性页 -│ ├── pricing.tsx # 定价方案页 -│ ├── cases.tsx # 客户案例页 -│ ├── news.tsx # 新闻资讯页 -│ ├── about.tsx # 关于我们页 -│ ├── contact.tsx # 联系我们页 -│ ├── news/ -│ │ └── [slug].tsx # 新闻详情页 -│ └── _app.tsx # 应用入口 -├── content/ # 内容管理 -│ └── news/ # 新闻内容 -│ ├── _example.md -│ ├── product-launch.md -│ └── ... -├── lib/ # 工具库 -│ └── content.ts # 内容处理 -├── public/ # 静态资源 -│ ├── logo.png -│ ├── hero-graphic.png -│ └── ... -├── styles/ # 样式文件 -│ └── globals.css -├── tailwind.config.js # Tailwind 配置 -├── next.config.js # Next.js 配置 -├── tsconfig.json # TypeScript 配置 -├── package.json # 项目依赖 -├── vercel.json # Vercel 部署配置 -├── netlify.toml # Netlify 部署配置 -├── Dockerfile # Docker 容器配置 -├── docker-compose.yml # Docker Compose 配置 -├── nginx.conf # Nginx 服务器配置 -└── .github/workflows/ # GitHub Actions 工作流 - └── deploy.yml -``` - -## 🎯 核心功能 - -### 内容管理 -- **Markdown 支持** - 使用 Markdown 编写新闻内容 -- **自动生成** - 静态页面自动生成和更新 -- **SEO 优化** - 自动生成 sitemap 和 meta 标签 - -### 表单处理 -- **联系表单** - 集成 Formspree 处理表单提交 -- **表单验证** - 客户端和服务端验证 -- **用户反馈** - 提交状态和成功提示 - -### 搜索功能 -- **实时搜索** - 新闻内容实时搜索 -- **分类筛选** - 按标签和分类筛选 -- **排序功能** - 按日期和标题排序 - -## 🎨 自定义配置 - -### 品牌信息 -在 `tailwind.config.js` 中修改品牌色彩: -```javascript -colors: { - primary: '#333333', // 主色调 - background: '#FFFFFF', // 背景色 - accent: '#006AFF', // 强调色 -} -``` - -### 联系信息 -在 `components/Contact.tsx` 和 `components/Footer.tsx` 中更新: -- WhatsApp: +1 917-402-9875 -- 邮箱: support@pinnovatecloud.com -- Telegram: @pinnovatecloud - -### 内容更新 -- 新闻内容:在 `content/news/` 目录下添加 `.md` 文件 -- 客户案例:在 `components/CaseList.tsx` 中更新案例数据 -- 产品特性:在 `components/Features.tsx` 中修改特性列表 - -## 📱 响应式设计 - -网站采用移动优先的响应式设计: -- **手机端** (< 768px) - 单列布局,优化触摸操作 -- **平板端** (768px - 1024px) - 双列布局,平衡内容展示 -- **桌面端** (> 1024px) - 多列布局,充分利用屏幕空间 - -## 🚀 部署建议 - -### 静态站点部署 (推荐) - -#### 1. 生成静态文件 -```bash -# 生成静态文件到 out/ 目录 -npm run build:static -``` - -#### 2. 部署到各种平台 - -**Vercel (推荐)** -```bash -# 安装 Vercel CLI -npm i -g vercel - -# 部署到 Vercel -vercel - -# 或者直接连接 GitHub 仓库自动部署 -``` - -**Netlify** -```bash -# 方法1: 拖拽 out/ 目录到 Netlify -# 方法2: 连接 GitHub 仓库,设置构建命令: npm run build:static -# 方法3: 使用 Netlify CLI -npm i -g netlify-cli -netlify deploy --dir=out -``` - -**GitHub Pages** -```bash -# 1. 将 out/ 目录内容推送到 gh-pages 分支 -# 2. 在仓库设置中启用 GitHub Pages -# 3. 选择 gh-pages 分支作为源 -``` - -**AWS S3 + CloudFront** -```bash -# 1. 将 out/ 目录内容上传到 S3 存储桶 -# 2. 配置 CloudFront 分发 -# 3. 设置自定义域名和 SSL 证书 -``` - -**Nginx 静态托管** -```bash -# 1. 将 out/ 目录内容复制到 Nginx 网站根目录 -# 2. 配置 Nginx 虚拟主机 -# 3. 启用 gzip 压缩和缓存 -``` - -### 服务器端部署 - -#### Docker 部署 -```dockerfile -# 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"] -``` - -```bash -# 构建和运行 -docker build -t pinnovate-cloud . -docker run -p 3000:3000 pinnovate-cloud -``` - -#### PM2 部署 -```bash -# 安装 PM2 -npm i -g pm2 - -# 构建项目 -npm run build - -# 使用 PM2 启动 -pm2 start npm --name "pinnovate-cloud" -- start - -# 保存 PM2 配置 -pm2 save -pm2 startup -``` - -### 部署配置 - -#### 环境变量 -创建 `.env.production` 文件: -```env -NODE_ENV=production -NEXT_PUBLIC_SITE_URL=https://yourdomain.com -NEXT_PUBLIC_API_URL=https://api.yourdomain.com -``` - -#### 性能优化 -- 启用 CDN 加速 -- 配置图片压缩 -- 启用 Gzip 压缩 -- 设置适当的缓存策略 - -### 部署配置文件 - -项目包含多种部署配置,可根据需要选择: - -#### Vercel 部署 -- `vercel.json` - Vercel 平台配置 -- 支持自动部署和预览 -- 包含安全头和缓存策略 - -#### Netlify 部署 -- `netlify.toml` - Netlify 平台配置 -- 支持表单处理和重定向 -- 包含构建命令和环境变量 - -#### Docker 部署 -- `Dockerfile` - 多阶段构建配置 -- `docker-compose.yml` - 容器编排配置 -- `nginx.conf` - Nginx 服务器配置 -- 支持生产环境部署 - -#### GitHub Actions -- `.github/workflows/deploy.yml` - 自动部署工作流 -- 支持 GitHub Pages 部署 -- 包含构建和部署步骤 - -### 监控和维护 -- 使用 Vercel Analytics 或 Google Analytics -- 配置错误监控 (Sentry) -- 设置性能监控 -- 定期更新依赖包 - -## 📄 许可证 - -MIT License - 详见 [LICENSE](LICENSE) 文件 - -## 🤝 贡献 - -欢迎提交 Issue 和 Pull Request 来改进项目! - -## 📞 联系我们 - -- **邮箱**: support@pinnovatecloud.com -- **WhatsApp**: +1 917-402-9875 -- **Telegram**: @pinnovatecloud \ No newline at end of file +# Pinnovate Cloud + +Pinnovate Cloud 是一个基于 Next.js + TypeScript + TailwindCSS 搭建的云加速/网络优化服务站点,涵盖产品能力展示、定价、案例、新闻资讯与在线联系等模块,可静态导出或按 SSR 部署。 + +## 功能概览 +- 页面:首页(Hero、优势、流程、CTA、客户推荐)、产品与服务、定价、成功案例、新闻资讯、关于我们、联系我们、登录占位页。 +- 内容:content/news/*.md 存放新闻 Markdown,通过 lib/content.ts + gray-matter 解析 frontmatter,marked 渲染详情,构建时静态生成。 +- 表单:components/Contact.tsx 集成 Formspree(https://formspree.io/f/xkgvgzal)提交,带表单校验、提交状态与联系方式卡片。 +- 组件:导航、页脚、CTA、案例列表、新闻列表、核心优势等复用组件,Tailwind 响应式布局。 +- 部署:支持静态导出、SSR、Docker 镜像,内置 Vercel/Netlify 配置、Nginx 示例与 PowerShell 一键部署脚本。 + +## 技术栈 +- Next.js 15 / React 19、TypeScript +- TailwindCSS、Lucide React 图标 +- gray-matter + marked 解析 Markdown 内容 +- 部署与运维:Dockerfile、docker-compose.yml、nginx.conf、vercel.json、netlify.toml、deploy.ps1 + +## 目录结构 +` +. +├─pages/ # 路由页(首页、features、pricing、cases、news、about、contact、login 等) +│ └─news/[slug].tsx # 新闻详情的静态路由 +├─components/ # UI 组件(Navbar、Hero、Features、CaseList、NewsList、Contact 等) +├─content/news/ # 新闻 Markdown 数据源 +├─lib/content.ts # 内容读取与 frontmatter 解析 +├─public/ # 图片与静态资源 +├─styles/ # 全局样式 +├─deploy.ps1 # 多平台一键部署脚本 +├─Dockerfile / docker-compose.yml / nginx.conf +├─netlify.toml / vercel.json / DEPLOYMENT.md +└─package.json # 脚本与依赖 +` + +## 快速开始 +- 环境:Node.js 18+,npm +- 安装依赖: +pm install +- 本地开发: +pm run dev,访问 http://localhost:3000 +- 生产构建: +pm run build +- 生产启动: +pm run start + +## 内容维护(新闻) +- 在 content/news/ 下新增 .md 文件即可被列表与详情读取,示例 frontmatter: +`md +--- +title: 标题 +date: 2025-09-15 +summary: 一句话摘要 +tags: [CDN, 性能, 安全] +--- + +正文内容,支持 Markdown 语法。 +` +- 构建时会按照 date 降序生成新闻列表,[slug].tsx 用 marked 渲染正文。 + +## 常用脚本 +- +pm run dev:本地开发 +- +pm run build / +pm run start:SSR 构建与生产运行 +- +pm run build:static / +pm run export:静态导出到 out/ +- +pm run preview:构建后本地预览 +- +pm run type-check、 +pm run lint:类型与代码质量检查 +- +pm run docker:build、 +pm run docker:run:Docker 构建与运行 +- +pm run deploy:vercel、 +pm run deploy:netlify:云平台部署命令占位 + +## 部署指引 +- 静态站点:运行 +pm run build:static,将 out/ 部署到静态托管(Netlify、GitHub Pages 等)。 +- SSR: +pm run build && npm run start,或使用 Dockerfile/docker-compose.yml 与 +ginx.conf。 +- 一键脚本:PowerShell 执行 ./deploy.ps1 -Platform static|vercel|netlify|github|docker。 +- Vercel/Netlify:可直接使用仓库内 ercel.json、 +etlify.toml,或通过脚本触发。 + +## 配置提示 +- 联系表单收件端点在 components/Contact.tsx 中可替换。 +- Tailwind 主题色在 ailwind.config.js 中调整,静态资源放置于 public/。 diff --git a/testfile.txt b/testfile.txt new file mode 100644 index 0000000..25b6906 Binary files /dev/null and b/testfile.txt differ