X1_Site/modify.md

## 2025-01-XX - 移动端兼容性优化

### 优化内容
1. **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`

2. **PageHero 组件移动端适配**
   - 与 Hero 组件相同的响应式优化

3. **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`

4. **所有内容区块移动端适配**
   - 统一内边距：`px-4 md:px-6`
   - 统一间距：`py-10 md:py-14`
   - 标题字体大小：`text-lg md:text-xl`
   - 标题下边距：`mb-4 md:mb-[18px]`

5. **TechSection 网格优化**
   - 小屏幕单列，中等屏幕两列：`grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`

6. **Footer 移动端优化**
   - 字体大小响应式：`text-xs sm:text-sm`
   - 内边距和间距优化

7. **LangSwitch 按钮移动端优化**
   - 字体大小：`text-xs md:text-sm`
   - 添加触摸优化：`touch-manipulation` 和 `active:opacity-80`

8. **全局样式优化**
   - 添加 `-webkit-tap-highlight-color: transparent` 移除点击高亮
   - 小屏幕基础字体大小：`font-size: 14px`

9. **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.json`
  - `data/tech.json` 和 `data/en/tech.json`
  - `data/solutions.json` 和 `data/en/solutions.json`
  - `data/cases.json` 和 `data/en/cases.json`
  - `data/news.json` 和 `data/en/news.json`
  - `data/careers.json` 和 `data/en/careers.json`
  - `data/contact.json` 和 `data/en/contact.json`
- 更新：`types.ts` - 为所有数据类型接口添加可选的 `hero` 字段
- 更新：所有单独页面添加 PageHero 组件：
  - `app/[locale]/about/page.tsx`
  - `app/[locale]/tech/page.tsx`
  - `app/[locale]/solutions/page.tsx`
  - `app/[locale]/cases/page.tsx`
  - `app/[locale]/news/page.tsx`
  - `app/[locale]/careers/page.tsx`
  - `app/[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.tsx`
  - `app/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.json`
  - `data/services.json` 和 `data/en/services.json`
  - `data/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 接收 HeroData
  - `components/AboutSection.tsx` - 从 props 接收 AboutData
  - `components/TechSection.tsx` - 从 props 接收 TechData
  - `components/SolutionsSection.tsx` - 从 props 接收 SolutionsData
  - `components/CasesSection.tsx` - 从 props 接收 CasesData
  - `components/PartnersSection.tsx` - 从 props 接收 PartnersData
  - `components/NewsSection.tsx` - 从 props 接收 NewsData
  - `components/CareersSection.tsx` - 从 props 接收 CareersData
  - `components/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-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` 实施计划与步骤（目标/范围/架构/步骤/部署/替换指南/里程碑）。