张翔
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
429 lines
12 KiB
Markdown
429 lines
12 KiB
Markdown
# 移除联系电话和更新 Logo 字体 实现计划
|
||
|
||
> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。
|
||
|
||
**目标：** 移除网站中"电话咨询"按钮，并更新 Logo SVG 使用青柳隶书字体
|
||
|
||
**架构：** 移除 3 个组件中的"电话咨询"按钮及相关 import，使用青柳隶书字体重新生成 Logo SVG path
|
||
|
||
**技术栈：** React, TypeScript, Next.js, SVG
|
||
|
||
---
|
||
|
||
## 文件结构
|
||
|
||
| 文件 | 操作 | 职责 |
|
||
|------|------|------|
|
||
| `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 |
|
||
| `public/logo.svg` | 替换 | 使用青柳隶书字体重新生成 SVG path |
|
||
| `public/logo-white.svg` | 替换 | 使用青柳隶书字体重新生成 SVG path |
|
||
|
||
---
|
||
|
||
## 任务 1：移除 service-cta-section.tsx 中的"电话咨询"按钮
|
||
|
||
**文件：**
|
||
- 修改：`src/components/services/service-cta-section.tsx`
|
||
|
||
- [ ] **步骤 1：读取文件内容**
|
||
|
||
运行：读取 `src/components/services/service-cta-section.tsx`
|
||
|
||
- [ ] **步骤 2：移除 Phone 图标 import**
|
||
|
||
修改文件，将：
|
||
```tsx
|
||
import { Phone } from 'lucide-react';
|
||
```
|
||
改为：
|
||
```tsx
|
||
```
|
||
（删除整行）
|
||
|
||
- [ ] **步骤 3：移除"电话咨询"按钮**
|
||
|
||
修改文件，删除以下代码块：
|
||
```tsx
|
||
<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>
|
||
```
|
||
|
||
- [ ] **步骤 4：验证修改**
|
||
|
||
运行：`pnpm build`
|
||
预期：构建成功，无错误
|
||
|
||
- [ ] **步骤 5：Commit**
|
||
|
||
```bash
|
||
git add src/components/services/service-cta-section.tsx
|
||
git commit -m "refactor(services): 移除电话咨询按钮
|
||
|
||
- 移除 service-cta-section 中的电话咨询按钮
|
||
- 移除 Phone 图标 import
|
||
- 公司暂无对外联系电话"
|
||
```
|
||
|
||
---
|
||
|
||
## 任务 2：移除 product-cta-section.tsx 中的"电话咨询"按钮
|
||
|
||
**文件：**
|
||
- 修改：`src/components/products/product-cta-section.tsx`
|
||
|
||
- [ ] **步骤 1：读取文件内容**
|
||
|
||
运行：读取 `src/components/products/product-cta-section.tsx`
|
||
|
||
- [ ] **步骤 2：移除 Phone 图标 import**
|
||
|
||
修改文件，将：
|
||
```tsx
|
||
import { Phone } from 'lucide-react';
|
||
```
|
||
改为：
|
||
```tsx
|
||
```
|
||
（删除整行）
|
||
|
||
- [ ] **步骤 3：移除"电话咨询"按钮**
|
||
|
||
修改文件，删除以下代码块：
|
||
```tsx
|
||
<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>
|
||
```
|
||
|
||
- [ ] **步骤 4：验证修改**
|
||
|
||
运行：`pnpm build`
|
||
预期：构建成功，无错误
|
||
|
||
- [ ] **步骤 5：Commit**
|
||
|
||
```bash
|
||
git add src/components/products/product-cta-section.tsx
|
||
git commit -m "refactor(products): 移除电话咨询按钮
|
||
|
||
- 移除 product-cta-section 中的电话咨询按钮
|
||
- 移除 Phone 图标 import
|
||
- 公司暂无对外联系电话"
|
||
```
|
||
|
||
---
|
||
|
||
## 任务 3：移除 solution-detail-client.tsx 中的"电话咨询"按钮
|
||
|
||
**文件：**
|
||
- 修改：`src/app/(marketing)/solutions/[id]/solution-detail-client.tsx`
|
||
|
||
- [ ] **步骤 1：读取文件内容**
|
||
|
||
运行：读取 `src/app/(marketing)/solutions/[id]/solution-detail-client.tsx`
|
||
|
||
- [ ] **步骤 2：查找并移除"电话咨询"按钮**
|
||
|
||
找到包含"电话咨询"的按钮代码并删除：
|
||
```tsx
|
||
<Button variant="outline" asChild>
|
||
<a href="tel:+8613800138000">
|
||
<Phone className="w-4 h-4 mr-2" />
|
||
电话咨询
|
||
</a>
|
||
</Button>
|
||
```
|
||
|
||
- [ ] **步骤 3：检查并移除 Phone 图标 import（如果不再使用）**
|
||
|
||
检查文件中是否还有其他地方使用 Phone 图标。如果没有，删除：
|
||
```tsx
|
||
import { Phone } from 'lucide-react';
|
||
```
|
||
|
||
- [ ] **步骤 4：验证修改**
|
||
|
||
运行：`pnpm build`
|
||
预期：构建成功，无错误
|
||
|
||
- [ ] **步骤 5：Commit**
|
||
|
||
```bash
|
||
git add src/app/\(marketing\)/solutions/\[id\]/solution-detail-client.tsx
|
||
git commit -m "refactor(solutions): 移除电话咨询按钮
|
||
|
||
- 移除 solution-detail-client 中的电话咨询按钮
|
||
- 移除 Phone 图标 import（如果不再使用）
|
||
- 公司暂无对外联系电话"
|
||
```
|
||
|
||
---
|
||
|
||
## 任务 4：使用青柳隶书字体重新生成 Logo SVG
|
||
|
||
**文件：**
|
||
- 替换：`public/logo.svg`
|
||
- 替换：`public/logo-white.svg`
|
||
|
||
- [ ] **步骤 1：检查青柳隶书字体文件**
|
||
|
||
运行：检查 `src/app/fonts/AoyagiReisho.ttf` 是否存在
|
||
|
||
- [ ] **步骤 2：使用 Python 脚本生成新的 Logo SVG**
|
||
|
||
创建并运行 Python 脚本，使用青柳隶书字体生成"睿新致遠"的 SVG path：
|
||
|
||
```python
|
||
#!/usr/bin/env python3
|
||
"""
|
||
使用青柳隶书字体生成 Logo SVG path
|
||
"""
|
||
import os
|
||
from fontTools.ttLib import TTFont
|
||
from fontTools.pens.svgPathPen import SvgPathPen
|
||
from fontTools.pens.t2CharStringPen import T2CharStringPen
|
||
|
||
def get_glyph_path(font_path, text, size=48):
|
||
"""
|
||
获取文本的 SVG path
|
||
"""
|
||
font = TTFont(font_path)
|
||
glyf_table = font['glyf']
|
||
|
||
paths = []
|
||
x_offset = 0
|
||
|
||
for char in text:
|
||
glyph_name = font.getBestCmap().get(ord(char))
|
||
if glyph_name:
|
||
glyph = glyf_table[glyph_name]
|
||
if glyph.numberOfContours > 0:
|
||
pen = SvgPathPen(None)
|
||
glyph.draw(pen, glyf_table)
|
||
path = pen.getCommands()
|
||
paths.append(f'<g transform="translate({x_offset}, 0) scale({size/1000})"><path d="{path}" /></g>')
|
||
x_offset += size * 1.2
|
||
|
||
return '\n'.join(paths)
|
||
|
||
def generate_logo_svg():
|
||
"""
|
||
生成 Logo SVG
|
||
"""
|
||
font_path = 'src/app/fonts/AoyagiReisho.ttf'
|
||
text = '睿新致遠'
|
||
|
||
if not os.path.exists(font_path):
|
||
print(f"错误：字体文件不存在：{font_path}")
|
||
return
|
||
|
||
# 生成 SVG path
|
||
paths = get_glyph_path(font_path, text)
|
||
|
||
# 创建 SVG
|
||
svg_template = f'''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120">
|
||
<defs>
|
||
<!-- 印章纹理滤镜 -->
|
||
<filter id="sealTexture" x="0%" y="0%" width="100%" height="100%">
|
||
<feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="3" result="noise"/>
|
||
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" xChannelSelector="R" yChannelSelector="G"/>
|
||
</filter>
|
||
</defs>
|
||
|
||
<!-- 红色印章 - 手绘不规则风格 -->
|
||
<g transform="translate(12, 12)">
|
||
<!-- 印章外框 - 不规则手绘路径 -->
|
||
<path d="M8,2
|
||
C25,-2 45,-2 72,3
|
||
C82,5 85,12 84,25
|
||
C83,40 85,55 84,70
|
||
C83,82 78,88 65,89
|
||
C45,91 25,90 10,88
|
||
C2,86 -2,78 1,65
|
||
C3,50 2,35 1,20
|
||
C0,10 3,4 8,2 Z"
|
||
fill="#C41E3A"/>
|
||
<!-- 印章内框 - 手绘风格 -->
|
||
<path d="M14,10
|
||
C28,8 55,8 72,12
|
||
C78,14 79,20 78,30
|
||
C77,45 78,60 77,72
|
||
C76,80 72,84 62,85
|
||
C45,86 28,85 16,83
|
||
C10,82 8,76 9,65
|
||
C10,50 9,35 8,22
|
||
C7,15 10,11 14,10 Z"
|
||
fill="none" stroke="#fff" stroke-width="1.5" opacity="0.5"/>
|
||
<!-- 睿新致遠 - 青柳隶书字体路径 -->
|
||
{paths}
|
||
</g>
|
||
|
||
<!-- 公司名称 -->
|
||
<g transform="translate(110, 60)">
|
||
<!-- 睿新致遠 - 青柳隶书字体路径 -->
|
||
{paths}
|
||
<!-- NOVALON - 英文字体 -->
|
||
<text x="24" y="42" font-family="Arial, sans-serif" font-size="14.5" font-weight="500" fill="currentColor" letter-spacing="10.5">NOVALON</text>
|
||
</g>
|
||
</svg>'''
|
||
|
||
return svg_template
|
||
|
||
if __name__ == '__main__':
|
||
svg_content = generate_logo_svg()
|
||
if svg_content:
|
||
with open('public/logo.svg', 'w', encoding='utf-8') as f:
|
||
f.write(svg_content)
|
||
print("Logo SVG 已生成：public/logo.svg")
|
||
```
|
||
|
||
运行脚本：
|
||
```bash
|
||
python3 scripts/generate-logo-svg.py
|
||
```
|
||
|
||
- [ ] **步骤 3：生成白色版本 Logo**
|
||
|
||
复制生成的 Logo SVG 并修改颜色：
|
||
```bash
|
||
cp public/logo.svg public/logo-white.svg
|
||
```
|
||
|
||
修改 `public/logo-white.svg`，将 `fill="#C41E3A"` 改为 `fill="white"`
|
||
|
||
- [ ] **步骤 4：验证 Logo 显示**
|
||
|
||
运行：`pnpm dev`
|
||
访问：http://localhost:3000
|
||
预期：Logo 正确显示，使用青柳隶书字体
|
||
|
||
- [ ] **步骤 5：Commit**
|
||
|
||
```bash
|
||
git add public/logo.svg public/logo-white.svg
|
||
git commit -m "style(logo): 使用青柳隶书字体更新 Logo
|
||
|
||
- 使用青柳隶书字体重新生成 Logo SVG path
|
||
- 更新 logo.svg 和 logo-white.svg
|
||
- 确保品牌字体一致性"
|
||
```
|
||
|
||
---
|
||
|
||
## 任务 5：运行完整测试并验证
|
||
|
||
**文件：**
|
||
- 无文件修改
|
||
|
||
- [ ] **步骤 1：运行构建**
|
||
|
||
运行：`pnpm build`
|
||
预期：构建成功，无错误
|
||
|
||
- [ ] **步骤 2：运行 E2E 测试**
|
||
|
||
运行：`pnpm test`
|
||
预期：所有测试通过
|
||
|
||
- [ ] **步骤 3：手动验证关键页面**
|
||
|
||
访问以下页面验证：
|
||
- 首页：http://localhost:3000
|
||
- 服务页面：http://localhost:3000/services
|
||
- 产品页面：http://localhost:3000/products
|
||
- 解决方案详情页：http://localhost:3000/solutions/[id]
|
||
- 联系页面：http://localhost:3000/contact
|
||
|
||
验证内容：
|
||
- ✅ Logo 显示正确
|
||
- ✅ 无"电话咨询"按钮
|
||
- ✅ 联系表单电话字段正常显示
|
||
|
||
- [ ] **步骤 4：最终 Commit（如有遗漏）**
|
||
|
||
如果有遗漏的修改，在此步骤提交。
|
||
|
||
---
|
||
|
||
## 任务 6：部署到生产环境
|
||
|
||
**文件：**
|
||
- 无文件修改
|
||
|
||
- [ ] **步骤 1：推送代码到远程**
|
||
|
||
运行：`git push origin main`
|
||
预期：推送成功
|
||
|
||
- [ ] **步骤 2：构建生产版本**
|
||
|
||
运行：`pnpm build`
|
||
预期：构建成功
|
||
|
||
- [ ] **步骤 3：部署到生产服务器**
|
||
|
||
运行：`./deploy-dist.sh`
|
||
预期：部署成功
|
||
|
||
- [ ] **步骤 4：验证生产环境**
|
||
|
||
访问：https://novalon.cn
|
||
验证内容：
|
||
- ✅ Logo 显示正确
|
||
- ✅ 无"电话咨询"按钮
|
||
- ✅ 联系表单电话字段正常显示
|
||
|
||
---
|
||
|
||
## 自检清单
|
||
|
||
### 1. 规格覆盖度
|
||
|
||
| 规格需求 | 对应任务 |
|
||
|---------|---------|
|
||
| 移除 service-cta-section.tsx 中的"电话咨询"按钮 | 任务 1 |
|
||
| 移除 product-cta-section.tsx 中的"电话咨询"按钮 | 任务 2 |
|
||
| 移除 solution-detail-client.tsx 中的"电话咨询"按钮 | 任务 3 |
|
||
| 更新 Logo SVG 使用青柳隶书字体 | 任务 4 |
|
||
| 保留联系表单电话字段 | 无需修改（已确认） |
|
||
| 测试验证 | 任务 5 |
|
||
| 部署生产 | 任务 6 |
|
||
|
||
### 2. 占位符扫描
|
||
|
||
- ✅ 无"待定"、"TODO"、"后续实现"等占位符
|
||
- ✅ 所有代码步骤包含完整代码
|
||
- ✅ 所有命令步骤包含完整命令
|
||
- ✅ 无"类似任务 N"的引用
|
||
|
||
### 3. 类型一致性
|
||
|
||
- ✅ 所有文件路径使用精确路径
|
||
- ✅ 所有组件名称一致
|
||
- ✅ 所有 import 语句正确
|
||
|
||
---
|
||
|
||
## 执行选项
|
||
|
||
**计划已完成并保存到 `docs/superpowers/plans/2026-04-25-remove-phone-and-update-logo-font.md`。两种执行方式：**
|
||
|
||
**1. 子代理驱动（推荐）** - 每个任务调度一个新的子代理，任务间进行审查，快速迭代
|
||
|
||
**2. 内联执行** - 在当前会话中使用 executing-plans 执行任务，批量执行并设有检查点
|
||
|
||
**选哪种方式？**
|