diff --git a/.gitignore b/.gitignore index 27df75c..0e12435 100644 --- a/.gitignore +++ b/.gitignore @@ -1,45 +1,33 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - # Dependencies -/node_modules -/.pnp +node_modules/ +.pnpm-store/ +.pnp/ .pnp.* .yarn/* !.yarn/patches !.yarn/plugins !.yarn/releases !.yarn/versions -.pnpm-store/ - -# Testing -/coverage -/.nyc_output # Next.js -/.next/ -/out/ -/dist/ -!.next/ -!dist/ +.next/ +out/ +.next/cache/ # Production -/build -/.cache +build/ +dist/ +.cache/ -# Misc -.DS_Store -*.pem -Thumbs.db +# Testing +coverage/ +.nyc_output/ -# Debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* -.pnpm-debug.log* -*-debug.log -*-error.log +# TypeScript +*.tsbuildinfo +next-env.d.ts -# Local env files +# Environment variables .env .env.local .env.development.local @@ -48,11 +36,15 @@ yarn-error.log* .env.*.local # Vercel -.vercel +.vercel/ -# TypeScript -*.tsbuildinfo -next-env.d.ts +# Logs +logs/ +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* # IDE .idea/ @@ -60,9 +52,6 @@ next-env.d.ts *.swp *.swo *~ -.project -.classpath -.settings/ *.sublime-workspace *.sublime-project @@ -72,184 +61,32 @@ next-env.d.ts ._* .Spotlight-V100 .Trashes -ehthumbs.db Thumbs.db +ehthumbs.db -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -lerna-debug.log* +# Debug +*.pem # Runtime data -pids +pids/ *.pid *.seed *.pid.lock -# Coverage directory used by tools like istanbul -coverage - -# nyc test coverage -.nyc_output - -# Dependency directories -node_modules/ - -# Optional eslint cache +# Optional npm cache .eslintcache - -# Optional REPL history .node_repl_history -# Output of 'npm pack' +# Build outputs *.tgz - -# dotenv environment variable files -.env -.env.development.local -.env.test.local -.env.production.local -.env.production - -# parcel-bundler cache (https://parceljs.org/) -.cache -.parcel-cache - -# Storybook build outputs -storybook-static +*.local # Turbopack -.turbo +.turbo/ # Vite vite.config.ts.timestamp-* -dist-ssr -*.local +dist-ssr/ -# Rollup -dist -dist-ssr - -# PyTorch -*.pt -*.pth - -# Machine learning models -model.onnx -*.h5 -*.pb -saved_model/ - -# Python -__pycache__/ -*.py[cod] -*$py.class -*.so -.Python -build/ -develop-eggs/ -dist/ -downloads/ -eggs/ -.eggs/ -lib/ -lib64/ -parts/ -sdist/ -var/ -wheels/ -*.egg-info/ -.installed.cfg -*.egg - -# Jupyter Notebook -.ipynb_checkpoints - -# IPython -profile_default/ -ipython_config.py - -# pyenv -.python-version - -# pipenv -Pipfile.lock - -# poetry -.poetry/ - -# pdm -.pdm.toml - -# PEP 582 -__pypackages__/ - -# Celery stuff -celerybeat-schedule -celerybeat.pid - -# SageMath parsed files -*.sage.py - -# Environments -.venv -env/ -venv/ -ENV/ -env.bak/ -venv.bak/ - -# Spyder project settings -.spyderproject -.spyproject - -# Rope project settings -.ropeproject - -# mkdocs documentation -/site - -# mypy -.mypy_cache/ -.dmypy.json -dmypy.json - -# Pyre type checker -.pyre/ - -# IDEs -.vscode/ -.idea/ -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? - -# macOS -.DS_Store -.AppleDouble -.LSOverride - -# Thumbnails -._* - -# Files that might appear in the root of a volume -.DocumentRevisions-V100 -.fseventsd -.Spotlight-V100 -.TemporaryItems -.Trashes -.VolumeIcon.icns -.com.apple.timemachine.donotpresent - -# Optional additional ignore items -*.bak -*.backup -*.orig -*.rej -*.tmp -*~ +# Trae +.trae/ diff --git a/docs/plans/2026-02-12-website-redesign-design.md b/docs/plans/2026-02-12-website-redesign-design.md deleted file mode 100644 index 8291f3a..0000000 --- a/docs/plans/2026-02-12-website-redesign-design.md +++ /dev/null @@ -1,643 +0,0 @@ -# 睿新致远官网重设计方案 - -**文档版本:** v1.0 -**创建日期:** 2026-02-12 -**设计理念:** 印章文化×现代科技融合 - ---- - -## 一、项目背景与目标 - -### 1.1 项目背景 - -睿新致远(Novalon)是一家以技术创新为核心竞争力的软件公司,品牌以中国传统印章为核心视觉元素,印章采用经典中国红(#C41E3A),象征企业的稳健、专业与传承。 - -当前官网需要全面升级,在视觉冲击力、内容呈现方式、转化路径设计、移动端体验和技术实力展示等多个维度实现突破性提升。 - -### 1.2 核心目标 - -**目标用户群体:** 企业决策者(中高层管理者) - -**业务定位:** 技术创新型公司 - -**核心转化目标:** -1. 获取销售线索(咨询表单、预约演示) -2. 品牌认知建设(提升品牌知名度和行业影响力) -3. 展示技术实力(案例、技术博客、开源项目) - -**设计风格定位:** 混合创新风 - 结合品牌传统元素(印章)与现代设计,打造独特视觉识别 - -**技术优先级:** 极致性能优先 - 首屏加载速度、SEO优化、静态生成 - ---- - -## 二、信息架构设计 - -### 2.1 导航结构 - -基于企业决策者的浏览习惯,设计以下信息架构: - -**主导航:** -1. **首页** - 品牌印象+核心价值传达 -2. **解决方案** - 按行业/场景分类的解决方案展示 -3. **产品服务** - 技术产品和服务介绍 -4. **成功案例** - 客户案例和项目成果 -5. **技术洞察** - 技术博客/白皮书(展示技术实力) -6. **关于我们** - 公司介绍、团队、文化 -7. **联系我们** - 转化入口 - -**设计决策:** -- 将"解决方案"放在首位,符合企业决策者"先看能解决什么问题"的思维模式 -- "技术洞察"替代传统的"新闻动态",更符合技术创新型定位 -- 在每个页面都设置清晰的CTA按钮,引导用户进入"联系我们" - -### 2.2 转化路径设计 - -**主转化路径:** -浏览案例 → 了解解决方案 → 预约咨询 - -**次转化路径:** -阅读技术文章 → 下载白皮书 → 留下邮箱 - -**辅助转化:** -每个页面底部设置"快速咨询"浮动按钮 - ---- - -## 三、首页设计详解 - -### 3.1 Hero区域设计 - -**视觉概念:** 印章的数字化蜕变 - -**布局结构:** -- 左侧:超大标题"以技术创新,铸就卓越未来" + 副标题 + 双CTA按钮 -- 右侧:动态印章视觉装置 - -**印章动画设计(核心亮点):** -1. **初始状态**:传统红色印章,带有古典纹理和光影 -2. **滚动触发**:随着用户滚动,印章逐渐分解为红色粒子 -3. **粒子重组**:粒子重新组合成数字化网格/代码流形态 -4. **循环动画**:粒子在印章形态和数字形态之间缓慢呼吸式切换 - -**技术实现:** -- 使用Canvas或SVG实现粒子动画 -- 采用CSS变量控制动画速度,尊重用户偏好设置 -- 动画资源预加载,确保首屏流畅 -- 降级方案:不支持Canvas时显示静态印章图片 - -**配色方案:** -- 背景:深色渐变(#0F1419 → #1A1F2E) -- 主色:品牌红(#C41E3A)用于印章和CTA按钮 -- 辅助色:科技蓝(#3B82F6)用于粒子效果和装饰元素 -- 文字:白色主标题 + 浅灰副文本 - -**性能优化策略:** -- Hero区域优先加载,动画异步加载 -- 使用WebP格式图片,提供AVIF降级 -- 动画帧率控制在30fps,减少GPU压力 - -### 3.2 核心价值展示区 - -**设计理念:** 用数据说话,建立信任 - -**模块布局:** -- 四个核心指标卡片横向排列(响应式堆叠) -- 每个卡片包含:大数字 + 单位 + 说明文字 + 微动画 - -**指标示例:** -1. **10+年** 技术积累与沉淀 -2. **200+** 成功案例交付 -3. **50+** 技术专家团队 -4. **99.5%** 客户满意度 - -**视觉设计:** -- 卡片背景:半透明玻璃态效果 -- 数字动画:滚动到可视区域时,数字从0递增到目标值 -- 印章元素:每个卡片角落装饰小型印章图标 -- 悬停效果:卡片微微上浮,边框发光 - -### 3.3 解决方案预览区 - -**设计理念:** 场景化展示,快速建立共鸣 - -**布局结构:** -- 左侧:行业场景标签(可切换) -- 右侧:对应场景的解决方案卡片 - -**场景分类:** -- 金融科技 -- 智能制造 -- 数字化转型 -- 企业服务 - -**卡片设计:** -- 卡片包含:场景图标 + 标题 + 核心价值点 + "了解更多"按钮 -- 交互:点击卡片展开详情预览(不跳转页面) -- CTA:底部"查看全部解决方案"按钮 - -### 3.4 技术实力展示区 - -**设计理念:** 可视化技术栈,增强专业可信度 - -**展示方式:** -- 技术能力雷达图:展示技术广度和深度 -- 技术栈Logo墙:合作伙伴和核心技术展示 -- 技术博客预览:最新3篇技术文章卡片 - -**视觉亮点:** -- 雷达图使用品牌红渐变填充 -- Logo墙采用灰度处理,悬停时恢复彩色 -- 文章卡片包含:封面图 + 标题 + 摘要 + 阅读时间 - -### 3.5 成功案例精选区 - -**设计理念:** 用案例证明实力 - -**布局:** -- 网格布局展示6个精选案例 -- 每个案例卡片:客户Logo + 项目名称 + 核心成果 + 标签 - -**交互设计:** -- 悬停效果:卡片翻转显示更多详情 -- 筛选功能:按行业/技术类型筛选 -- CTA:"查看更多案例"按钮 - ---- - -## 四、关键内页设计 - -### 4.1 解决方案页面 - -**设计理念:** 场景化叙事,引导决策 - -**页面结构:** - -1. **Hero区域** - - 大标题:"为您的行业,定制专属解决方案" - - 行业场景选择器(图标+标签形式) - -2. **解决方案详情区** - - 左侧:痛点分析(用印章图标标记关键问题) - - 右侧:解决方案架构图(可交互的流程图) - -3. **核心价值区** - - 3-4个价值点卡片 - - 每个卡片:图标 + 标题 + 详细说明 + 数据支撑 - -4. **相关案例区** - - 该行业的成功案例展示 - - 包含客户评价和成果数据 - -**交互亮点:** -- 场景切换时,内容区域平滑过渡 -- 架构图支持悬停查看详情 -- 每个模块底部都有"预约咨询"CTA - -### 4.2 成功案例页面 - -**设计理念:** 用故事打动决策者 - -**页面布局:** - -1. **筛选导航** - - 按行业、技术类型、项目规模筛选 - - 使用印章风格的筛选标签 - -2. **案例卡片网格** - - 大卡片设计(更突出视觉效果) - - 包含:客户Logo + 项目封面 + 标题 + 核心成果 + 标签 - -3. **案例详情页** - - 项目背景 → 挑战与痛点 → 解决方案 → 实施过程 → 成果展示 - - 用时间线形式展示项目历程 - - 印章元素作为时间线节点装饰 - -**视觉特色:** -- 案例封面采用深色背景+品牌红点缀 -- 成果数据用大字号+动画展示 -- 客户评价区域使用印章作为引用标记 - -### 4.3 关于我们页面 - -**设计理念:** 展现团队实力与文化底蕴 - -**页面模块:** - -1. **品牌故事区** - - 印章文化解读:从传统印章到数字创新 - - 公司发展历程(时间线形式) - -2. **团队展示区** - - 核心团队成员卡片 - - 包含:头像 + 姓名 + 职位 + 专业领域 + 个人简介 - -3. **企业文化区** - - 企业价值观(用印章图标代表每个价值观) - - 团队活动照片墙 - -4. **资质荣誉区** - - 认证证书展示 - - 合作伙伴Logo墙 - -**视觉亮点:** -- 品牌故事区使用印章动画作为背景 -- 团队卡片采用玻璃态效果 -- 企业价值观用印章形态的图标呈现 - -### 4.4 联系我们页面 - -**设计理念:** 降低转化门槛,建立信任 - -**页面布局:** - -1. **快速联系区** - - 醒目的联系电话和邮箱 - - 在线咨询入口(集成第三方客服) - -2. **咨询表单区** - - 简洁的表单设计(仅必填项) - - 表单字段:姓名、公司、联系方式、需求描述 - - 印章风格的提交按钮 - -3. **公司信息区** - - 公司地址(集成地图) - - 办公环境照片 - - 交通指引 - -**转化优化:** -- 表单提交后显示感谢页面+下载白皮书入口 -- 提供多个联系方式选择(电话、邮件、表单) -- 添加"预约演示"选项 - ---- - -## 五、响应式设计与移动端体验 - -### 5.1 响应式布局策略 - -**断点设计:** -- 移动端:320px - 767px -- 平板:768px - 1023px -- 桌面:1024px - 1439px -- 大屏:1440px+ - -**移动端优先原则:** - -1. **导航设计** - - 移动端:汉堡菜单 + 底部固定导航栏 - - 印章Logo居中显示 - - CTA按钮固定在底部(始终可见) - -2. **Hero区域适配** - - 移动端:垂直布局,文字在上,印章动画在下 - - 印章动画简化:减少粒子数量,降低动画复杂度 - - 标题字号自适应:移动端48px → 桌面96px - -3. **卡片布局适配** - - 移动端:单列堆叠 - - 平板:双列网格 - - 桌面:三列或四列网格 - -### 5.2 移动端性能优化 - -**核心策略:** - -1. **图片优化** - - 使用响应式图片(srcset + sizes) - - 移动端加载小尺寸图片 - - WebP格式 + 懒加载 - -2. **动画降级** - - 检测设备性能,自动调整动画质量 - - 低端设备:禁用粒子动画,显示静态印章 - - 支持`prefers-reduced-motion`媒体查询 - -3. **字体加载** - - 使用`font-display: swap`避免FOIT - - 移动端加载字体子集(仅中文常用字) - -4. **代码分割** - - 路由级别代码分割 - - 第三方库按需加载 - - 移动端延迟加载非关键JS - -### 5.3 触摸交互优化 - -**移动端专属交互:** - -1. **手势支持** - - 案例卡片支持左右滑动浏览 - - 图片支持双指缩放 - - 下拉刷新(技术博客页面) - -2. **触摸反馈** - - 所有可点击元素添加触摸反馈效果 - - 使用品牌红色作为触摸高亮色 - - 按钮触摸区域不小于44×44px - -3. **表单优化** - - 输入框自动聚焦时页面滚动到可见区域 - - 使用原生日期选择器 - - 表单验证实时反馈 - -### 5.4 移动端转化优化 - -**关键设计:** - -1. **固定CTA按钮** - - 底部固定"立即咨询"按钮 - - 印章风格的按钮设计 - - 点击展开快速联系面板 - -2. **点击拨号** - - 电话号码可点击直接拨打 - - 邮件地址点击打开邮件应用 - -3. **简化表单** - - 移动端表单字段更精简 - - 支持语音输入 - - 自动填充优化 - ---- - -## 六、技术实现方案 - -### 6.1 组件架构设计 - -**基于现有技术栈的组件规划:** - -#### 核心组件库 -- `SealAnimation`: 印章粒子动画组件 -- `GlassCard`: 玻璃态卡片组件 -- `AnimatedNumber`: 数字递增动画组件 -- `SealIcon`: 印章风格图标组件 -- `CTAButton`: 品牌化CTA按钮组件 - -#### 布局组件 -- `MarketingLayout`: 营销页面通用布局 -- `Navigation`: 导航栏组件(响应式) -- `Footer`: 页脚组件 -- `FloatingCTA`: 浮动CTA按钮(移动端) - -#### 业务组件 -- `SolutionCard`: 解决方案卡片 -- `CaseStudyCard`: 案例卡片 -- `TeamMemberCard`: 团队成员卡片 -- `TechRadarChart`: 技术雷达图 -- `ContactForm`: 联系表单 - -### 6.2 性能优化策略 - -#### Next.js专项优化 - -1. **静态生成(SSG)** - - 所有营销页面使用静态生成 - - 使用`generateStaticParams`预生成动态路由 - - 构建时生成所有案例详情页 - -2. **图片优化** - - 使用Next.js `` 组件 - - 配置图片域名和尺寸 - - 自动WebP转换和懒加载 - -3. **字体优化** - - 使用`next/font`加载本地字体 - - 自动字体子集化 - - 预加载关键字体 - -**配置示例:** -```javascript -// next.config.js -const config = { - output: 'export', - images: { - unoptimized: true, // 静态导出时禁用优化 - formats: ['image/webp'], - }, - experimental: { - optimizeCss: true, - }, -} -``` - -### 6.3 动画实现方案 - -**性能优先的动画策略:** - -1. **印章粒子动画** - - 使用Canvas API实现 - - 使用`requestAnimationFrame`控制帧率 - - 支持`prefers-reduced-motion`降级 - - 移动端自动降低粒子数量 - -2. **滚动动画** - - 使用Intersection Observer API - - 仅在元素进入视口时触发动画 - - 使用CSS transforms(触发GPU加速) - -3. **微交互** - - 优先使用CSS transitions - - 复杂动画使用Framer Motion - - 避免布局抖动 - -**性能监控:** -```typescript -// 动画性能监控 -const checkAnimationPerformance = () => { - if (navigator.hardwareConcurrency < 4) { - return 'low' - } - return 'high' -} -``` - -### 6.4 SEO优化方案 - -#### 技术SEO - -1. **元数据管理** - - 每个页面配置独立的metadata - - 动态生成Open Graph标签 - - 结构化数据(JSON-LD) - -2. **站点地图** - - 自动生成sitemap.xml - - 配置robots.txt - - 规范化URL - -3. **性能指标** - - 目标:LCP < 2.5s, FID < 100ms, CLS < 0.1 - - 使用Next.js内置的性能监控 - - 集成Google Core Web Vitals - -**代码示例:** -```typescript -// app/(marketing)/page.tsx -export const metadata: Metadata = { - title: '睿新致远 - 技术创新驱动数字化转型', - description: '睿新致远是一家专注于技术创新的软件公司...', - openGraph: { - title: '睿新致远 - 技术创新驱动数字化转型', - description: '...', - images: ['/og-image.png'], - }, -} -``` - -### 6.5 数据管理方案 - -#### 内容管理策略 - -1. **静态内容** - - 直接写在组件中 - - 使用TypeScript类型约束 - -2. **动态内容(案例、博客)** - - 使用Markdown文件管理 - - 构建时解析为静态数据 - - 支持前端matter解析 - -3. **表单处理** - - 集成第三方表单服务(如Formspree) - - 或使用Next.js API Routes - - 表单验证使用Zod - -**文件结构:** -``` -content/ - cases/ - case-1.md - case-2.md - blog/ - article-1.md - article-2.md -``` - ---- - -## 七、实施路径与预期效果 - -### 7.1 实施路径规划 - -**分阶段交付策略:** - -#### 阶段一:基础架构搭建(1-2周) -- 建立组件库和设计系统 -- 实现响应式布局框架 -- 配置性能优化基础设施 -- 完成导航和页脚组件 - -#### 阶段二:核心页面开发(2-3周) -- 首页Hero区域+印章动画 -- 解决方案页面 -- 成功案例列表页 -- 联系我们页面 - -#### 阶段三:内容完善(1-2周) -- 案例详情页 -- 关于我们页面 -- 技术博客系统 -- 表单集成和测试 - -#### 阶段四:优化与上线(1周) -- 性能优化和测试 -- SEO优化 -- 多设备测试 -- 正式上线部署 - -### 7.2 预期效果评估 - -#### 品牌提升效果 - -1. **视觉识别度提升60%** - - 独特的印章×科技融合设计 - - 差异化竞争优势明显 - - 品牌记忆点突出 - -2. **专业形象强化** - - 技术实力可视化展示 - - 案例和数据的说服力 - - 符合企业决策者审美 - -#### 业务转化效果 - -1. **转化率提升预期:30-50%** - - 清晰的转化路径设计 - - 多触点CTA布局 - - 降低咨询门槛 - -2. **用户停留时间增加:40%** - - 吸引人的视觉设计 - - 有价值的内容呈现 - - 流畅的浏览体验 - -#### 技术性能指标 - -1. **性能指标达标** - - LCP < 2.5秒 - - FID < 100毫秒 - - CLS < 0.1 - - 移动端首屏加载 < 3秒 - -2. **SEO优化效果** - - 搜索引擎收录率100% - - 核心关键词排名提升 - - 结构化数据完整 - -### 7.3 风险控制与应对 - -**潜在风险:** - -1. **动画性能风险** - - 应对:提供降级方案,低端设备自动禁用复杂动画 - -2. **开发周期风险** - - 应对:采用分阶段交付,优先核心功能 - -3. **内容准备风险** - - 应对:提前规划内容需求,提供内容模板 - -### 7.4 后续优化方向 - -**持续改进计划:** - -1. **数据分析驱动优化** - - 集成Google Analytics 4 - - 用户行为热力图分析 - - A/B测试关键页面 - -2. **内容运营支持** - - 定期更新技术博客 - - 添加新案例展示 - - 优化SEO关键词 - -3. **功能扩展预留** - - 多语言支持(国际化) - - 客户案例视频展示 - - 在线演示预约系统 - ---- - -## 八、总结 - -### 8.1 核心优势 - -本"印章文化×现代科技融合方案"将: - -✅ **完美融合品牌传统与现代科技**,打造独特的视觉识别 -✅ **针对企业决策者优化**,提升转化率和用户体验 -✅ **极致性能优先**,确保快速加载和SEO友好 -✅ **全面升级各个维度**,实现品牌、转化、技术实力的全面提升 - -### 8.2 差异化竞争优势 - -1. **文化底蕴深厚**:印章元素不仅是视觉符号,更是品牌精神的载体 -2. **技术创新突出**:粒子动画、数据可视化等现代技术手段展现技术实力 -3. **用户体验优先**:性能优化、响应式设计、转化路径优化贯穿始终 -4. **可执行性强**:分阶段实施、风险可控、效果可量化 - ---- - -**文档状态:** 已完成 -**下一步行动:** 进入实施阶段,启动基础架构搭建 diff --git a/docs/plans/2026-02-13-website-redesign-implementation-plan.md b/docs/plans/2026-02-13-website-redesign-implementation-plan.md deleted file mode 100644 index 191b205..0000000 --- a/docs/plans/2026-02-13-website-redesign-implementation-plan.md +++ /dev/null @@ -1,1279 +0,0 @@ -# 睿新致远官网重构实施计划 - -> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. - -**Goal:** 基于优秀案例参考，全面升级睿新致远官网，融合印章文化与现代科技，提升品牌形象和转化率 - -**Architecture:** 采用 Next.js 16 App Router + React 19 + TypeScript 技术栈，基于现有组件库扩展，优化 Hero 区域印章动画，新增技术洞察板块和客户评价模块，全面提升用户体验和转化路径 - -**Tech Stack:** Next.js 16.1.6, React 19.2.3, TypeScript 5, Tailwind CSS v4, Framer Motion 12.29.2, shadcn/ui - ---- - -## 实施策略 - -### 优先级说明 - -**P0（核心功能）** - 必须完成，直接影响品牌形象和转化 -**P1（重要功能）** - 显著提升用户体验和专业度 -**P2（增强功能）** - 锦上添花，可后续迭代 - -### 开发原则 - -- **TDD（测试驱动开发）**：先写测试，再写实现 -- **DRY（不重复）**：复用现有组件和工具函数 -- **YAGNI（不过度设计）**：只实现当前需要的功能 -- **频繁提交**：每个小功能点独立提交 -- **性能优先**：关注 LCP、FID、CLS 指标 - ---- - -## Phase 1: P0 核心功能优化（预计 5-7 天） - -### Task 1: 优化印章粒子动画组件 - -**目标：** 增强印章粒子动画的视觉效果和交互体验 - -**Files:** -- Modify: `src/components/effects/seal-particle.tsx` -- Create: `src/components/effects/seal-animation-enhanced.tsx` -- Test: `src/components/effects/__tests__/seal-animation-enhanced.test.tsx` - -**Step 1: 创建增强版印章动画组件** - -创建文件：`src/components/effects/seal-animation-enhanced.tsx` - -```typescript -'use client'; - -import { useEffect, useRef, useCallback, useState } from 'react'; - -interface Particle { - x: number; - y: number; - targetX: number; - targetY: number; - vx: number; - vy: number; - size: number; - opacity: number; - color: string; - life: number; - maxLife: number; - stage: 'idle' | 'dispersing' | 'reforming'; -} - -interface SealAnimationEnhancedProps { - width?: number; - height?: number; - particleCount?: number; - colors?: string[]; - sealText?: string; - animationStages?: boolean; - onStageChange?: (stage: string) => void; - className?: string; -} - -export function SealAnimationEnhanced({ - width = 300, - height = 300, - particleCount = 150, - colors = ['#C41E3A', '#D4A574', '#8B4513'], - sealText = '睿新', - animationStages = true, - onStageChange, - className = '', -}: SealAnimationEnhancedProps) { - const canvasRef = useRef(null); - const particlesRef = useRef([]); - const animationRef = useRef(null); - const [currentStage, setCurrentStage] = useState<'idle' | 'dispersing' | 'reforming'>('idle'); - const stageTimerRef = useRef(null); - - const createSealShape = useCallback((width: number, height: number) => { - const centerX = width / 2; - const centerY = height / 2; - const sealSize = Math.min(width, height) * 0.35; - const particles: { x: number; y: number }[] = []; - - // 创建印章形状的粒子位置（简化版方形印章） - for (let i = 0; i < particleCount; i++) { - const angle = (i / particleCount) * Math.PI * 2; - const radius = sealSize * (0.8 + Math.random() * 0.4); - particles.push({ - x: centerX + Math.cos(angle) * radius * (Math.random() > 0.5 ? 1 : 0.8), - y: centerY + Math.sin(angle) * radius * (Math.random() > 0.5 ? 1 : 0.8), - }); - } - - return particles; - }, [particleCount]); - - const createParticle = useCallback( - (x: number, y: number, targetX: number, targetY: number): Particle => { - const color = colors[Math.floor(Math.random() * colors.length)]; - const size = 2 + Math.random() * 3; - const maxLife = 200 + Math.random() * 100; - - return { - x, - y, - targetX, - targetY, - vx: (Math.random() - 0.5) * 2, - vy: (Math.random() - 0.5) * 2, - size, - opacity: 0.6 + Math.random() * 0.4, - color, - life: 0, - maxLife, - stage: 'idle', - }; - }, - [colors] - ); - - useEffect(() => { - const canvas = canvasRef.current; - if (!canvas) return; - - const ctx = canvas.getContext('2d'); - if (!ctx) return; - - canvas.width = width; - canvas.height = height; - - const sealPositions = createSealShape(width, height); - particlesRef.current = sealPositions.map((pos, i) => - createParticle(pos.x, pos.y, pos.x, pos.y) - ); - - // 动画阶段控制 - if (animationStages) { - // 3秒后开始分散 - stageTimerRef.current = setTimeout(() => { - setCurrentStage('dispersing'); - onStageChange?.('dispersing'); - - particlesRef.current.forEach(p => { - p.vx = (Math.random() - 0.5) * 4; - p.vy = (Math.random() - 0.5) * 4; - p.stage = 'dispersing'; - }); - - // 2秒后开始重组 - setTimeout(() => { - setCurrentStage('reforming'); - onStageChange?.('reforming'); - - particlesRef.current.forEach(p => { - p.stage = 'reforming'; - }); - - // 3秒后回到idle - setTimeout(() => { - setCurrentStage('idle'); - onStageChange?.('idle'); - }, 3000); - }, 2000); - }, 3000); - } - - const animate = () => { - ctx.clearRect(0, 0, width, height); - - particlesRef.current.forEach((particle) => { - if (particle.stage === 'reforming') { - // 向目标位置移动 - const dx = particle.targetX - particle.x; - const dy = particle.targetY - particle.y; - particle.vx += dx * 0.02; - particle.vy += dy * 0.02; - particle.vx *= 0.95; - particle.vy *= 0.95; - } - - particle.x += particle.vx; - particle.y += particle.vy; - particle.life++; - - // 绘制粒子 - ctx.beginPath(); - ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2); - ctx.fillStyle = particle.color; - ctx.globalAlpha = particle.opacity; - ctx.fill(); - ctx.globalAlpha = 1; - }); - - animationRef.current = requestAnimationFrame(animate); - }; - - animate(); - - return () => { - if (animationRef.current) { - cancelAnimationFrame(animationRef.current); - } - if (stageTimerRef.current) { - clearTimeout(stageTimerRef.current); - } - }; - }, [width, height, createSealShape, createParticle, animationStages, onStageChange]); - - return ( - - ); -} -``` - -**Step 2: 创建测试文件** - -创建文件：`src/components/effects/__tests__/seal-animation-enhanced.test.tsx` - -```typescript -import { render, screen } from '@testing-library/react'; -import { SealAnimationEnhanced } from '../seal-animation-enhanced'; - -describe('SealAnimationEnhanced', () => { - it('should render canvas element', () => { - render(); - const canvas = screen.getByRole('img'); - expect(canvas).toBeInTheDocument(); - }); - - it('should accept custom props', () => { - const { container } = render( - - ); - const canvas = container.querySelector('canvas'); - expect(canvas).toHaveAttribute('width', '400'); - expect(canvas).toHaveAttribute('height', '400'); - }); - - it('should call onStageChange callback', (done) => { - const handleStageChange = (stage: string) => { - expect(stage).toBe('dispersing'); - done(); - }; - - render( - - ); - }); -}); -``` - -**Step 3: 运行测试** - -```bash -npm test src/components/effects/__tests__/seal-animation-enhanced.test.tsx -``` - -Expected: PASS - -**Step 4: 提交代码** - -```bash -git add src/components/effects/seal-animation-enhanced.tsx -git add src/components/effects/__tests__/seal-animation-enhanced.test.tsx -git commit -m "feat: add enhanced seal animation component with stages" -``` - ---- - -### Task 2: 更新 Hero Section 使用增强版印章动画 - -**目标：** 在 Hero 区域集成增强版印章动画，提升视觉冲击力 - -**Files:** -- Modify: `src/components/sections/hero-section.tsx` -- Create: `src/lib/constants.ts` (如果不存在) - -**Step 1: 检查并创建 constants 文件** - -检查文件是否存在：`src/lib/constants.ts` - -如果不存在，创建： - -```typescript -export const COMPANY_INFO = { - name: '睿新致远', - slogan: '以技术创新，铸就卓越未来', - description: '专注于数字化转型与技术创新，为企业提供全方位的技术解决方案', - foundedYear: 2014, - teamSize: '50+', -}; - -export const STATS = [ - { value: '10+', label: '年技术积累' }, - { value: '200+', label: '成功案例' }, - { value: '50+', label: '技术专家' }, - { value: '99.5%', label: '客户满意度' }, -]; - -export const NAV_LINKS = [ - { href: '#home', label: '首页' }, - { href: '#solutions', label: '解决方案' }, - { href: '#cases', label: '成功案例' }, - { href: '#about', label: '关于我们' }, - { href: '#contact', label: '联系我们' }, -]; -``` - -**Step 2: 更新 Hero Section** - -修改文件：`src/components/sections/hero-section.tsx` - -在文件顶部添加导入： - -```typescript -import { SealAnimationEnhanced } from '@/components/effects/seal-animation-enhanced'; -``` - -在 Hero Section 组件中，找到现有的 `SealParticle` 组件，替换为： - -```typescript -{/* 增强版印章动画 */} -
- console.log('Animation stage:', stage)} - className="opacity-80" - /> -
-``` - -**Step 3: 测试更新后的 Hero Section** - -```bash -npm run dev -``` - -访问 http://localhost:3000，检查： -- 印章动画是否正常显示 -- 动画阶段是否按预期切换（idle → dispersing → reforming → idle） -- 移动端是否隐藏动画（lg:block） - -**Step 4: 提交代码** - -```bash -git add src/components/sections/hero-section.tsx -git add src/lib/constants.ts -git commit -m "feat: integrate enhanced seal animation in hero section" -``` - ---- - -### Task 3: 创建技术洞察卡片组件 - -**目标：** 创建可复用的技术洞察卡片组件，用于展示技术文章和白皮书 - -**Files:** -- Create: `src/components/ui/insight-card.tsx` -- Create: `src/components/ui/__tests__/insight-card.test.tsx` - -**Step 1: 创建 InsightCard 组件** - -创建文件：`src/components/ui/insight-card.tsx` - -```typescript -'use client'; - -import { Calendar, Clock, ArrowRight } from 'lucide-react'; -import { Badge } from '@/components/ui/badge'; - -export interface InsightCardProps { - title: string; - excerpt: string; - category: string; - readTime: string; - publishedAt: string; - imageUrl?: string; - href: string; - featured?: boolean; -} - -export function InsightCard({ - title, - excerpt, - category, - readTime, - publishedAt, - imageUrl, - href, - featured = false, -}: InsightCardProps) { - return ( -
- {imageUrl && ( -
- {title} -
-
- )} - -
-
- - {category} - -
- - {readTime} -
-
- -

- {title} -

- -

- {excerpt} -

- -
-
- - {publishedAt} -
- - - 阅读更多 - - -
-
-
- ); -} -``` - -**Step 2: 创建测试文件** - -创建文件：`src/components/ui/__tests__/insight-card.test.tsx` - -```typescript -import { render, screen } from '@testing-library/react'; -import { InsightCard } from '../insight-card'; - -describe('InsightCard', () => { - const defaultProps = { - title: '测试文章标题', - excerpt: '这是一篇测试文章的摘要内容', - category: '技术洞察', - readTime: '5 分钟', - publishedAt: '2026-02-13', - href: '/insights/test-article', - }; - - it('should render card with all props', () => { - render(); - - expect(screen.getByText('测试文章标题')).toBeInTheDocument(); - expect(screen.getByText('这是一篇测试文章的摘要内容')).toBeInTheDocument(); - expect(screen.getByText('技术洞察')).toBeInTheDocument(); - expect(screen.getByText('5 分钟')).toBeInTheDocument(); - expect(screen.getByText('2026-02-13')).toBeInTheDocument(); - }); - - it('should render image when imageUrl provided', () => { - render( - - ); - - const image = screen.getByRole('img'); - expect(image).toHaveAttribute('src', '/test-image.jpg'); - }); - - it('should have correct link href', () => { - render(); - - const link = screen.getByRole('link', { name: /阅读更多/i }); - expect(link).toHaveAttribute('href', '/insights/test-article'); - }); - - it('should apply featured class when featured prop is true', () => { - const { container } = render( - - ); - - const article = container.querySelector('article'); - expect(article).toHaveClass('md:col-span-2'); - }); -}); -``` - -**Step 3: 运行测试** - -```bash -npm test src/components/ui/__tests__/insight-card.test.tsx -``` - -Expected: PASS - -**Step 4: 提交代码** - -```bash -git add src/components/ui/insight-card.tsx -git add src/components/ui/__tests__/insight-card.test.tsx -git commit -m "feat: add insight card component for tech insights section" -``` - ---- - -### Task 4: 创建技术洞察板块组件 - -**目标：** 创建完整的技术洞察板块，展示最新技术文章和白皮书 - -**Files:** -- Create: `src/components/sections/insights-section.tsx` -- Create: `src/components/sections/__tests__/insights-section.test.tsx` -- Modify: `src/app/(marketing)/page.tsx` - -**Step 1: 创建 InsightsSection 组件** - -创建文件：`src/components/sections/insights-section.tsx` - -```typescript -'use client'; - -import { useEffect, useState, useRef } from 'react'; -import { InsightCard } from '@/components/ui/insight-card'; -import { Button } from '@/components/ui/button'; -import { ArrowRight } from 'lucide-react'; - -interface Insight { - id: string; - title: string; - excerpt: string; - category: string; - readTime: string; - publishedAt: string; - imageUrl?: string; - href: string; - featured?: boolean; -} - -const MOCK_INSIGHTS: Insight[] = [ - { - id: '1', - title: '2025年技术趋势：AI驱动的数字化转型', - excerpt: '深入探讨人工智能如何重塑企业技术架构，以及如何把握AI时代的机遇', - category: '技术趋势', - readTime: '8 分钟', - publishedAt: '2026-02-10', - imageUrl: '/insights/ai-trend.jpg', - href: '/insights/ai-trend-2025', - featured: true, - }, - { - id: '2', - title: '微服务架构最佳实践指南', - excerpt: '从单体应用到微服务的演进之路，包含实战案例和避坑指南', - category: '架构设计', - readTime: '12 分钟', - publishedAt: '2026-02-08', - imageUrl: '/insights/microservices.jpg', - href: '/insights/microservices-best-practices', - }, - { - id: '3', - title: '云原生技术栈选型指南', - excerpt: 'Kubernetes、Docker、Service Mesh等技术栈的深度对比与选型建议', - category: '云原生', - readTime: '10 分钟', - publishedAt: '2026-02-05', - imageUrl: '/insights/cloud-native.jpg', - href: '/insights/cloud-native-stack-guide', - }, -]; - -export function InsightsSection() { - const [isVisible, setIsVisible] = useState(false); - const sectionRef = useRef(null); - - useEffect(() => { - const observer = new IntersectionObserver( - ([entry]) => { - if (entry.isIntersecting) { - setIsVisible(true); - } - }, - { threshold: 0.1 } - ); - - if (sectionRef.current) { - observer.observe(sectionRef.current); - } - - return () => observer.disconnect(); - }, []); - - return ( -
-
-
-

- 技术洞察 -

-

- 分享前沿技术趋势、最佳实践和深度思考，助力企业数字化转型 -

-
- -
- {MOCK_INSIGHTS.map((insight) => ( - - ))} -
- -
- -
-
-
- ); -} -``` - -**Step 2: 创建测试文件** - -创建文件：`src/components/sections/__tests__/insights-section.test.tsx` - -```typescript -import { render, screen } from '@testing-library/react'; -import { InsightsSection } from '../insights-section'; - -describe('InsightsSection', () => { - it('should render section with title', () => { - render(); - - expect(screen.getByText('技术洞察')).toBeInTheDocument(); - expect(screen.getByText(/分享前沿技术趋势/)).toBeInTheDocument(); - }); - - it('should render insight cards', () => { - render(); - - expect(screen.getByText('2025年技术趋势：AI驱动的数字化转型')).toBeInTheDocument(); - expect(screen.getByText('微服务架构最佳实践指南')).toBeInTheDocument(); - expect(screen.getByText('云原生技术栈选型指南')).toBeInTheDocument(); - }); - - it('should render view all button', () => { - render(); - - expect(screen.getByText('查看全部洞察')).toBeInTheDocument(); - }); -}); -``` - -**Step 3: 更新首页集成技术洞察板块** - -修改文件：`src/app/(marketing)/page.tsx` - -在导入部分添加： - -```typescript -import { InsightsSection } from '@/components/sections/insights-section'; -``` - -在 `HomePage` 组件中，在 `` 之前添加： - -```typescript - -``` - -**Step 4: 测试集成效果** - -```bash -npm run dev -``` - -访问 http://localhost:3000，检查： -- 技术洞察板块是否正确显示 -- 卡片布局是否响应式 -- 滚动动画是否触发 - -**Step 5: 提交代码** - -```bash -git add src/components/sections/insights-section.tsx -git add src/components/sections/__tests__/insights-section.test.tsx -git add src/app/(marketing)/page.tsx -git commit -m "feat: add insights section to homepage" -``` - ---- - -### Task 5: 创建客户评价组件 - -**目标：** 创建客户评价展示组件，增强社会证明 - -**Files:** -- Create: `src/components/ui/testimonial-card.tsx` -- Create: `src/components/sections/testimonials-section.tsx` -- Modify: `src/app/(marketing)/page.tsx` - -**Step 1: 创建 TestimonialCard 组件** - -创建文件：`src/components/ui/testimonial-card.tsx` - -```typescript -'use client'; - -import { Quote } from 'lucide-react'; - -export interface TestimonialCardProps { - quote: string; - author: string; - position: string; - company: string; - avatarUrl?: string; - rating?: number; -} - -export function TestimonialCard({ - quote, - author, - position, - company, - avatarUrl, - rating = 5, -}: TestimonialCardProps) { - return ( -
- - - {rating > 0 && ( -
- {Array.from({ length: rating }).map((_, i) => ( - - - - ))} -
- )} - -
- "{quote}" -
- -
- {avatarUrl && ( - {author} - )} -
-
{author}
-
- {position} · {company} -
-
-
-
- ); -} -``` - -**Step 2: 创建 TestimonialsSection 组件** - -创建文件：`src/components/sections/testimonials-section.tsx` - -```typescript -'use client'; - -import { useEffect, useState, useRef } from 'react'; -import { TestimonialCard } from '@/components/ui/testimonial-card'; - -interface Testimonial { - id: string; - quote: string; - author: string; - position: string; - company: string; - avatarUrl?: string; - rating?: number; -} - -const MOCK_TESTIMONIALS: Testimonial[] = [ - { - id: '1', - quote: '睿新致远团队的专业能力和服务态度让我们印象深刻，他们不仅交付了高质量的产品，还帮助我们建立了完善的技术体系。', - author: '张总', - position: 'CTO', - company: '某金融科技公司', - rating: 5, - }, - { - id: '2', - quote: '在与睿新致远的合作中，我们感受到了他们对技术创新的执着追求。他们提供的解决方案极大地提升了我们的业务效率。', - author: '李经理', - position: '技术总监', - company: '某制造企业', - rating: 5, - }, - { - id: '3', - quote: '感谢睿新致远团队的专业支持，他们帮助我们完成了数字化转型的关键一步，为未来的发展奠定了坚实基础。', - author: '王总', - position: '总经理', - company: '某零售集团', - rating: 5, - }, -]; - -export function TestimonialsSection() { - const [isVisible, setIsVisible] = useState(false); - const sectionRef = useRef(null); - - useEffect(() => { - const observer = new IntersectionObserver( - ([entry]) => { - if (entry.isIntersecting) { - setIsVisible(true); - } - }, - { threshold: 0.1 } - ); - - if (sectionRef.current) { - observer.observe(sectionRef.current); - } - - return () => observer.disconnect(); - }, []); - - return ( -
-
-
-

- 客户评价 -

-

- 听听我们的客户怎么说 -

-
- -
- {MOCK_TESTIMONIALS.map((testimonial) => ( - - ))} -
-
-
- ); -} -``` - -**Step 3: 更新首页集成客户评价板块** - -修改文件：`src/app/(marketing)/page.tsx` - -在导入部分添加： - -```typescript -import { TestimonialsSection } from '@/components/sections/testimonials-section'; -``` - -在 `HomePage` 组件中，在 `` 之前添加： - -```typescript - -``` - -**Step 4: 测试集成效果** - -```bash -npm run dev -``` - -访问 http://localhost:3000，检查客户评价板块是否正确显示 - -**Step 5: 提交代码** - -```bash -git add src/components/ui/testimonial-card.tsx -git add src/components/sections/testimonials-section.tsx -git add src/app/(marketing)/page.tsx -git commit -m "feat: add testimonials section to homepage" -``` - ---- - -### Task 6: 优化联系表单 - -**目标：** 优化联系表单的用户体验和验证逻辑 - -**Files:** -- Modify: `src/components/sections/contact-section.tsx` -- Create: `src/lib/validations/contact.ts` - -**Step 1: 创建表单验证逻辑** - -创建文件：`src/lib/validations/contact.ts` - -```typescript -import { z } from 'zod'; - -export const contactFormSchema = z.object({ - name: z - .string() - .min(2, '姓名至少需要2个字符') - .max(50, '姓名不能超过50个字符'), - company: z - .string() - .min(2, '公司名称至少需要2个字符') - .max(100, '公司名称不能超过100个字符'), - email: z - .string() - .email('请输入有效的邮箱地址'), - phone: z - .string() - .regex(/^1[3-9]\d{9}$/, '请输入有效的手机号码') - .optional() - .or(z.literal('')), - message: z - .string() - .min(10, '留言内容至少需要10个字符') - .max(500, '留言内容不能超过500个字符'), -}); - -export type ContactFormData = z.infer; - -export function validateContactForm(data: unknown) { - return contactFormSchema.safeParse(data); -} -``` - -**Step 2: 更新 ContactSection 组件** - -修改文件：`src/components/sections/contact-section.tsx` - -添加表单验证和提交逻辑（具体代码根据现有实现调整） - -**Step 3: 测试表单验证** - -```bash -npm run dev -``` - -测试各种表单输入场景 - -**Step 4: 提交代码** - -```bash -git add src/lib/validations/contact.ts -git add src/components/sections/contact-section.tsx -git commit -m "feat: add form validation to contact section" -``` - ---- - -## Phase 2: P1 重要功能优化（预计 3-4 天） - -### Task 7: 优化移动端体验 - -**目标：** 优化移动端的导航、动画和性能 - -**Files:** -- Modify: `src/components/layout/header.tsx` -- Modify: `src/components/effects/seal-particle.tsx` -- Create: `src/hooks/use-device-performance.ts` - -**Step 1: 创建设备性能检测 Hook** - -创建文件：`src/hooks/use-device-performance.ts` - -```typescript -'use client'; - -import { useState, useEffect } from 'react'; - -export type PerformanceLevel = 'low' | 'medium' | 'high'; - -export function useDevicePerformance(): PerformanceLevel { - const [performance, setPerformance] = useState('high'); - - useEffect(() => { - // 检测设备性能 - const checkPerformance = () => { - // 检查 CPU 核心数 - const cores = navigator.hardwareConcurrency || 4; - - // 检查设备内存（如果可用） - const memory = (navigator as any).deviceMemory || 8; - - // 检查是否为移动设备 - const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( - navigator.userAgent - ); - - // 检查是否启用了减少动画 - const prefersReducedMotion = window.matchMedia( - '(prefers-reduced-motion: reduce)' - ).matches; - - if (prefersReducedMotion) { - setPerformance('low'); - } else if (isMobile && (cores < 4 || memory < 4)) { - setPerformance('low'); - } else if (isMobile || cores < 8) { - setPerformance('medium'); - } else { - setPerformance('high'); - } - }; - - checkPerformance(); - }, []); - - return performance; -} -``` - -**Step 2: 更新印章动画组件以支持性能降级** - -修改文件：`src/components/effects/seal-particle.tsx` - -添加性能检测和降级逻辑 - -**Step 3: 优化移动端导航** - -修改文件：`src/components/layout/header.tsx` - -优化移动端菜单交互 - -**Step 4: 测试移动端体验** - -```bash -npm run dev -``` - -使用浏览器开发者工具测试移动端显示效果 - -**Step 5: 提交代码** - -```bash -git add src/hooks/use-device-performance.ts -git add src/components/effects/seal-particle.tsx -git add src/components/layout/header.tsx -git commit -m "feat: optimize mobile experience with performance detection" -``` - ---- - -### Task 8: 添加案例详情页优化 - -**目标：** 优化案例详情页的展示效果和用户体验 - -**Files:** -- Modify: `src/app/(marketing)/cases/[slug]/page.tsx` (如果存在) -- Create: `src/components/ui/case-detail-card.tsx` - -**Step 1: 创建案例详情卡片组件** - -创建文件：`src/components/ui/case-detail-card.tsx` - -**Step 2: 优化案例详情页布局** - -修改案例详情页文件 - -**Step 3: 测试案例详情页** - -**Step 4: 提交代码** - ---- - -## Phase 3: P2 增强功能（预计 2-3 天） - -### Task 9: 添加深色模式支持 - -**目标：** 实现深色/浅色主题切换 - -**Files:** -- Create: `src/components/ui/theme-toggle.tsx` -- Modify: `src/app/layout.tsx` -- Modify: `src/app/globals.css` - -**Step 1: 创建主题切换组件** - -**Step 2: 更新全局样式** - -**Step 3: 测试主题切换** - -**Step 4: 提交代码** - ---- - -### Task 10: 性能优化和测试 - -**目标：** 全面优化性能指标，确保达到预期目标 - -**Files:** -- Modify: `next.config.ts` -- Create: `tests/performance/lighthouse.test.ts` - -**Step 1: 配置性能优化** - -**Step 2: 运行 Lighthouse 测试** - -**Step 3: 优化关键指标** - -**Step 4: 提交代码** - ---- - -## 验收标准 - -### 功能验收 - -- [ ] Hero 区域印章动画正常工作，支持多阶段动画 -- [ ] 技术洞察板块正确展示，响应式布局良好 -- [ ] 客户评价板块正常显示，星级评分准确 -- [ ] 联系表单验证逻辑正确，错误提示清晰 -- [ ] 移动端体验流畅，动画降级正常 - -### 性能验收 - -- [ ] LCP < 2.5秒 -- [ ] FID < 100毫秒 -- [ ] CLS < 0.1 -- [ ] 移动端首屏加载 < 3秒 - -### 代码质量验收 - -- [ ] 所有测试通过 -- [ ] ESLint 检查无错误 -- [ ] TypeScript 类型检查通过 -- [ ] 代码提交信息规范 - ---- - -## 风险控制 - -### 潜在风险 - -1. **动画性能风险** - - 缓解：提供降级方案，低端设备自动禁用复杂动画 - -2. **开发周期风险** - - 缓解：采用分阶段交付，优先核心功能 - -3. **测试覆盖风险** - - 缓解：每个组件都编写单元测试，集成测试覆盖关键路径 - ---- - -## 后续优化方向 - -1. **数据分析驱动优化** - - 集成 Google Analytics 4 - - 用户行为热力图分析 - - A/B 测试关键页面 - -2. **内容运营支持** - - 定期更新技术博客 - - 添加新案例展示 - - 优化 SEO 关键词 - -3. **功能扩展预留** - - 多语言支持（国际化） - - 客户案例视频展示 - - 在线演示预约系统 - ---- - -**文档状态:** 已完成 -**创建日期:** 2026-02-13 -**预计完成时间:** 10-14 天 diff --git a/e2e-tests/config/__pycache__/__init__.cpython-313.pyc b/e2e-tests/config/__pycache__/__init__.cpython-313.pyc new file mode 100644 index 0000000..b3e5fa4 Binary files /dev/null and b/e2e-tests/config/__pycache__/__init__.cpython-313.pyc differ diff --git a/e2e-tests/config/__pycache__/browsers.cpython-313.pyc b/e2e-tests/config/__pycache__/browsers.cpython-313.pyc new file mode 100644 index 0000000..74cd3b0 Binary files /dev/null and b/e2e-tests/config/__pycache__/browsers.cpython-313.pyc differ diff --git a/e2e-tests/config/__pycache__/settings.cpython-313.pyc b/e2e-tests/config/__pycache__/settings.cpython-313.pyc new file mode 100644 index 0000000..c97ad04 Binary files /dev/null and b/e2e-tests/config/__pycache__/settings.cpython-313.pyc differ diff --git a/e2e-tests/pages/__pycache__/__init__.cpython-313.pyc b/e2e-tests/pages/__pycache__/__init__.cpython-313.pyc new file mode 100644 index 0000000..5a4c205 Binary files /dev/null and b/e2e-tests/pages/__pycache__/__init__.cpython-313.pyc differ diff --git a/e2e-tests/pages/__pycache__/base_page.cpython-313.pyc b/e2e-tests/pages/__pycache__/base_page.cpython-313.pyc new file mode 100644 index 0000000..7be046f Binary files /dev/null and b/e2e-tests/pages/__pycache__/base_page.cpython-313.pyc differ diff --git a/e2e-tests/pages/__pycache__/contact_page.cpython-313.pyc b/e2e-tests/pages/__pycache__/contact_page.cpython-313.pyc new file mode 100644 index 0000000..5661372 Binary files /dev/null and b/e2e-tests/pages/__pycache__/contact_page.cpython-313.pyc differ diff --git a/e2e-tests/pages/__pycache__/home_page.cpython-313.pyc b/e2e-tests/pages/__pycache__/home_page.cpython-313.pyc new file mode 100644 index 0000000..948297f Binary files /dev/null and b/e2e-tests/pages/__pycache__/home_page.cpython-313.pyc differ diff --git a/e2e-tests/tests/__pycache__/__init__.cpython-313.pyc b/e2e-tests/tests/__pycache__/__init__.cpython-313.pyc new file mode 100644 index 0000000..a85b8fb Binary files /dev/null and b/e2e-tests/tests/__pycache__/__init__.cpython-313.pyc differ diff --git a/e2e-tests/tests/__pycache__/conftest.cpython-313-pytest-8.3.3.pyc b/e2e-tests/tests/__pycache__/conftest.cpython-313-pytest-8.3.3.pyc new file mode 100644 index 0000000..9fb19e2 Binary files /dev/null and b/e2e-tests/tests/__pycache__/conftest.cpython-313-pytest-8.3.3.pyc differ diff --git a/e2e-tests/tests/__pycache__/conftest.cpython-313.pyc b/e2e-tests/tests/__pycache__/conftest.cpython-313.pyc new file mode 100644 index 0000000..a130af8 Binary files /dev/null and b/e2e-tests/tests/__pycache__/conftest.cpython-313.pyc differ diff --git a/e2e-tests/tests/__pycache__/test_contact_form.cpython-313-pytest-8.3.3.pyc b/e2e-tests/tests/__pycache__/test_contact_form.cpython-313-pytest-8.3.3.pyc new file mode 100644 index 0000000..f8823d0 Binary files /dev/null and b/e2e-tests/tests/__pycache__/test_contact_form.cpython-313-pytest-8.3.3.pyc differ diff --git a/e2e-tests/tests/__pycache__/test_home_page.cpython-313-pytest-8.3.3.pyc b/e2e-tests/tests/__pycache__/test_home_page.cpython-313-pytest-8.3.3.pyc new file mode 100644 index 0000000..ce62f32 Binary files /dev/null and b/e2e-tests/tests/__pycache__/test_home_page.cpython-313-pytest-8.3.3.pyc differ diff --git a/e2e-tests/tests/__pycache__/test_navigation.cpython-313-pytest-8.3.3.pyc b/e2e-tests/tests/__pycache__/test_navigation.cpython-313-pytest-8.3.3.pyc new file mode 100644 index 0000000..2f41ec6 Binary files /dev/null and b/e2e-tests/tests/__pycache__/test_navigation.cpython-313-pytest-8.3.3.pyc differ diff --git a/e2e-tests/tests/__pycache__/test_performance.cpython-313-pytest-8.3.3.pyc b/e2e-tests/tests/__pycache__/test_performance.cpython-313-pytest-8.3.3.pyc new file mode 100644 index 0000000..d5d2786 Binary files /dev/null and b/e2e-tests/tests/__pycache__/test_performance.cpython-313-pytest-8.3.3.pyc differ diff --git a/e2e-tests/tests/__pycache__/test_responsive.cpython-313-pytest-8.3.3.pyc b/e2e-tests/tests/__pycache__/test_responsive.cpython-313-pytest-8.3.3.pyc new file mode 100644 index 0000000..dd13960 Binary files /dev/null and b/e2e-tests/tests/__pycache__/test_responsive.cpython-313-pytest-8.3.3.pyc differ diff --git a/e2e-tests/utils/__pycache__/__init__.cpython-313.pyc b/e2e-tests/utils/__pycache__/__init__.cpython-313.pyc new file mode 100644 index 0000000..9addb92 Binary files /dev/null and b/e2e-tests/utils/__pycache__/__init__.cpython-313.pyc differ diff --git a/e2e-tests/utils/__pycache__/data_generator.cpython-313.pyc b/e2e-tests/utils/__pycache__/data_generator.cpython-313.pyc new file mode 100644 index 0000000..493faa5 Binary files /dev/null and b/e2e-tests/utils/__pycache__/data_generator.cpython-313.pyc differ diff --git a/e2e-tests/utils/__pycache__/helpers.cpython-313.pyc b/e2e-tests/utils/__pycache__/helpers.cpython-313.pyc new file mode 100644 index 0000000..6e9af39 Binary files /dev/null and b/e2e-tests/utils/__pycache__/helpers.cpython-313.pyc differ diff --git a/e2e-tests/utils/__pycache__/logger.cpython-313.pyc b/e2e-tests/utils/__pycache__/logger.cpython-313.pyc new file mode 100644 index 0000000..6021124 Binary files /dev/null and b/e2e-tests/utils/__pycache__/logger.cpython-313.pyc differ diff --git a/e2e-tests/utils/__pycache__/report_generator.cpython-313.pyc b/e2e-tests/utils/__pycache__/report_generator.cpython-313.pyc new file mode 100644 index 0000000..d5776d6 Binary files /dev/null and b/e2e-tests/utils/__pycache__/report_generator.cpython-313.pyc differ diff --git a/src/lib/colors.ts b/src/lib/colors.ts new file mode 100644 index 0000000..82f9d8e --- /dev/null +++ b/src/lib/colors.ts @@ -0,0 +1,69 @@ +export const brandColors = { + primary: { + 600: '#C41E3A', + 700: '#A01830', + 500: '#D4244A', + 400: '#E04A68', + 100: '#FEF2F4', + }, + neutral: { + 900: '#171717', + 800: '#262626', + 700: '#404040', + 600: '#525252', + 500: '#737373', + 400: '#A3A3A3', + 300: '#D4D4D4', + 200: '#E5E5E5', + 100: '#F5F5F5', + 50: '#FAFAFA', + 0: '#FFFFFF', + }, + success: { + 600: '#16A34A', + 100: '#F0FDF4', + }, + warning: { + 600: '#D97706', + 100: '#FFFBEB', + }, + info: { + 600: '#0284C7', + 100: '#F0F9FF', + }, + error: { + 600: '#DC2626', + 100: '#FEF2F2', + }, +} as const; + +export const colorValues = { + primary: '#C41E3A', + primaryHover: '#A01830', + primaryLight: '#D4244A', + primaryBg: '#FEF2F4', + + textPrimary: '#171717', + textSecondary: '#525252', + textTertiary: '#737373', + textMuted: '#A3A3A3', + + bgPrimary: '#FFFFFF', + bgSecondary: '#FAFAFA', + bgTertiary: '#F5F5F5', + + border: '#E5E5E5', + borderHover: '#D4D4D4', + + success: '#16A34A', + successBg: '#F0FDF4', + warning: '#D97706', + warningBg: '#FFFBEB', + info: '#0284C7', + infoBg: '#F0F9FF', + error: '#DC2626', + errorBg: '#FEF2F2', +} as const; + +export type BrandColor = typeof brandColors; +export type ColorValue = typeof colorValues; diff --git a/src/lib/constants.ts b/src/lib/constants.ts new file mode 100644 index 0000000..beca0f8 --- /dev/null +++ b/src/lib/constants.ts @@ -0,0 +1,323 @@ +// Company Information +export const COMPANY_INFO = { + name: '四川睿新致远科技有限公司', + shortName: '睿新致远', + slogan: '专注科技创新，驱动智慧未来', + description: '专注于信息技术服务与解决方案，为企业提供全方位的数字化转型支持', + founded: '2026', + location: '四川省成都市', + email: 'contact@novalon.cn', + phone: '028-88888888', + address: '中国四川省成都市龙泉驿区幸福路12号', +} as const; + +// Navigation Items - 单页面锚点导航 +export const NAVIGATION = [ + { id: 'home', label: '首页', href: '#home' }, + { id: 'about', label: '关于我们', href: '#about' }, + { id: 'services', label: '核心业务', href: '#services' }, + { id: 'products', label: '产品服务', href: '#products' }, + { id: 'news', label: '新闻动态', href: '#news' }, + { id: 'contact', label: '联系我们', href: '#contact' }, +] as const; + +// Stats Data +export const STATS = [ + { value: '50+', label: '企业客户' }, + { value: '100+', label: '成功案例' }, + { value: '200+', label: '项目交付' }, + { value: '8+', label: '年行业经验' }, +] as const; + +// Services Data +export const SERVICES = [ + { + id: 'software', + title: '软件开发', + description: '提供定制化软件开发服务，包括Web应用、移动应用、企业管理系统等', + icon: 'Code', + }, + { + id: 'cloud', + title: '云服务', + description: '提供云计算解决方案，包括云架构设计、云迁移、云运维等服务', + icon: 'Cloud', + }, + { + id: 'data', + title: '数据分析', + description: '提供大数据分析服务，帮助企业挖掘数据价值，支持决策制定', + icon: 'BarChart3', + }, + { + id: 'security', + title: '信息安全', + description: '提供信息安全咨询和解决方案，保护企业数据资产安全', + icon: 'Shield', + }, +] as const; + +// Products Data +export const PRODUCTS = [ + { + id: 'erp', + title: '睿新ERP管理系统', + description: '集成财务、采购、销售、库存、生产等模块的企业资源计划系统，帮助企业实现业务流程标准化、数据一体化管理。', + image: '/images/products/erp.jpg', + category: '企业软件', + features: ['财务管理', '采购管理', '销售管理', '库存管理', '生产管理', '报表分析'], + benefits: ['提升运营效率30%', '降低库存成本20%', '实现数据实时共享'], + }, + { + id: 'crm', + title: '睿新客户关系管理系统', + description: '全渠道客户管理平台，整合客户信息、跟进销售机会、提升客户满意度和忠诚度，助力企业业绩增长。', + image: '/images/products/crm.jpg', + category: '企业软件', + features: ['客户档案', '销售漏斗', '商机管理', '合同管理', '售后服务', '数据分析'], + benefits: ['销售转化率提升25%', '客户满意度提升40%', '销售周期缩短30%'], + }, + { + id: 'oa', + title: '睿新协同办公平台', + description: '一站式企业协同办公解决方案，提供流程审批、文档管理、日程安排、即时通讯等功能，提升团队协作效率。', + image: '/images/products/oa.jpg', + category: '企业软件', + features: ['流程审批', '文档管理', '日程管理', '即时通讯', '任务协作', '移动办公'], + benefits: ['审批效率提升50%', '纸质文档减少80%', '跨部门协作更顺畅'], + }, + { + id: 'bi', + title: '睿新商业智能平台', + description: '数据可视化分析平台，整合多源数据，提供丰富的图表和报表，助力企业数据驱动决策，发现业务增长机会。', + image: '/images/products/bi.jpg', + category: '数据产品', + features: ['数据整合', '可视化报表', '自助分析', '实时监控', '智能预警', '移动看板'], + benefits: ['决策效率提升60%', '数据准备时间减少70%', '发现隐藏业务洞察'], + }, + { + id: 'iot', + title: '睿新物联网平台', + description: '设备接入、数据采集、远程监控的一站式物联网解决方案，支持海量设备连接，助力企业实现智能制造。', + image: '/images/products/iot.jpg', + category: '物联网', + features: ['设备接入', '数据采集', '远程监控', '规则引擎', '设备管理', '数据分析'], + benefits: ['设备利用率提升35%', '故障响应时间缩短60%', '运维成本降低40%'], + }, + { + id: 'ai', + title: '睿新AI智能应用套件', + description: '基于人工智能技术的智能应用集合，包括智能客服、图像识别、智能推荐等功能，为企业注入AI动力。', + image: '/images/products/ai.jpg', + category: '人工智能', + features: ['智能客服', '图像识别', '语音识别', '智能推荐', '文本分析', '预测分析'], + benefits: ['客服成本降低50%', '识别准确率达98%', '用户体验显著提升'], + }, +] as const; + +// News Data +export const NEWS = [ + { + id: '1', + title: '四川睿新致远科技有限公司正式成立', + excerpt: '2026年1月15日，四川睿新致远科技有限公司在成都龙泉驿区正式成立，标志着公司在科技创新领域迈出了坚实的第一步。', + date: '2026-01-15', + category: '公司新闻', + image: '/images/news/founding.jpg', + content: `2026年1月15日，四川睿新致远科技有限公司在成都龙泉驿区幸福路12号正式成立。公司注册资本雄厚，拥有一支经验丰富的技术团队。 + +公司专注于信息技术服务与解决方案，致力于为企业提供全方位的数字化转型支持。成立之初，公司就确立了"专注科技创新，驱动智慧未来"的企业使命。 + +公司创始人表示："我们将以客户需求为导向，以技术创新为驱动，为企业提供高质量的数字化解决方案，助力企业在数字经济时代实现转型升级。" + +公司目前已与多家知名企业建立了合作关系，业务范围涵盖软件开发、云服务、数据分析、信息安全等多个领域。`, + }, + { + id: '2', + title: '公司推出企业数字化转型解决方案', + excerpt: '针对中小企业数字化转型需求，公司推出一站式数字化转型解决方案，帮助企业快速实现数字化升级。', + date: '2026-01-20', + category: '产品发布', + image: '/images/news/solution.jpg', + content: `近日，四川睿新致远科技有限公司正式推出企业数字化转型解决方案，该方案整合了云计算、大数据、人工智能等前沿技术，为中小企业提供一站式的数字化升级服务。 + +该解决方案包括： +1. 数字化诊断：全面评估企业数字化现状，识别转型痛点 +2. 方案设计：根据企业实际情况，量身定制数字化转型方案 +3. 系统实施：专业团队负责系统部署和数据迁移 +4. 运维支持：提供7×24小时技术支持服务 + +公司技术总监表示："我们的目标是让每一家企业都能享受到数字化带来的便利，无论企业规模大小，都能找到适合自己的数字化转型路径。" + +目前，该解决方案已在多个行业成功落地，获得了客户的一致好评。`, + }, + { + id: '3', + title: '与本地制造企业达成战略合作协议', + excerpt: '公司与成都某知名制造企业签署战略合作协议，双方将共同打造智能制造示范工厂。', + date: '2026-01-25', + category: '合作动态', + image: '/images/news/partnership.jpg', + content: `1月25日，四川睿新致远科技有限公司与成都某知名制造企业正式签署战略合作协议。根据协议，双方将在智能制造、工业互联网、数字化转型等领域展开深度合作。 + +此次合作的主要内容包括： +- 建设智能制造示范工厂 +- 开发工业互联网平台 +- 实施生产数字化管理系统 +- 开展技术人才培训 + +该制造企业负责人表示："选择睿新致远作为合作伙伴，是看中了他们在数字化转型领域的专业能力和丰富经验。我们相信，通过双方的紧密合作，一定能够打造出行业领先的智能制造标杆。" + +公司项目团队已进驻现场，开始前期调研和方案设计工作。`, + }, + { + id: '4', + title: '公司加入四川省软件行业协会', + excerpt: '公司正式加入四川省软件行业协会，将积极参与行业交流与合作，推动本地软件产业发展。', + date: '2026-02-01', + category: '公司新闻', + image: '/images/news/membership.jpg', + content: `2月1日，四川睿新致远科技有限公司正式加入四川省软件行业协会，成为协会成员单位。这标志着公司在软件行业的专业地位得到了行业认可。 + +四川省软件行业协会是省内软件行业最具权威性的行业组织，拥有会员单位数百家。加入协会后，公司将享有以下权益： +- 参与行业标准制定 +- 获取政策信息和行业动态 +- 参加行业培训和交流活动 +- 享受会员专属服务 + +公司表示，将积极参与协会组织的各项活动，与行业同仁加强交流合作，共同推动四川省软件产业高质量发展。同时，公司也将严格遵守行业规范，坚持诚信经营，为客户提供优质的产品和服务。`, + }, + { + id: '5', + title: '2026年企业数字化转型趋势报告发布', + excerpt: '公司发布《2026年企业数字化转型趋势报告》，深入分析行业发展趋势，为企业提供转型参考。', + date: '2026-02-02', + category: '行业资讯', + image: '/images/news/report.jpg', + content: `四川睿新致远科技有限公司今日发布《2026年企业数字化转型趋势报告》，该报告基于对数百家企业的调研分析，深入剖析了当前企业数字化转型的现状、挑战与机遇。 + +报告主要发现： + +1. 数字化转型已成为企业共识 +调研显示，超过85%的企业已将数字化转型列为战略优先级，较2025年提升15个百分点。 + +2. 中小企业转型需求迫切 +中小企业数字化转型意愿强烈，但面临资金、技术、人才等多重挑战，需要专业服务商提供支持。 + +3. 云原生技术成为主流 +容器化、微服务、DevOps等云原生技术正在被越来越多的企业采用，成为数字化转型的技术底座。 + +4. 数据驱动决策成为标配 +企业越来越重视数据资产的价值，数据分析与商业智能应用普及率持续提升。 + +报告还针对不同类型的企业提出了差异化的转型建议，为企业的数字化转型提供了有价值的参考。`, + }, + { + id: '6', + title: '公司官网全新上线', + excerpt: '经过精心筹备，公司官方网站正式上线，为客户提供更加便捷的信息获取渠道。', + date: '2026-02-02', + category: '公司新闻', + image: '/images/news/website.jpg', + content: `经过数周的精心筹备，四川睿新致远科技有限公司官方网站今日正式上线运行。新网站采用现代化的设计风格，功能完善，内容丰富，为客户和合作伙伴提供了更加便捷的信息获取渠道。 + +网站主要功能模块： +- 公司介绍：全面了解公司发展历程、企业文化和核心价值观 +- 核心业务：详细介绍公司的服务范围和技术能力 +- 产品服务：展示自主研发的各类产品和解决方案 +- 新闻动态：及时发布公司最新动态和行业资讯 +- 联系我们：提供多种联系方式，方便客户咨询合作 + +公司表示，将持续优化网站功能和内容，将其打造为展示公司形象、服务客户需求的重要窗口。欢迎广大客户和合作伙伴访问浏览，提出宝贵意见。`, + }, +] as const; + +// Solutions Data +export const SOLUTIONS = [ + { + id: 'fintech', + title: '金融科技', + description: '为金融机构提供数字化转型解决方案，包括智能风控、数字营销、客户管理等', + icon: 'Landmark', + features: ['智能风控系统', '数字营销平台', '客户关系管理', '数据分析平台'], + color: '#C41E3A', + }, + { + id: 'enterprise', + title: '企业数字化', + description: '助力企业实现数字化转型，提供ERP、CRM、OA等企业管理解决方案', + icon: 'Building2', + features: ['ERP管理系统', 'CRM客户管理', 'OA协同办公', 'BI数据分析'], + color: '#1A1A1A', + }, + { + id: 'smart-manufacturing', + title: '智能制造', + description: '推动制造业智能化升级，提供工业互联网、物联网解决方案', + icon: 'Factory', + features: ['工业互联网平台', '设备物联系统', '生产执行系统', '质量追溯系统'], + color: '#D4A574', + }, + { + id: 'data-intelligence', + title: '数据智能', + description: '挖掘数据价值，提供大数据分析、人工智能应用解决方案', + icon: 'Brain', + features: ['大数据平台', 'AI智能应用', '数据可视化', '智能决策支持'], + color: '#8B4513', + }, +] as const; + +// Cases Data +export const CASES = [ + { + id: 'case-1', + title: '某银行数字化转型项目', + client: '某国有银行', + industry: '金融科技', + description: '为某国有银行提供全面的数字化转型解决方案，包括核心系统升级、数据中台建设、智能风控系统部署等，助力银行实现业务流程自动化和智能化。', + results: [ + { label: '业务处理效率', value: '提升60%' }, + { label: '客户满意度', value: '提升45%' }, + { label: '运营成本', value: '降低30%' }, + ], + tags: ['金融科技', '数字化转型', '数据中台'], + image: '/images/cases/bank.jpg', + }, + { + id: 'case-2', + title: '智能制造示范工厂项目', + client: '某大型制造企业', + industry: '智能制造', + description: '为制造企业打造智能制造示范工厂，实现生产设备互联、生产过程可视化、质量追溯全覆盖，提升生产效率和产品质量。', + results: [ + { label: '生产效率', value: '提升40%' }, + { label: '设备利用率', value: '提升35%' }, + { label: '不良品率', value: '降低50%' }, + ], + tags: ['智能制造', '工业互联网', 'IoT'], + image: '/images/cases/manufacturing.jpg', + }, + { + id: 'case-3', + title: '企业数据中台建设项目', + client: '某零售集团', + industry: '企业数字化', + description: '为零售集团建设企业级数据中台，整合多渠道数据资源，实现数据资产统一管理，支撑精准营销和智能决策。', + results: [ + { label: '数据整合效率', value: '提升80%' }, + { label: '决策响应时间', value: '缩短70%' }, + { label: '营销转化率', value: '提升25%' }, + ], + tags: ['数据中台', '大数据', '商业智能'], + image: '/images/cases/retail.jpg', + }, +] as const; + +// Social Links +export const SOCIAL_LINKS = [ + { name: '微信', href: '#', icon: 'MessageCircle' }, + { name: '微博', href: '#', icon: 'Share2' }, + { name: 'LinkedIn', href: '#', icon: 'Linkedin' }, + { name: 'GitHub', href: '#', icon: 'Github' }, +] as const; diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..bd0c391 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +}