张翔
fe6e4b1c54
- Remove TestimonialSection from homepage (no customers yet) - Footer: dark theme, NAVIGATION_V2 + MEGA_DROPDOWN_DATA links - Mobile Menu: NAVIGATION_V2 with collapsible dropdown support
260 lines
6.4 KiB
Markdown
260 lines
6.4 KiB
Markdown
# 移除联系电话和更新 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`
|