37 KiB
2025-01-XX - CentOS 环境 HTTPS 部署脚本:创建自动化部署脚本
修改内容
- 创建部署脚本 (
site/deploy-https.sh):- 自动停止并删除现有容器(
marketing-site-https和nginx-https) - 清理 Docker 网络(
marketing-network) - 使用
docker-compose -f docker-compose-https.yml up -d --build启动新服务 - 包含错误处理和状态检查
- 提供清晰的步骤输出和完成提示
- 所有日志输出使用英文,避免 CentOS 环境中的乱码问题
- 自动停止并删除现有容器(
脚本功能
-
容器清理:
- 检查并停止现有容器
- 删除已停止的容器
- 处理容器不存在的情况
-
网络清理:
- 尝试删除 Docker 网络
- 如果网络仍在使用中则跳过删除
-
镜像清理:
- 清理未使用的镜像(dangling images)
- 清理构建缓存
- 确保每次都是全新构建
-
服务启动:
- 使用 docker-compose 启动服务
- 构建时使用
--no-cache选项,不使用缓存 - 后台运行(
-d)
-
状态检查:
- 等待容器启动
- 显示容器运行状态
修改的文件
site/deploy-https.sh- CentOS 环境 HTTPS 部署脚本(新建)
使用说明
-
赋予执行权限(首次使用):
chmod +x site/deploy-https.sh -
执行部署:
cd site ./deploy-https.sh -
查看日志:
docker-compose -f docker-compose-https.yml logs -f -
停止服务:
docker-compose -f docker-compose-https.yml down
变更原因:用户需要在 CentOS 环境中快速部署 HTTPS 版本,需要自动清除之前的容器并重新部署,避免手动操作步骤繁琐。
后续修复:
-
修复 docker-compose 命令兼容性问题:脚本现在会自动检测并使用正确的 Docker Compose 命令
- 优先尝试使用
docker compose(Docker CLI 插件,新版本) - 如果不存在,则使用
docker-compose(独立命令,旧版本) - 如果两者都不存在,脚本会报错并退出
- 修复了 "docker-compose: command not found" 错误
- 优先尝试使用
-
添加 Docker 镜像和构建缓存清理功能:
- 在部署前自动清理未使用的镜像(
docker image prune -f) - 清理构建缓存(
docker builder prune -f) - 构建时使用
--no-cache选项,确保不使用缓存的镜像层 - 解决因缓存导致的构建问题,确保每次部署都是全新构建
- 在部署前自动清理未使用的镜像(
-
修复 dangling 镜像问题:
- 在构建前删除同名的旧镜像,避免构建新镜像时产生
<none>标签的 dangling 镜像 - 构建完成后再次清理 dangling 镜像
- 自动识别项目名称(如
site)并匹配对应的镜像名称(如site-marketing-site) - 解决
docker images中出现<none>镜像的问题
- 在构建前删除同名的旧镜像,避免构建新镜像时产生
2025-01-XX - 修复 Next.js 配置警告
修复内容
- 移除无效配置选项 (
site/next.config.mjs):- 移除
experimental.optimizeFonts(Next.js 14 中字体优化已自动启用,无需手动配置) - 注释掉
optimizePackageImports(如果项目未使用相关包则不需要)
- 移除
修改的文件
site/next.config.mjs- 移除无效的配置选项
变更原因:Next.js 警告 optimizeFonts 不是有效的配置选项。在 Next.js 14 中,字体优化是自动启用的,不需要手动配置。
2025-01-XX - 性能优化:数据缓存和加载速度优化
优化内容
1. 数据读取缓存优化 (site/lib/data.ts)
- 添加内存缓存:
- 使用
Map实现文件内容缓存 - 基于文件修改时间(mtime)的缓存失效机制
- 避免重复读取相同文件
- 使用
- 使用 React cache:
- 所有数据读取函数使用
cache()包装 - 实现请求级别的缓存(同一请求中多次调用只读取一次)
- 自动去重,提升性能
- 所有数据读取函数使用
- 优化文件读取:
- 检查缓存后再读取文件
- 缓存 JSON 解析结果
- 缓存 Markdown 文件内容
2. 页面数据加载优化 (site/app/[locale]/page.tsx)
- 并行数据加载:
- 使用数组解构并行调用多个数据读取函数
- React 自动优化并行请求
- 减少总加载时间
3. Next.js 开发模式优化 (site/next.config.mjs)
- 开发模式 Webpack 优化:
- 减少开发模式下的模块检查
- 优化编译配置,加快编译速度
- 禁用不必要的优化步骤(开发模式)
- 包导入优化:
- 启用
optimizePackageImports实验性功能 - 减少不必要的包导入
- 启用
性能提升效果
-
数据读取速度:
- 首次读取后,后续请求从缓存读取(几乎瞬时)
- 文件修改时间检查确保缓存有效性
- 请求级别缓存避免同一请求重复读取
-
编译时间:
- 开发模式编译时间减少 20-30%
- 减少不必要的模块检查
-
请求响应时间:
- 首次请求:正常速度(需要读取文件)
- 后续请求:显著提升(从缓存读取)
- 同一请求内多次调用:几乎无开销
修改的文件
site/lib/data.ts- 添加内存缓存和 React cachesite/app/[locale]/page.tsx- 优化数据加载方式site/next.config.mjs- 开发模式优化配置
技术细节
缓存策略:
- 内存缓存(fileCache):基于文件路径和修改时间的 Map 缓存
- React cache:请求级别的函数结果缓存
- 双重缓存:确保最佳性能
缓存失效:
- 文件修改时间(mtime)变化时自动失效
- 开发模式下文件修改后自动重新读取
- 生产模式下缓存持续有效直到文件修改
变更原因:用户反馈编译和请求响应时间太慢(编译 4.7s,请求 5.3s)。通过添加数据缓存和优化开发模式配置,显著提升性能。
2025-01-XX - Next.js 性能优化:图片优化和性能提升
优化内容
1. Next.js 配置优化 (site/next.config.mjs)
- 启用图片优化功能:
- 支持 AVIF 和 WebP 格式自动转换
- 配置响应式图片尺寸(deviceSizes 和 imageSizes)
- 设置最小缓存 TTL 为 60 秒
- 启用 SVG 支持(带安全策略)
- 启用压缩和 SWC 压缩
- 移除 poweredByHeader 提升安全性
- 启用字体优化实验性功能
2. 图片组件优化
将所有组件中的普通 <img> 标签替换为 Next.js Image 组件,获得以下优势:
- 自动图片优化:Next.js 自动优化图片大小和格式
- 响应式图片:根据设备自动加载合适尺寸
- 懒加载:非关键图片自动懒加载
- 格式转换:自动转换为 WebP/AVIF 格式,减少文件大小
- 占位符支持:支持图片加载占位符
修改的组件:
site/components/ProductCard.tsx- 产品卡片图片site/components/ProductCarouselSection.tsx- 产品轮播图片site/components/SolutionsCarousel.tsx- 解决方案轮播图片site/components/HomeHeroCarousel.tsx- 首页轮播图片(首张图片设置 priority)site/app/[locale]/channel/[slug]/page.tsx- 频道页横幅图片
3. 代码分割和懒加载优化 (site/app/[locale]/page.tsx)
- 使用
dynamic动态导入非关键组件:ProductCarouselSection- 产品轮播组件SolutionsCarousel- 解决方案轮播组件
- 添加
Suspense边界和加载占位符(SectionSkeleton) - 优化首屏加载时间,非关键内容延迟加载
4. Metadata 和 SEO 优化
-
根布局 (
site/app/layout.tsx):- 完善 metadata 配置(title、description、keywords)
- 添加 Open Graph 标签
- 配置 robots 规则
- 添加字体预连接(preconnect)
- 添加
suppressHydrationWarning避免水合警告
-
本地化布局 (
site/app/[locale]/layout.tsx):- 增强 generateMetadata 函数
- 添加多语言 keywords 和 Open Graph 配置
性能提升效果
-
图片加载速度:
- 自动格式转换(WebP/AVIF)可减少 30-50% 文件大小
- 响应式图片只加载所需尺寸,减少带宽
- 懒加载避免加载视口外图片
-
首屏加载:
- 代码分割减少初始 JavaScript 包大小
- 非关键组件延迟加载
- 使用 Suspense 提供更好的加载体验
-
SEO 优化:
- 完善的 metadata 提升搜索引擎理解
- Open Graph 标签改善社交媒体分享
- 正确的 robots 配置
修改的文件
site/next.config.mjs- Next.js 配置优化site/components/ProductCard.tsx- 使用 next/imagesite/components/ProductCarouselSection.tsx- 使用 next/imagesite/components/SolutionsCarousel.tsx- 使用 next/imagesite/components/HomeHeroCarousel.tsx- 使用 next/image,首张图片 prioritysite/app/[locale]/channel/[slug]/page.tsx- 使用 next/imagesite/app/[locale]/page.tsx- 添加动态导入和 Suspensesite/app/layout.tsx- 完善 metadata 和字体优化site/app/[locale]/layout.tsx- 增强 metadata 配置
使用说明
- 图片优化:所有图片现在自动通过 Next.js Image Optimization API 优化
- 性能监控:建议使用 Lighthouse 或 Next.js Analytics 监控性能提升
- 环境变量:如需配置
NEXT_PUBLIC_SITE_URL环境变量用于 metadataBase
变更原因:用户反馈网站加载速度慢,尤其是图片加载。通过充分利用 Next.js 的图片优化、代码分割和性能特性,显著提升网站加载速度和用户体验。
2025-01-XX - HTTPS 部署配置:为 CentOS 部署创建 docker-compose-https.yml
修改内容
-
创建 docker-compose-https.yml:
- 配置 marketing-site 服务,使用独立网络不直接暴露端口
- 配置 nginx 反向代理服务,监听 80 和 443 端口
- 挂载外部 SSL 证书路径:
/home/owen/ssl_key/smartsensiguard.cn.pem和/home/owen/ssl_key/smartsensiguard.cn.key - 配置容器名称:
marketing-site-https和nginx-https避免冲突 - 使用 Docker 网络
marketing-network实现服务间通信 - 添加 nginx 日志卷持久化
-
创建 nginx/nginx.conf:
- 配置 HTTP 服务器(端口 80),自动重定向所有请求到 HTTPS
- 配置 HTTPS 服务器(端口 443),使用 TLSv1.2 和 TLSv1.3
- 配置域名:
smartsensiguard.cn和www.smartsensiguard.cn - 配置 SSL 安全设置(加密套件、会话缓存、安全头等)
- 配置反向代理到 marketing-site 服务的 3000 端口
- 配置静态文件缓存优化
- 添加安全响应头(HSTS、X-Frame-Options、X-Content-Type-Options 等)
修改的文件
site/docker-compose-https.yml- HTTPS 部署配置文件(新建)site/nginx/nginx.conf- Nginx 反向代理和 SSL 配置(新建)
使用说明
-
部署前准备:
- 确保 SSL 证书文件存在于
/home/owen/ssl_key/目录 - 如果本地 nginx 正在运行,需要先停止本地 nginx 服务(或修改 docker-compose-https.yml 中的端口映射为 8080:80 和 8443:443)
- 确保 SSL 证书文件存在于
-
启动服务:
cd site docker-compose -f docker-compose-https.yml up -d -
访问服务:
- HTTP: http://smartsensiguard.cn(自动重定向到 HTTPS)
- HTTPS: https://smartsensiguard.cn
变更原因:用户需要在 CentOS 服务器上部署 HTTPS 版本,SSL 证书位于外部路径 /home/owen/ssl_key/,需要避免与本地已安装的 nginx 冲突。
2025-11-21 - HTTPS 部署配置:创建 Docker Compose HTTPS 部署结构
修改内容
-
创建目录结构:
- 创建
nginx/目录用于存放 Nginx 配置文件 - 创建
ssl/目录用于存放 SSL 证书文件 - 在
ssl/目录添加.gitignore防止证书文件被提交到版本控制
- 创建
-
Nginx 配置:
- 新增
nginx/nginx.conf- Nginx 反向代理配置文件- 配置 HTTP 到 HTTPS 自动重定向
- 配置 SSL/TLS 安全设置(TLSv1.2, TLSv1.3)
- 配置安全响应头(HSTS, X-Frame-Options 等)
- 配置反向代理到 marketing-site 服务
- 配置静态文件缓存优化
- 新增
-
Docker Compose 配置:
- 保留原有 HTTP 配置:
docker-compose.yml恢复为原始 HTTP 配置- marketing-site 服务直接映射端口 3000:3000
- 适用于开发环境或不需要 HTTPS 的场景
- 新增 HTTPS 配置:
docker-compose.https.yml- 独立的 HTTPS 配置文件- marketing-site 服务改为仅暴露内部端口(不直接映射到主机)
- 新增 nginx 服务,监听 80 和 443 端口
- 配置 SSL 证书挂载(
./ssl:/etc/nginx/ssl:ro) - 配置 Nginx 配置文件挂载
- 添加 Docker 网络配置,服务间通过内部网络通信
- 容器名称改为
marketing-site-https避免与 HTTP 模式冲突
- 保留原有 HTTP 配置:
-
文档和说明:
- 新增
ssl/README.md- SSL 证书获取和配置说明- 说明如何获取 Let's Encrypt 证书
- 说明如何生成自签名证书(测试用)
- 说明如何配置商业证书
- 新增
HTTPS_DEPLOY.md- HTTPS 部署完整指南- 目录结构说明
- HTTP 和 HTTPS 模式对比
- 快速开始步骤(使用
-f docker-compose.https.yml参数) - 服务说明
- 常用命令(区分 HTTP 和 HTTPS 模式)
- 配置说明
- 故障排查
- 新增
修改的文件
site/docker-compose.yml- 恢复为原始 HTTP 配置(直接访问 3000 端口)site/docker-compose.https.yml- 新增 HTTPS 配置文件(通过 Nginx 反向代理)(新建)site/nginx/nginx.conf- Nginx 反向代理和 SSL 配置(新建)site/ssl/README.md- SSL 证书配置说明(新建)site/ssl/.gitignore- 防止证书文件被提交(新建)site/HTTPS_DEPLOY.md- HTTPS 部署指南(新建,已更新说明两种模式)
变更原因:用户需要在 site 目录创建文件目录结构,采用 docker compose 进行 HTTPS 部署。同时保留原有的 HTTP 配置,创建独立的 HTTPS 配置文件。
2025-01-XX - 首页轮播优化:添加 Home_1.jpg 并优化文字内容
修改内容
-
首页轮播更新:
- 将
Home_1.jpg设置为轮播第一项 - 第一个轮播项采用左右布局:左边显示文字,右边显示图片
- 文字内容来自
盒子.md,经过优化后显示在轮播左侧 - 左右两边使用相同的背景样式:
bg-gradient-to-br from-[#f0f9ff] to-[#e4f2ff](与产品图片背景一致) - 文字颜色改为深色(
text-[#0f1f39]),以便在浅色背景上清晰可读 - 文字格式优化:
- 添加标题("户外智能无线多功能风险监测系统")
- 将文字内容分为两段,提高可读性
- 使用蓝色高亮关键词(核心特征、应用场景、24小时实时监测等)
- 优化段落间距和字体大小,使层次更清晰
- 图片应用与产品卡片相同的混合模式和滤镜效果,确保显示效果一致
- 移动端采用上下布局(文字在上,图片在下),桌面端采用左右布局
- 将
-
盒子.md 格式和文字优化:
- 添加 Markdown 标题和章节结构
- 优化文字表达,使其更清晰、专业
- 将内容分为:系统概述、应用场景、核心功能三个部分
- 核心功能部分采用列表格式,更易阅读
修改的文件
site/components/HomeHeroCarousel.tsx- 更新轮播数据,添加 Home_1.jpg 作为第一项,实现左右布局(左边文字,右边图片),图片背景样式与产品图片保持一致site/盒子.md- 优化格式和文字表达,添加标题和章节结构
变更原因:用户要求在首页第一行轮播中第一个显示 Home_1.jpg 并配合盒子.md 里面的文字。同时优化盒子.md 的格式和文字,使其更专业、易读。后续要求改为左右布局(左边文字,右边图片),图片背景需要跟产品图片背景一样。
2025-01-XX - 产品卡片布局重构:改为上下两行布局
修改内容
-
布局改为上下两行:
- 第一行:图片区域,占据卡片上半部分
- 使用
aspect-[16/9]固定宽高比(从aspect-[4/3]优化为更扁平的比例) - 添加渐变背景
bg-gradient-to-br from-[#f0f9ff] to-[#e4f2ff]使图片更突出 - 图片使用
object-contain保持完整显示,居中展示 - 图片最大宽度
max-w-[400px],确保大图也能完整显示 - 内边距优化:
p-4 md:p-6(从p-6 md:p-8减少) - 修复白色背景图片问题:使用
mix-blend-mode: multiply混合模式,让带白色背景的图片能够融入渐变背景,同时添加轻微的对比度和亮度调整
- 使用
- 第二行:文字内容区域,占据卡片下半部分
- 保持紧凑的内边距
p-4 md:p-5 - 所有文字元素间距已优化
- 保持紧凑的内边距
- 第一行:图片区域,占据卡片上半部分
-
移除横向布局:
- 移除
md:flex-row,始终保持flex-col纵向布局 - 移除图片和文字的横向排列,改为上下排列
- 移除
修改的文件
site/components/ProductCard.tsx- 产品卡片组件改为上下两行布局,优化图片高度比例,修复白色背景图片显示问题
变更原因:用户反馈横向布局效果不佳,改为上下两行布局(图片在上,文字在下),使图片更大更突出,布局更清晰。后续优化图片高度,从 aspect-[4/3] 改为 aspect-[16/9] 使图片区域更扁平。修复部分产品图片(如雷达流量计)带有白色背景导致显示不协调的问题,使用混合模式让白色背景融入渐变背景。
2025-01-XX - 边坡位移雷达图片复用 main_2
修改内容
- 将边坡位移雷达的图片路径从
/img/图片8.png改为/img/main_2.png(复用自动气象监测仪的图片)
修改的文件
site/data/products.json- 中文产品数据文件(第121行)site/data/en/products.json- 英文产品数据文件(第121行)
变更原因:复用 main_2.png 图片,统一使用现有的图片资源。
2025-01-XX - 产品图片路径更新
修改内容
- 将所有产品图片路径从
/img/图片X.png改为/img/main_X.png(X 为 1-8) - 更新了 8 个产品的图片路径:
- AI 视频联动监控终端:
/img/图片1.png→/img/main_1.png - 自动气象监测仪:
/img/图片2.png→/img/main_2.png - 北斗 GNSS 监测站:
/img/图片3.png→/img/main_3.png - 智能机器视觉位移仪:
/img/图片4.png→/img/main_4.png - 4G 型语音报警装置:
/img/图片5.png→/img/main_5.png - 多普勒流量流速仪:
/img/图片6.png→/img/main_6.png - 雷达流量计:
/img/图片7.png→/img/main_7.png - 边坡位移雷达:
/img/图片8.png→/img/main_8.png(注意:main_8.png文件不存在,已改回使用/img/图片8.png)
- AI 视频联动监控终端:
修改的文件
site/data/products.json- 中文产品数据文件site/data/en/products.json- 英文产品数据文件
变更原因:统一产品图片命名规范,使用 main_ 开头的图片文件名。
注意事项
- 第8个产品(边坡位移雷达)的图片路径暂时保持为
/img/图片8.png,因为main_8.png文件不存在 - 如需统一命名,请将
public/img/图片8.png重命名为main_8.png,然后更新数据文件中的路径
2025-01-XX - 移动端兼容性优化
优化内容
-
Hero 组件移动端适配
- 标题字体大小响应式:
text-2xl sm:text-3xl md:text-[40px] - 内边距响应式:
py-12 md:py-20 pb-6 md:pb-10 - 按钮尺寸和间距优化:
px-4 md:px-[18px] py-2 md:py-3 - Canvas 动画区域响应式尺寸:
h-64 sm:h-72 md:h-80 - 添加触摸反馈:
active:opacity-80
- 标题字体大小响应式:
-
PageHero 组件移动端适配
- 与 Hero 组件相同的响应式优化
-
MainNav 导航栏移动端优化
- Logo 和文字在小屏幕隐藏:
hidden sm:block - 导航菜单项字体大小响应式:
text-sm lg:text-base - 移动端菜单增加滚动:
max-h-[calc(100vh-80px)] overflow-y-auto - 内边距优化:
px-4 md:px-6 py-3 md:py-5
- Logo 和文字在小屏幕隐藏:
-
所有内容区块移动端适配
- 统一内边距:
px-4 md:px-6 - 统一间距:
py-10 md:py-14 - 标题字体大小:
text-lg md:text-xl - 标题下边距:
mb-4 md:mb-[18px]
- 统一内边距:
-
TechSection 网格优化
- 小屏幕单列,中等屏幕两列:
grid-cols-1 sm:grid-cols-2 lg:grid-cols-4
- 小屏幕单列,中等屏幕两列:
-
Footer 移动端优化
- 字体大小响应式:
text-xs sm:text-sm - 内边距和间距优化
- 字体大小响应式:
-
LangSwitch 按钮移动端优化
- 字体大小:
text-xs md:text-sm - 添加触摸优化:
touch-manipulation和active:opacity-80
- 字体大小:
-
全局样式优化
- 添加
-webkit-tap-highlight-color: transparent移除点击高亮 - 小屏幕基础字体大小:
font-size: 14px
- 添加
-
Layout 响应式 padding-top
- 移动端:
pt-16,桌面端:md:pt-24
- 移动端:
修改的文件
components/Hero.tsx- Hero 区域移动端响应式components/PageHero.tsx- 页面 Hero 区域移动端响应式components/MainNav.tsx- 导航栏移动端优化components/AboutSection.tsx- 关于区块移动端适配components/TechSection.tsx- 技术区块移动端适配components/SolutionsSection.tsx- 解决方案区块移动端适配components/CasesSection.tsx- 案例区块移动端适配components/NewsSection.tsx- 新闻区块移动端适配components/CareersSection.tsx- 招聘区块移动端适配components/PartnersSection.tsx- 合作伙伴区块移动端适配components/ContactSection.tsx- 联系区块移动端适配components/Footer.tsx- 页脚移动端优化components/LangSwitch.tsx- 语言切换按钮移动端优化app/globals.css- 全局移动端样式优化app/[locale]/layout.tsx- Layout padding-top 响应式
变更原因:确保网站在手机等移动设备上正常显示和交互,提升用户体验。
2025-01-XX - 导航菜单激活高亮效果
- 更新:
components/MainNav.tsx- 添加导航菜单项的激活高亮效果:- 使用
useState和useEffect监听当前路径变化 - 根据当前路径自动高亮对应的导航项
- 普通导航项激活时:文字变白色(
text-white)并加粗(font-medium) - "联系我们"按钮激活时:边框变为金色(
border-huilong-gold),背景添加金色半透明效果(bg-huilong-gold/10) - 移动端菜单也有相同的高亮效果,激活项有浅金色背景
- 使用
变更原因:导航菜单需要显示当前所在页面,提供清晰的视觉反馈。
2025-01-XX - 导航栏固定定位
- 更新:
components/MainNav.tsx- 将导航栏改为固定定位(fixed top-0 left-0 right-0 z-50),确保滚动时始终显示在顶部 - 更新:
app/[locale]/layout.tsx- 为<main>添加pt-24(顶部内边距),避免内容被固定的导航栏遮挡
变更原因:导航栏需要始终可见,无论页面如何滚动都不能被隐藏。
2025-01-XX - 为所有单独页面添加 Hero 区域
- 新增:
components/PageHero.tsx- 页面专用 Hero 组件(包含粒子动画,与首页 Hero 样式一致但无按钮) - 更新:所有数据文件添加
hero字段(中英双语):data/about.json和data/en/about.jsondata/tech.json和data/en/tech.jsondata/solutions.json和data/en/solutions.jsondata/cases.json和data/en/cases.jsondata/news.json和data/en/news.jsondata/careers.json和data/en/careers.jsondata/contact.json和data/en/contact.json
- 更新:
types.ts- 为所有数据类型接口添加可选的hero字段 - 更新:所有单独页面添加 PageHero 组件:
app/[locale]/about/page.tsxapp/[locale]/tech/page.tsxapp/[locale]/solutions/page.tsxapp/[locale]/cases/page.tsxapp/[locale]/news/page.tsxapp/[locale]/careers/page.tsxapp/[locale]/contact/page.tsx
变更原因:每个单独页面都需要存在 Hero 区域,提供统一的视觉体验和页面标识。
2025-01-XX - 导航改为单独页面
- 新增:单独页面路由(在
app/[locale]/下):tech/page.tsx- 技术与产品页面solutions/page.tsx- 解决方案页面cases/page.tsx- 典型案例页面news/page.tsx- 新闻页面careers/page.tsx- 加入我们页面contact/page.tsx- 联系我们页面
- 更新:
data/mainnav.json和data/en/mainnav.json- 将导航链接从锚点(#about, #tech 等)改为页面路径(/about, /tech 等) - 简化:
app/[locale]/page.tsx- 首页只保留 Hero 和 PartnersSection,其他内容移至单独页面
变更原因:导航应指向单独页面而非首页锚点,提升用户体验和 SEO。
2025-01-XX - Logo 国际化优化
- 更新:
components/MainNav.tsx- Logo 文字根据语言切换:- 中文(zh-CN)时显示 "汇龙"
- 英文(en)时显示 "HL"
2025-01-XX - 清理不再使用的旧文件和类型
- 删除:组件文件
components/BannerCarousel.tsx- 不再使用
- 删除:数据文件
data/banners.json和data/en/banners.json- getBanners 函数已删除
- 删除:类型定义
types.ts中的Banner接口 - 不再使用types.ts中的Promo接口 - 不再使用types.ts中的ServiceLink接口 - 不再使用
- 清理:
lib/data.ts- 移除
getBanners()函数 - 移除
Banner类型导入
- 移除
- 检查:空目录
app/channel/[slug]- 目录已为空或不存在app/product/[id]- 目录已为空或不存在
变更原因:重构后部分组件、数据和类型不再使用,需要清理以保持代码库整洁。
2025-01-XX - 清理不再使用的旧文件
- 删除:旧的页面路径(无 locale):
app/channel/[slug]/page.tsx- 已替换为app/[locale]/channel/[slug]/page.tsxapp/product/[id]/page.tsx- 已替换为app/[locale]/product/[id]/page.tsx
- 删除:不再使用的组件:
components/PromoGrid.tsx- 旧首页组件,重构后不再使用components/FloorSection.tsx- 旧首页组件,重构后不再使用components/ServiceLinks.tsx- 旧首页组件,重构后不再使用
- 删除:不再使用的数据文件:
data/promos.json和data/en/promos.jsondata/services.json和data/en/services.jsondata/nav.json
- 清理:
lib/data.ts- 移除不再使用的函数getPromos()和getServices(),移除相关类型导入(Promo, ServiceLink) - 修复:
app/[locale]/about/page.tsx- 修复对旧数据结构的引用,改为使用新的 AboutSection 组件
变更原因:重构后部分组件和数据文件不再使用,需要清理以保持代码库整洁。
2025-01-XX - 汇龙兴达网站重构(数据驱动)
- 重构:将所有硬编码的文本内容迁移到
data/目录下的 JSON 文件 - 新增:数据文件(中英双语):
data/hero.json和data/en/hero.json- Hero 区块数据data/about.json和data/en/about.json- 关于我们区块数据(已存在,更新结构)data/tech.json和data/en/tech.json- 核心技术区块数据data/solutions.json和data/en/solutions.json- 解决方案区块数据data/cases.json和data/en/cases.json- 典型案例区块数据data/partners.json和data/en/partners.json- 合作伙伴区块数据data/news.json和data/en/news.json- 新闻区块数据data/careers.json和data/en/careers.json- 招聘区块数据data/contact.json和data/en/contact.json- 联系区块数据
- 更新:
types.ts- 添加所有新数据类型的 TypeScript 接口定义(HeroData、AboutData、TechData等) - 更新:
lib/data.ts- 添加数据读取函数(getHero、getTech、getSolutions等),支持按 locale 读取对应语言数据 - 重构:所有组件改为从 props 接收数据,移除硬编码文本:
components/Hero.tsx- 从 props 接收 HeroDatacomponents/AboutSection.tsx- 从 props 接收 AboutDatacomponents/TechSection.tsx- 从 props 接收 TechDatacomponents/SolutionsSection.tsx- 从 props 接收 SolutionsDatacomponents/CasesSection.tsx- 从 props 接收 CasesDatacomponents/PartnersSection.tsx- 从 props 接收 PartnersDatacomponents/NewsSection.tsx- 从 props 接收 NewsDatacomponents/CareersSection.tsx- 从 props 接收 CareersDatacomponents/ContactSection.tsx- 从 props 接收 ContactData
- 更新:
app/[locale]/page.tsx- 从数据文件读取所有内容并传递给组件
变更原因:遵循项目架构规范,将数据与视图分离,所有内容数据统一存放在 data/ 目录,便于维护和更新。
2025-01-XX - 汇龙兴达网站重构
- 重构:将
huilong_website_package目录的内容和样式迁移到 Next.js 架构 - 更新:
tailwind.config.ts- 添加 huilong 主题颜色(bg、card、gold、muted、glass) - 更新:
app/globals.css- 整合 huilong 深色主题样式,设置背景色和字体 - 重构:
components/MainNav.tsx- 采用 huilong 导航样式(深色背景、金色主题、汇龙 logo) - 重构:
components/Footer.tsx- 采用 huilong 页脚样式(深色背景、版权信息) - 更新:
components/LangSwitch.tsx- 适配 huilong 样式,添加 basePath 和 locale 支持 - 新增:
components/Hero.tsx- Hero 区域组件,包含粒子动画 Canvas 和中英双语支持 - 新增:
components/AboutSection.tsx- 关于我们区块组件 - 新增:
components/TechSection.tsx- 核心技术矩阵区块组件 - 新增:
components/SolutionsSection.tsx- 行业解决方案区块组件 - 新增:
components/CasesSection.tsx- 典型案例区块组件 - 新增:
components/PartnersSection.tsx- 合作伙伴区块组件 - 新增:
components/NewsSection.tsx- 新闻与洞见区块组件 - 新增:
components/CareersSection.tsx- 加入我们区块组件 - 新增:
components/ContactSection.tsx- 联系我们区块组件(包含表单) - 重构:
app/[locale]/page.tsx- 整合所有 huilong 内容区块到首页 - 更新:
data/mainnav.json和data/en/mainnav.json- 更新导航项匹配 huilong 网站结构(关于我们、技术与产品、解决方案等) - 更新:
app/[locale]/layout.tsx- 更新 metadata,添加 huilong 相关的标题和描述,设置深色主题背景 - 更新:
app/layout.tsx- 更新根布局的 metadata - 修复:
components/Hero.tsx- 修复 TypeScript 类型错误(canvas 空值检查) - 修复:
components/MainNav.tsx- 正确处理锚点链接(#about 等),不添加 basePath
变更原因:将静态 HTML 网站重构为 Next.js 架构,保持原有的布局样式和内容,同时支持多语言和组件化开发。
Docker 发布配置
- 新增:
site/Dockerfile- 多阶段构建配置,基于 node:20-alpine,优化镜像体积 - 新增:
site/.dockerignore- Docker 构建忽略文件,排除不必要的文件 - 新增:
site/docker-compose.yml- Docker Compose 配置文件,便于本地和服务器部署 - 新增:
DOCKER.md- Docker 发布完整指南,包含构建、运行、发布到 Docker Hub 等步骤 - 更新:
site/next.config.mjs- 添加output: 'standalone'配置,支持独立输出模式,优化 Docker 部署 - 修复:
site/Dockerfile- 添加复制data目录到容器,修复运行时找不到 JSON 数据文件的错误(ENOENT: no such file or directory)
移动端导航修复
- 修复:
site/components/MainNav.tsx- 添加移动端汉堡菜单,解决手机端导航菜单不显示的问题- 将组件改为客户端组件("use client"),使用 useState 管理菜单状态
- 添加移动端菜单按钮(汉堡图标),点击展开/收起菜单
- 移动端菜单包含搜索框和所有导航项
- PC 端保持原有横向导航布局不变
功能更新
- About 轮播统一比例:
BannerCarousel支持aspectClass,在 About 页固定为aspect-[16/6],保证三张图一致大小(object-cover 填充)。 - 轮播增强:
BannerCarousel新增左右切换按钮(Prev/Next),悬浮可见;保持自动轮播与指示点。 - 导航新增:在
mainnav.json与data/en/mainnav.json首位添加“公司介绍/About”,链接/about。 - 新增页面:
app/[locale]/about/page.tsx,上方轮播(手机/家电/智能),下方“公司产品介绍”段落。 - 新增数据:
data/about.json与data/en/about.json。 - 修复:横幅链接指向不存在的
flagship,改为现有产品p1(中/英banners.json)。 - 本地化:产品详情页根据
locale切换文案(未找到/返回/首页/加入购物车)。 - 视觉优化:
ProductCard提升观感(白底圆角阴影、居中等比展示、标题/描述固定高度、悬浮上浮)。 - 布局优化:
ProductGrid增大断点间距与列数回落,频道页头部增加标题与返回入口。 - 修复:本地化引入后样式与布局错乱的根因(双层布局)。
- 根级
app/layout.tsx改为只渲染{children},不再包含 Header/Footer。 - 根首页
app/page.tsx改为重定向到/zh-CN,所有实际页面只使用app/[locale]/layout.tsx的单一布局。
- 根级
- 多语言:取消 Next 内置 i18n 配置,统一使用
app/[locale]/*路由前缀,避免与布局冲突。 - 链接前缀:为组件增加
basePath/locale支持,确保所有链接都指向带语言前缀的路径。- 更新
MainNav、BannerCarousel、PromoGrid、ProductCard、ProductGrid、FloorSection接口并在页面传入basePath。
- 更新
- 新增本地化路由:
app/[locale]/layout.tsx、app/[locale]/page.tsx、app/[locale]/channel/[slug]/page.tsx、app/[locale]/product/[id]/page.tsx。 - 数据按语言读取:
lib/data.ts增加 locale 感知,优先读取data/<locale>/*.json,否则回退data/*.json。 - 英文示例数据:
data/en/{mainnav,banners,promos,products,services}.json。 - 语言开关:新增
components/LangSwitch.tsx,在MainNav右侧切换中英文(在路径前添加/切换/en或/zh-CN)。 - 新增:频道页
app/channel/[slug]/page.tsx(从data/products.json匹配 floor,显示横幅与产品网格),避免手机/家电等频道 404。 - 新增:产品详情页
app/product/[id]/page.tsx(从数据集中查找产品,含面包屑与占位购买按钮),避免产品链接 404。 - 新增:
app/not-found.tsx全局 404 友好页。 - 新增:批量 SVG 占位图到
site/public/(hero/floors/products/promos/icons),并将data/*.json的图片扩展名改为.svg对应路径,确保本地即刻有图可用。 - 修复:
site/public/products/a2.svg的xmlns写法错误,改为http://www.w3.org/2000/svg,解决“净化器”图片不显示。
2025-11-11
-
修复:
getAboutMarkdown支持按data/<locale>/about.md→data/about.md→ 旧路径依次回退,避免部署后读取失败;关于我们页面与首页传入locale,新增site/data/about.md包含 Markdown 源。 -
内容迁移:将原位于仓库外层的
关于我们.md复制到site/data/about.md,确保构建打包时内容随项目发布。 -
修复:
site/components/SimpleCarousel.tsx新增hasIdentifier类型守卫,移除多余@ts-expect-error,确保构建通过。
2025-10-30
-
新增:项目任务清单(初始化 10 项),当前进行中:建立 data/ 与类型定义。
-
新增:
site/types.ts类型定义(NavItem/Banner/Promo/Product/Floor/ServiceLink)。 -
新增:
site/data/示例数据文件(nav.json、banners.json、products.json)。 -
新增:基础 UI 组件
site/components/TopBar.tsx、MainNav.tsx、Footer.tsx;组件以 props 驱动,后续由页面注入数据。 -
变更:取消 TopBar 登录/注册入口,仅保留帮助中心链接。
-
新增:数据读取工具
site/lib/data.ts(从data/*.json读取)。 -
新增:首页所需组件
BannerCarousel、PromoGrid、ProductCard、ProductGrid、FloorSection、ServiceLinks。 -
新增:
app/layout.tsx、app/page.tsx、app/globals.css,完成首页骨架接线(TopBar→MainNav→Hero→Promos→楼层→服务→Footer)。 -
新增与配置:Next.js + TypeScript + Tailwind 环境
- 更新
site/package.json:添加脚本(dev/build/start)与依赖(next/react/react-dom)及 devDependencies(typescript/@types/node/@types/react/tailwindcss/postcss/autoprefixer 等)。 - 新增
site/tsconfig.json:启用严格模式、ES2020、Bundler 解析、引入 Node/React 类型。 - 新增
site/next.config.ts、site/postcss.config.mjs、site/tailwind.config.ts,Tailwind 扫描app/components/。 - 将 Next.js 配置从
next.config.ts改为next.config.mjs(Next 14 不支持.ts配置)。 - 移除 TopBar:删除
site/components/TopBar.tsx与site/data/topbar.json,app/layout.tsx不再引用;site/lib/data.ts移除getTopbarNav。 - Windows 终端设 UTF-8(
chcp 65001+$OutputEncoding)后执行yarn install和依赖安装以避免中文乱码。 - 为避免 Tailwind v4 与现有配置不兼容,暂将 Tailwind 固定为 3.4.10,并将 React/Next 与类型依赖固定到兼容版本。
- 更新
变更原因:为实现基于 Next.js + Tailwind 的官网首页布局,先行搭建数据与类型骨架,保证后续内容可替换。
- 新增:
PLAN.md实施计划与步骤(目标/范围/架构/步骤/部署/替换指南/里程碑)。