# 移除联系电话和更新 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 执行任务，批量执行并设有检查点

**选哪种方式？**