novalon-website/docs/superpowers/specs/2026-04-25-remove-phone-and-update-logo-font.md

移除联系电话和更新 Logo 字体设计文档

日期: 2026-04-25 作者: 张翔 状态: 待审查

概述

本文档描述了两个独立的优化需求：

1. 移除网站中"电话咨询"相关的显示内容
2. 更新 Logo SVG 使用青柳隶书字体

需求背景

需求 1: 移除联系电话

原因: 公司目前没有对外联系电话，需要移除所有"电话咨询"相关的显示内容。

范围:

• 移除页面上的"电话咨询"按钮
• 保留联系表单中的电话输入字段（用户需要填写自己的电话）

需求 2: 更新 Logo 字体

原因: Logo 和 Hero 等使用"睿新致遠"繁体字的部分需要使用青柳隶书字体，确保品牌一致性。

范围:

• 更新 Logo SVG 文件
• Hero 标题已正确使用青柳隶书字体（无需修改）

技术方案

方案 1: 移除联系电话

修改文件清单

文件路径	修改类型	说明
src/components/services/service-cta-section.tsx	删除代码	移除"电话咨询"按钮和 Phone 图标 import
src/components/products/product-cta-section.tsx	删除代码	移除"电话咨询"按钮和 Phone 图标 import
src/app/(marketing)/solutions/[id]/solution-detail-client.tsx	删除代码	移除"电话咨询"按钮和 Phone 图标 import

详细修改说明

1. service-cta-section.tsx

移除以下代码：

// 移除 import
import { Phone } from 'lucide-react';

// 移除按钮
<RippleButton
  href="tel:+8613800138000"
  rippleColor="rgba(255, 255, 255, 0.2)"
  className="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center w-full sm:w-auto"
>
  <Phone className="w-4 h-4 mr-2" />
  电话咨询
</RippleButton>

2. product-cta-section.tsx

移除以下代码：

// 移除 import
import { Phone } from 'lucide-react';

// 移除按钮
<RippleButton
  href="tel:+8613800138000"
  rippleColor="rgba(255, 255, 255, 0.2)"
  className="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center w-full sm:w-auto"
>
  <Phone className="w-4 h-4 mr-2" />
  电话咨询
</RippleButton>

3. solution-detail-client.tsx

移除以下代码：

// 移除 import（如果不再使用）
import { Phone } from 'lucide-react';

// 移除按钮
<Button variant="outline" asChild>
  <a href="tel:+8613800138000">
    <Phone className="w-4 h-4 mr-2" />
    电话咨询
  </a>
</Button>

不修改的文件

• src/components/sections/contact-section.tsx - 保留电话输入字段，用户需要填写自己的电话

方案 2: 更新 Logo 字体

当前状态

• Logo SVG 使用手绘的 SVG path（书法字体路径）
• Hero 标题已使用青柳隶书字体（通过 font-brand CSS 类）

实现方案

方案 A: 重新生成 SVG path（推荐）

优势：

• 不依赖浏览器字体加载
• 在所有设备上显示一致
• 性能更好

步骤：

1. 使用青柳隶书字体文件生成"睿新致遠"的 SVG path
2. 替换 public/logo.svg 和 public/logo-white.svg 中的字体路径

修改文件清单

文件路径	修改类型	说明
public/logo.svg	替换内容	使用青柳隶书重新生成 SVG path
public/logo-white.svg	替换内容	使用青柳隶书重新生成 SVG path

技术细节

Logo SVG 结构：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120">
  <!-- 红色印章 -->
  <g transform="translate(12, 12)">
    <!-- 睿新致遠 - 青柳隶书字体路径 -->
    <path d="..." />
  </g>
  
  <!-- 公司名称 -->
  <g transform="translate(110, 60)">
    <!-- 睿新致遠 - 青柳隶书字体路径 -->
    <path d="..." />
    <!-- NOVALON - 英文字体 -->
    <text>NOVALON</text>
  </g>
</svg>

测试验证

功能测试

1. 页面渲染测试

   • 验证服务页面不再显示"电话咨询"按钮
   • 验证产品页面不再显示"电话咨询"按钮
   • 验证解决方案详情页不再显示"电话咨询"按钮

2. 表单测试

   • 验证联系表单电话字段正常显示
   • 验证表单提交功能正常

视觉测试

1. Logo 显示测试

   • 验证 Logo 在深色背景上显示正确
   • 验证 Logo 在浅色背景上显示正确
   • 验证青柳隶书字体渲染效果

2. 响应式测试

   • 验证 Logo 在不同屏幕尺寸下的显示效果

构建测试

1. 构建验证

   • 运行 pnpm build 确保无错误
   • 检查构建产物大小

2. E2E 测试

   • 运行 pnpm test 确保无回归
   • 更新相关测试用例（如有必要）

部署计划

部署步骤

1. 代码修改

   • 移除"电话咨询"按钮
   • 更新 Logo SVG 文件

2. 本地验证

   • 运行开发服务器验证修改
   • 运行构建验证无错误

3. 测试验证

   • 运行 E2E 测试
   • 手动验证关键页面

4. 提交代码

   • 提交修改到 Git
   • 推送到远程仓库

5. 部署生产

   • 构建生产版本
   • 部署到生产服务器
   • 验证生产环境

回滚计划

如果出现问题，可以快速回滚：

1. 恢复之前的 Git 提交
2. 重新构建和部署

风险评估

低风险

• 移除"电话咨询"按钮：影响范围明确，不涉及核心功能
• 更新 Logo SVG：纯静态资源替换，风险极低

缓解措施

• 保留联系表单电话字段，确保用户可以留下联系方式
• 完整测试后再部署生产环境

成功标准

1. ✅ 所有"电话咨询"按钮已移除
2. ✅ 联系表单电话字段正常工作
3. ✅ Logo 使用青柳隶书字体显示
4. ✅ 构建无错误
5. ✅ E2E 测试通过
6. ✅ 生产环境验证通过

时间估算

• 代码修改：15 分钟
• 本地验证：10 分钟
• 测试验证：15 分钟
• 部署生产：10 分钟
• 总计：约 50 分钟

附录

相关文件

• src/components/services/service-cta-section.tsx
• src/components/products/product-cta-section.tsx
• src/app/(marketing)/solutions/[id]/solution-detail-client.tsx
• src/components/sections/contact-section.tsx
• public/logo.svg
• public/logo-white.svg
• src/app/layout.tsx（字体配置）
• src/app/globals.css（font-brand 样式）

参考资料

• 青柳隶书字体文件：src/app/fonts/AoyagiReisho.ttf
• CSS 字体变量：--font-aoyagi-reisho
• CSS 类：.font-brand