# 移除联系电话和更新 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**

移除以下代码：
```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**

移除以下代码：
```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**

移除以下代码：
```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
<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`