refactor: P0 - remove testimonial, migrate footer & mobile menu to NAVIGATION_V2
- Remove TestimonialSection from homepage (no customers yet) - Footer: dark theme, NAVIGATION_V2 + MEGA_DROPDOWN_DATA links - Mobile Menu: NAVIGATION_V2 with collapsible dropdown support
This commit is contained in:
张翔
@@ -0,0 +1 @@
|
||||
{"reason":"idle timeout","timestamp":1777547630053}
|
||||
@@ -0,0 +1,116 @@
|
||||
<h2>Novalon × Atlassian：设计思路对比</h2>
|
||||
<p class="subtitle">分析两者在信息架构、视觉层次、交互模式上的核心差异，探索可借鉴的方向</p>
|
||||
|
||||
<div class="section">
|
||||
<h3>📐 信息架构对比</h3>
|
||||
<div class="split">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">当前 Novalon — 单页长滚动</div>
|
||||
<div class="mockup-body" style="padding: 12px;">
|
||||
<div class="mock-nav" style="margin-bottom:8px;">Logo | 服务 | 解决方案 | 产品 | 案例 | 关于 | 团队 | 新闻</div>
|
||||
<div class="placeholder" style="height:60px;margin-bottom:6px;background:#1C1C1C;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;">Hero 全屏（水墨粒子 + 数据流）</div>
|
||||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;font-size:10px;">核心业务 Section</div>
|
||||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-size:10px;">解决方案 Section</div>
|
||||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;font-size:10px;">产品 Section</div>
|
||||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-size:10px;">案例 Section</div>
|
||||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;font-size:10px;">关于 + 团队 Section</div>
|
||||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-size:10px;">新闻 Section</div>
|
||||
<div style="font-size:9px;color:#888;margin-top:6px;text-align:center;">8个Section 纵向堆叠，通过 URL hash 导航</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Atlassian — 多页面产品矩阵</div>
|
||||
<div class="mockup-body" style="padding: 12px;">
|
||||
<div class="mock-nav" style="margin-bottom:8px;">Logo | Products ▾ | Solutions ▾ | Resources ▾ | Pricing | Contact</div>
|
||||
<div class="placeholder" style="height:50px;margin-bottom:6px;background:linear-gradient(135deg,#0052CC,#2684FF);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;">Hero（产品主张 + 视频背景）</div>
|
||||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #DFE1E6;display:flex;align-items:center;justify-content:center;font-size:10px;">社会证明（300K+ 公司 / 80% Fortune 500）</div>
|
||||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#F4F5F7;display:flex;align-items:center;justify-content:center;font-size:10px;">产品矩阵卡片（Jira / Confluence / Loom / Rovo）</div>
|
||||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #DFE1E6;display:flex;align-items:center;justify-content:center;font-size:10px;">模板/场景入口（Scrum / Bug / DevOps）</div>
|
||||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#F4F5F7;display:flex;align-items:center;justify-content:center;font-size:10px;">客户证言轮播</div>
|
||||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #DFE1E6;display:flex;align-items:center;justify-content:center;font-size:10px;">CTA + Footer</div>
|
||||
<div style="font-size:9px;color:#888;margin-top:6px;text-align:center;">独立产品页 + 下拉导航 + 场景化入口</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>🎨 视觉设计语言对比</h3>
|
||||
<div class="split">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Novalon — 水墨科技风</div>
|
||||
<div class="mockup-body" style="padding: 16px;">
|
||||
<div style="display:flex;gap:8px;margin-bottom:12px;">
|
||||
<div style="width:40px;height:40px;background:#1C1C1C;border-radius:4px;" title="墨黑"></div>
|
||||
<div style="width:40px;height:40px;background:#C41E3A;border-radius:4px;" title="朱砂红"></div>
|
||||
<div style="width:40px;height:40px;background:#FFFBF5;border:1px solid #E5E5E5;border-radius:4px;" title="宣纸白"></div>
|
||||
<div style="width:40px;height:40px;background:#F5F5F5;border-radius:4px;" title="浅灰"></div>
|
||||
</div>
|
||||
<div style="font-size:12px;margin-bottom:4px;"><strong>字体：</strong>Geist Sans + 青柳隶书（品牌标题）</div>
|
||||
<div style="font-size:12px;margin-bottom:4px;"><strong>动效：</strong>水墨粒子 / 数据流 / 印章动画 / 视差</div>
|
||||
<div style="font-size:12px;margin-bottom:4px;"><strong>氛围：</strong>东方韵味 × 科技感</div>
|
||||
<div style="font-size:12px;"><strong>节奏：</strong>深→白→深→白 明暗交替</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Atlassian — 清晰现代风</div>
|
||||
<div class="mockup-body" style="padding: 16px;">
|
||||
<div style="display:flex;gap:8px;margin-bottom:12px;">
|
||||
<div style="width:40px;height:40px;background:#0052CC;border-radius:4px;" title="品牌蓝"></div>
|
||||
<div style="width:40px;height:40px;background:#00875A;border-radius:4px;" title="绿色"></div>
|
||||
<div style="width:40px;height:40px;background:#FF991F;border-radius:4px;" title="橙色"></div>
|
||||
<div style="width:40px;height:40px;background:#F4F5F7;border-radius:4px;" title="浅灰"></div>
|
||||
</div>
|
||||
<div style="font-size:12px;margin-bottom:4px;"><strong>字体：</strong>Atlassian Sans + Atlassian Mono</div>
|
||||
<div style="font-size:12px;margin-bottom:4px;"><strong>动效：</strong>微交互 / 悬浮反馈 / 渐进展示</div>
|
||||
<div style="font-size:12px;margin-bottom:4px;"><strong>氛围：</strong>专业、清晰、可信赖</div>
|
||||
<div style="font-size:12px;"><strong>节奏：</strong>白底为主 + 品牌色点缀</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>🔑 Atlassian 可借鉴的 5 个核心设计模式</h3>
|
||||
<div class="options">
|
||||
<div class="option" data-choice="product-matrix" onclick="toggleSelect(this)">
|
||||
<div class="letter">1</div>
|
||||
<div class="content">
|
||||
<h3>产品矩阵导航</h3>
|
||||
<p>顶部导航下拉展示所有产品，每个产品有独立落地页。用户可按"产品"或"场景"两条路径发现内容。Novalon 当前将产品、服务、解决方案平铺在单页中，缺乏独立深度。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="social-proof" onclick="toggleSelect(this)">
|
||||
<div class="letter">2</div>
|
||||
<div class="content">
|
||||
<h3>社会证明前置</h3>
|
||||
<p>Hero 之后紧跟"300K+ 公司 / 80% Fortune 500"数据条。Novalon 的数据统计在 Hero 底部，且缺乏大客户 Logo 墙和具体量化成果展示。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="scenario-entry" onclick="toggleSelect(this)">
|
||||
<div class="letter">3</div>
|
||||
<div class="content">
|
||||
<h3>场景化入口</h3>
|
||||
<p>"Get started with a template" — Scrum / Bug Tracking / DevOps 等场景模板，让用户按自身需求快速找到切入点。Novalon 的解决方案页面目前是静态描述，缺乏场景引导。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="testimonial-carousel" onclick="toggleSelect(this)">
|
||||
<div class="letter">4</div>
|
||||
<div class="content">
|
||||
<h3>客户证言轮播</h3>
|
||||
<p>大段真实客户引言 + 姓名/职位/公司，按企业规模分类（Large Enterprise / SMB）。Novalon 的案例页目前是项目描述，缺乏客户视角的成果证言。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="design-system" onclick="toggleSelect(this)">
|
||||
<div class="letter">5</div>
|
||||
<div class="content">
|
||||
<h3>设计系统驱动一致性</h3>
|
||||
<p>Atlassian Design System 统一了 Token、组件、模式三层。从字体（Atlassian Sans）、图标（1.5px stroke）、颜色（中性偏暖）到组件（按钮/标签/卡片），全产品线一致。Novalon 目前有设计变量但缺乏系统化组件库。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section" style="text-align:center;padding:16px;background:#FFFBF5;border-radius:8px;border:1px solid #E5E5E5;">
|
||||
<p style="font-size:13px;color:#5C5C5C;">👆 点击上方你感兴趣的设计模式（可多选），然后在终端告诉我你最想深入讨论哪些方向</p>
|
||||
</div>
|
||||
@@ -0,0 +1,201 @@
|
||||
<h2>品牌基因方向对比：A vs B vs C</h2>
|
||||
<p class="subtitle">同样的信息架构（借鉴 Atlassian），三种不同的视觉表达</p>
|
||||
|
||||
<div class="section">
|
||||
<h3>首页 Hero 区域效果模拟</h3>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
|
||||
|
||||
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div style="background:linear-gradient(180deg,#0A0A0A 0%,#1C1C1C 100%);padding:20px;min-height:200px;position:relative;overflow:hidden;">
|
||||
<div style="position:absolute;top:10px;left:15px;width:3px;height:3px;background:#C41E3A;border-radius:50%;opacity:0.6;"></div>
|
||||
<div style="position:absolute;top:40px;right:25px;width:2px;height:2px;background:#C41E3A;border-radius:50%;opacity:0.4;"></div>
|
||||
<div style="position:absolute;bottom:30px;left:30px;width:4px;height:4px;background:#C41E3A;border-radius:50%;opacity:0.3;"></div>
|
||||
<div style="position:absolute;top:60px;left:50%;width:60px;height:1px;background:linear-gradient(90deg,transparent,#C41E3A33,transparent);"></div>
|
||||
<div style="position:relative;z-index:1;text-align:center;padding-top:20px;">
|
||||
<div style="font-size:8px;color:#C41E3A;background:rgba(196,30,58,0.15);display:inline-block;padding:2px 8px;border-radius:2px;margin-bottom:8px;">数字化转型</div>
|
||||
<div style="font-family:serif;font-size:18px;color:#FFFFFF;letter-spacing:4px;margin-bottom:6px;">睿新致遠</div>
|
||||
<div style="font-size:9px;color:#999;margin-bottom:12px;">智连未来，成长伙伴</div>
|
||||
<div style="display:inline-block;background:#C41E3A;color:#fff;font-size:8px;padding:4px 12px;border-radius:2px;">预约演示</div>
|
||||
</div>
|
||||
<div style="position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-right:1px solid #666;border-bottom:1px solid #666;transform:translateX(-50%) rotate(45deg);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>A — 保留并强化</h3>
|
||||
<p>深墨色背景 + 水墨粒子持续运动 + 书法标题 + 朱砂红品牌色。视觉冲击力强，东方辨识度高。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div style="background:linear-gradient(180deg,#FAFAFA 0%,#FFFFFF 100%);padding:20px;min-height:200px;position:relative;overflow:hidden;border:1px solid #E5E5E5;">
|
||||
<div style="position:absolute;top:20px;right:20px;width:40px;height:40px;border:1px solid rgba(196,30,58,0.1);border-radius:50%;"></div>
|
||||
<div style="position:absolute;bottom:20px;left:15px;width:30px;height:30px;border:1px solid rgba(196,30,58,0.08);border-radius:50%;"></div>
|
||||
<div style="position:relative;z-index:1;text-align:center;padding-top:20px;">
|
||||
<div style="font-size:8px;color:#C41E3A;border:1px solid rgba(196,30,58,0.3);display:inline-block;padding:2px 8px;border-radius:2px;margin-bottom:8px;">数字化转型</div>
|
||||
<div style="font-family:serif;font-size:18px;color:#1C1C1C;letter-spacing:4px;margin-bottom:6px;">睿新致遠</div>
|
||||
<div style="font-size:9px;color:#5C5C5C;margin-bottom:12px;">智连未来，成长伙伴</div>
|
||||
<div style="display:inline-block;background:#C41E3A;color:#fff;font-size:8px;padding:4px 12px;border-radius:2px;">预约演示</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>B — 收敛但保留印记</h3>
|
||||
<p>白底为主 + 极简装饰线条 + 书法标题保留 + 朱砂红品牌色。克制专业，品牌锚点仍在。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="c" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div style="background:#FFFFFF;padding:20px;min-height:200px;position:relative;overflow:hidden;border:1px solid #E5E5E5;">
|
||||
<div style="position:relative;z-index:1;text-align:center;padding-top:20px;">
|
||||
<div style="font-size:8px;color:#0052CC;display:inline-block;padding:2px 8px;border-radius:10px;background:#E9F0FF;margin-bottom:8px;">数字化转型</div>
|
||||
<div style="font-size:18px;color:#1C1C1C;font-weight:700;margin-bottom:6px;">Novalon</div>
|
||||
<div style="font-size:9px;color:#5C5C5C;margin-bottom:12px;">智连未来，成长伙伴</div>
|
||||
<div style="display:inline-block;background:#0052CC;color:#fff;font-size:8px;padding:4px 12px;border-radius:4px;">预约演示</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>C — 全面现代清晰风</h3>
|
||||
<p>纯白底 + 蓝色品牌色 + 西文无衬线 + 圆角标签。极致清晰，但失去东方辨识度。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>产品卡片效果模拟</h3>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
|
||||
|
||||
<div style="border:1px solid #333;border-radius:8px;overflow:hidden;">
|
||||
<div style="background:#0A0A0A;padding:16px;text-align:center;">
|
||||
<div style="width:36px;height:36px;background:rgba(196,30,58,0.15);border-radius:6px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;">
|
||||
<span style="color:#C41E3A;font-size:14px;">ERP</span>
|
||||
</div>
|
||||
<div style="color:#fff;font-size:11px;font-weight:600;">睿新ERP管理系统</div>
|
||||
<div style="color:#888;font-size:8px;margin-top:4px;">集成财务、采购、销售、库存、生产</div>
|
||||
</div>
|
||||
<div style="background:#1C1C1C;padding:8px 16px;">
|
||||
<div style="color:#C41E3A;font-size:8px;">了解更多 →</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border:1px solid #E5E5E5;border-radius:8px;overflow:hidden;">
|
||||
<div style="background:#FFFBF5;padding:16px;text-align:center;">
|
||||
<div style="width:36px;height:36px;background:#FEF2F4;border-radius:6px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;">
|
||||
<span style="color:#C41E3A;font-size:14px;">ERP</span>
|
||||
</div>
|
||||
<div style="color:#1C1C1C;font-size:11px;font-weight:600;">睿新ERP管理系统</div>
|
||||
<div style="color:#5C5C5C;font-size:8px;margin-top:4px;">集成财务、采购、销售、库存、生产</div>
|
||||
</div>
|
||||
<div style="background:#fff;padding:8px 16px;border-top:1px solid #E5E5E5;">
|
||||
<div style="color:#C41E3A;font-size:8px;">了解更多 →</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border:1px solid #DFE1E6;border-radius:8px;overflow:hidden;">
|
||||
<div style="background:#FFFFFF;padding:16px;text-align:center;">
|
||||
<div style="width:36px;height:36px;background:#E9F0FF;border-radius:8px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;">
|
||||
<span style="color:#0052CC;font-size:14px;">ERP</span>
|
||||
</div>
|
||||
<div style="color:#172B4D;font-size:11px;font-weight:600;">睿新ERP管理系统</div>
|
||||
<div style="color:#5E6C84;font-size:8px;margin-top:4px;">集成财务、采购、销售、库存、生产</div>
|
||||
</div>
|
||||
<div style="background:#F4F5F7;padding:8px 16px;">
|
||||
<div style="color:#0052CC;font-size:8px;">了解更多 →</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:4px;">
|
||||
<div style="text-align:center;font-size:9px;color:#888;">A — 深色沉浸卡片</div>
|
||||
<div style="text-align:center;font-size:9px;color:#888;">B — 暖白克制卡片</div>
|
||||
<div style="text-align:center;font-size:9px;color:#888;">C — 标准现代卡片</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>关键权衡分析</h3>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
|
||||
|
||||
<div style="padding:12px;border:1px solid #333;border-radius:8px;background:#FAFAFA;">
|
||||
<div style="font-weight:700;font-size:12px;margin-bottom:8px;color:#1C1C1C;">A — 保留并强化</div>
|
||||
<div class="pros-cons">
|
||||
<div class="pros">
|
||||
<h4>✅ 优势</h4>
|
||||
<ul>
|
||||
<li>独特的东方美学辨识度</li>
|
||||
<li>深色背景对比度极高</li>
|
||||
<li>品牌差异化明显</li>
|
||||
<li>现有动效资产可复用</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cons">
|
||||
<h4>⚠️ 风险</h4>
|
||||
<ul>
|
||||
<li>动效多影响性能/加载</li>
|
||||
<li>深色风格可能"太酷"不够"稳"</li>
|
||||
<li>企业客户可能偏好传统专业感</li>
|
||||
<li>动效维护成本高</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding:12px;border:2px solid #C41E3A;border-radius:8px;background:#FFFBF5;">
|
||||
<div style="font-weight:700;font-size:12px;margin-bottom:8px;color:#C41E3A;">B — 收敛但保留印记 ⭐推荐</div>
|
||||
<div class="pros-cons">
|
||||
<div class="pros">
|
||||
<h4>✅ 优势</h4>
|
||||
<ul>
|
||||
<li>专业感与品牌特色兼顾</li>
|
||||
<li>白底更适合信息密集展示</li>
|
||||
<li>性能友好（减少粒子动效）</li>
|
||||
<li>书法+朱砂红仍保持辨识度</li>
|
||||
<li>更接近 Atlassian 的清晰架构</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cons">
|
||||
<h4>⚠️ 风险</h4>
|
||||
<ul>
|
||||
<li>需要重新平衡"克制"与"特色"</li>
|
||||
<li>部分现有动效组件需弃用</li>
|
||||
<li>设计系统需从头建立</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding:12px;border:1px solid #DFE1E6;border-radius:8px;background:#FAFAFA;">
|
||||
<div style="font-weight:700;font-size:12px;margin-bottom:8px;color:#172B4D;">C — 全面现代清晰风</div>
|
||||
<div class="pros-cons">
|
||||
<div class="pros">
|
||||
<h4>✅ 优势</h4>
|
||||
<ul>
|
||||
<li>极致清晰，信息传达效率最高</li>
|
||||
<li>可直接参考 Atlassian Design System</li>
|
||||
<li>开发维护成本最低</li>
|
||||
<li>国际化的专业感</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cons">
|
||||
<h4>⚠️ 风险</h4>
|
||||
<ul>
|
||||
<li><strong>完全丧失东方品牌辨识度</strong></li>
|
||||
<li>与国内竞品无差异</li>
|
||||
<li>品牌重塑成本极高</li>
|
||||
<li>现有视觉资产全部废弃</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section" style="text-align:center;padding:16px;background:#FFFBF5;border-radius:8px;border:1px solid #E5E5E5;">
|
||||
<p style="font-size:13px;color:#5C5C5C;">👆 点击顶部三张 Hero 卡片中你倾向的方向，然后在终端告诉我你的选择</p>
|
||||
</div>
|
||||
@@ -0,0 +1,118 @@
|
||||
<h2>交付节奏方案对比</h2>
|
||||
<p class="subtitle">三种纯方案 vs 推荐的混合方案</p>
|
||||
|
||||
<div class="section">
|
||||
<h3>三种纯方案的问题</h3>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
|
||||
|
||||
<div style="padding:16px;border:1px solid #E5E5E5;border-radius:8px;background:#FAFAFA;">
|
||||
<div style="font-weight:700;font-size:13px;margin-bottom:8px;">A — 首页先行</div>
|
||||
<div style="font-size:10px;color:#5C5C5C;margin-bottom:8px;">首页 → 产品页 → 服务页 → ...</div>
|
||||
<div style="background:#fff;padding:8px;border-radius:4px;border:1px solid #E5E5E5;margin-bottom:6px;">
|
||||
<div style="font-size:9px;color:#16A34A;">✅ 快速见效</div>
|
||||
<div style="font-size:9px;color:#16A34A;">✅ 可验证方向</div>
|
||||
</div>
|
||||
<div style="background:#FEF2F4;padding:8px;border-radius:4px;border:1px solid #FECDD3;">
|
||||
<div style="font-size:9px;color:#C41E3A;">❌ 首页新风格 → 跳转子页旧风格</div>
|
||||
<div style="font-size:9px;color:#C41E3A;">❌ 体验割裂</div>
|
||||
<div style="font-size:9px;color:#C41E3A;">❌ 每个页面重复造组件</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding:16px;border:1px solid #E5E5E5;border-radius:8px;background:#FAFAFA;">
|
||||
<div style="font-weight:700;font-size:13px;margin-bottom:8px;">B — 架构先行</div>
|
||||
<div style="font-size:10px;color:#5C5C5C;margin-bottom:8px;">全站导航 → 全站框架 → 填充内容</div>
|
||||
<div style="background:#fff;padding:8px;border-radius:4px;border:1px solid #E5E5E5;margin-bottom:6px;">
|
||||
<div style="font-size:9px;color:#16A34A;">✅ 全站一致</div>
|
||||
<div style="font-size:9px;color:#16A34A;">✅ 无割裂感</div>
|
||||
</div>
|
||||
<div style="background:#FEF2F4;padding:8px;border-radius:4px;border:1px solid #FECDD3;">
|
||||
<div style="font-size:9px;color:#C41E3A;">❌ 所有页面同时动，风险大</div>
|
||||
<div style="font-size:9px;color:#C41E3A;">❌ 长时间看不到完整效果</div>
|
||||
<div style="font-size:9px;color:#C41E3A;">❌ 回滚困难</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding:16px;border:1px solid #E5E5E5;border-radius:8px;background:#FAFAFA;">
|
||||
<div style="font-weight:700;font-size:13px;margin-bottom:8px;">C — 设计系统先行</div>
|
||||
<div style="font-size:10px;color:#5C5C5C;margin-bottom:8px;">Token → 组件库 → 页面迁移</div>
|
||||
<div style="background:#fff;padding:8px;border-radius:4px;border:1px solid #E5E5E5;margin-bottom:6px;">
|
||||
<div style="font-size:9px;color:#16A34A;">✅ 质量有保障</div>
|
||||
<div style="font-size:9px;color:#16A34A;">✅ 组件复用</div>
|
||||
</div>
|
||||
<div style="background:#FEF2F4;padding:8px;border-radius:4px;border:1px solid #FECDD3;">
|
||||
<div style="font-size:9px;color:#C41E3A;">❌ 前期投入大，零可见产出</div>
|
||||
<div style="font-size:9px;color:#C41E3A;">❌ 容易过度设计（组件脱离实际）</div>
|
||||
<div style="font-size:9px;color:#C41E3A;">❌ "系统建完了但页面还没动"</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>⭐ 推荐：A + C 混合 — 首页驱动的设计系统</h3>
|
||||
<p class="subtitle">用首页的实际需求驱动组件设计，首页完成时设计系统基础也同步就绪</p>
|
||||
|
||||
<div style="background:#FFFBF5;border:2px solid #C41E3A;border-radius:12px;padding:20px;">
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:16px;">
|
||||
|
||||
<div>
|
||||
<div style="font-weight:700;font-size:12px;color:#C41E3A;margin-bottom:10px;">Phase 1：首页重构 + 设计系统基础</div>
|
||||
<div style="background:#fff;border-radius:8px;padding:12px;border:1px solid #E5E5E5;">
|
||||
<div style="font-size:10px;margin-bottom:6px;"><strong>首页改造：</strong></div>
|
||||
<div style="font-size:9px;color:#5C5C5C;margin-bottom:2px;">• 新 Hero（白底 + 书法标题 + 朱砂红CTA）</div>
|
||||
<div style="font-size:9px;color:#5C5C5C;margin-bottom:2px;">• 社会证明数据条</div>
|
||||
<div style="font-size:9px;color:#5C5C5C;margin-bottom:2px;">• 产品矩阵卡片</div>
|
||||
<div style="font-size:9px;color:#5C5C5C;margin-bottom:2px;">• 场景化入口</div>
|
||||
<div style="font-size:9px;color:#5C5C5C;margin-bottom:8px;">• 客户证言区</div>
|
||||
<div style="font-size:10px;margin-bottom:6px;"><strong>同步沉淀：</strong></div>
|
||||
<div style="font-size:9px;color:#C41E3A;margin-bottom:2px;">• Design Token 体系（颜色/间距/字体）</div>
|
||||
<div style="font-size:9px;color:#C41E3A;margin-bottom:2px;">• 导航组件（下拉产品矩阵）</div>
|
||||
<div style="font-size:9px;color:#C41E3A;margin-bottom:2px;">• 产品卡片组件</div>
|
||||
<div style="font-size:9px;color:#C41E3A;">• 排版系统（标题/正文/标签）</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="font-weight:700;font-size:12px;color:#1C1C1C;margin-bottom:10px;">Phase 2：产品页/服务页迁移</div>
|
||||
<div style="background:#fff;border-radius:8px;padding:12px;border:1px solid #E5E5E5;margin-bottom:12px;">
|
||||
<div style="font-size:9px;color:#5C5C5C;margin-bottom:2px;">• 基于 Phase 1 沉淀的组件直接组装</div>
|
||||
<div style="font-size:9px;color:#5C5C5C;margin-bottom:2px;">• 产品详情页（已有独立 Section 组件）</div>
|
||||
<div style="font-size:9px;color:#5C5C5C;">• 服务详情页（已有独立 Section 组件）</div>
|
||||
</div>
|
||||
<div style="font-weight:700;font-size:12px;color:#1C1C1C;margin-bottom:10px;">Phase 3：其余页面 + 设计系统完善</div>
|
||||
<div style="background:#fff;border-radius:8px;padding:12px;border:1px solid #E5E5E5;">
|
||||
<div style="font-size:9px;color:#5C5C5C;margin-bottom:2px;">• 解决方案页（场景化入口落地）</div>
|
||||
<div style="font-size:9px;color:#5C5C5C;margin-bottom:2px;">• 案例页（客户证言组件复用）</div>
|
||||
<div style="font-size:9px;color:#5C5C5C;">• 关于/团队/新闻页</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="background:#fff;border-radius:8px;padding:12px;border:1px solid #E5E5E5;">
|
||||
<div style="font-weight:700;font-size:11px;margin-bottom:8px;">💡 核心原则：组件从实际页面需求中生长</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;">
|
||||
<div style="text-align:center;padding:8px;background:#FEF2F4;border-radius:4px;">
|
||||
<div style="font-size:20px;margin-bottom:4px;">🏗️</div>
|
||||
<div style="font-size:9px;color:#5C5C5C;">做首页时发现<br/>需要产品卡片</div>
|
||||
</div>
|
||||
<div style="text-align:center;padding:8px;background:#FEF2F4;border-radius:4px;">
|
||||
<div style="font-size:20px;margin-bottom:4px;">🔧</div>
|
||||
<div style="font-size:9px;color:#5C5C5C;">抽取为通用<br/>ProductCard 组件</div>
|
||||
</div>
|
||||
<div style="text-align:center;padding:8px;background:#FEF2F4;border-radius:4px;">
|
||||
<div style="font-size:20px;margin-bottom:4px;">♻️</div>
|
||||
<div style="font-size:9px;color:#5C5C5C;">产品页/服务页<br/>直接复用组件</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section" style="text-align:center;padding:16px;background:#FFFBF5;border-radius:8px;border:1px solid #E5E5E5;">
|
||||
<p style="font-size:13px;color:#5C5C5C;">确认这个节奏方向？或者你有其他想法？在终端告诉我</p>
|
||||
</div>
|
||||
@@ -0,0 +1,234 @@
|
||||
<h2>方案二：品牌融合重构 — 完整设计规格</h2>
|
||||
<p class="subtitle">Atlassian 信息架构 × Novalon 品牌叙事 × 收敛但保留印记</p>
|
||||
|
||||
<div class="section">
|
||||
<h3>📐 整体页面结构</h3>
|
||||
<div style="background:#FFFBF5;border:1px solid #E5E5E5;border-radius:8px;padding:16px;">
|
||||
<div style="display:flex;flex-direction:column;gap:3px;">
|
||||
<div style="background:#FFFBF5;border:1px solid #E5E5E5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:8px;height:8px;background:#C41E3A;border-radius:2px;"></div>
|
||||
<div style="font-size:9px;font-weight:700;">Navigation</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">Logo + 产品▾ + 解决方案▾ + 服务 + 案例 + 关于 + 联系我们</div>
|
||||
</div>
|
||||
<div style="background:linear-gradient(180deg,#FFFBF5,#FFFFFF);border:1px solid #E5E5E5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:8px;height:8px;background:#1C1C1C;border-radius:2px;"></div>
|
||||
<div style="font-size:9px;font-weight:700;">Section 1: Hero</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">品牌主张 + 双CTA + 极简装饰</div>
|
||||
</div>
|
||||
<div style="background:#F5F5F5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:8px;height:8px;background:#C41E3A;border-radius:50%;"></div>
|
||||
<div style="font-size:9px;font-weight:700;">Section 2: 社会证明</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">三列关键数据 + 客户Logo墙（可选）</div>
|
||||
</div>
|
||||
<div style="background:#FFFFFF;border:1px solid #E5E5E5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:8px;height:8px;background:#C41E3A;border-radius:2px;"></div>
|
||||
<div style="font-size:9px;font-weight:700;">Section 3: 核心产品矩阵</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">2×2 卡片网格 + 朱砂红左边框</div>
|
||||
</div>
|
||||
<div style="background:#FFFBF5;border:1px solid #E5E5E5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:8px;height:8px;background:#D97706;border-radius:2px;"></div>
|
||||
<div style="font-size:9px;font-weight:700;">Section 4: 挑战与场景入口</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">"您面临什么挑战？" 三列痛点卡片</div>
|
||||
</div>
|
||||
<div style="background:#1C1C1C;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:8px;height:8px;background:#C41E3A;border-radius:50%;"></div>
|
||||
<div style="font-size:9px;font-weight:700;color:#fff;">Section 5: 客户成果</div>
|
||||
<div style="font-size:7px;color:rgba(255,255,255,0.6);">深色背景 + 客户引言 + 量化数据</div>
|
||||
</div>
|
||||
<div style="background:linear-gradient(135deg,#C41E3A,#A01830);border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:8px;height:8px;background:#fff;border-radius:2px;"></div>
|
||||
<div style="font-size:9px;font-weight:700;color:#fff;">Section 6: CTA</div>
|
||||
<div style="font-size:7px;color:rgba(255,255,255,0.8);">朱砂红渐变 + 行动号召</div>
|
||||
</div>
|
||||
<div style="background:#F5F5F5;border:1px solid #E5E5E5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:8px;height:8px;background:#999;border-radius:2px;"></div>
|
||||
<div style="font-size:9px;font-weight:700;">Footer</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">品牌信息 + 导航 + 联系方式</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:8px;font-size:8px;color:#5C5C5C;text-align:center;">
|
||||
视觉节奏：暖白 → 浅灰 → 白 → 暖白 → <strong>深墨</strong> → 朱砂红 → 浅灰
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>🧭 导航重设计：产品矩阵下拉</h3>
|
||||
<div class="split">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">当前导航</div>
|
||||
<div class="mockup-body" style="padding:12px;">
|
||||
<div class="mock-nav" style="margin-bottom:8px;">Logo | 服务 | 解决方案 | 产品 | 案例 | 关于 | 团队 | 新闻</div>
|
||||
<div style="font-size:8px;color:#C41E3A;">问题：</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">• 8个平铺项，认知负担重</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">• 产品/服务/解决方案关系不清</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">• 无下拉，无法快速预览</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">• "团队""新闻"占位但非核心</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">新导航</div>
|
||||
<div class="mockup-body" style="padding:12px;">
|
||||
<div class="mock-nav" style="margin-bottom:8px;">Logo 睿新致遠 | <strong>产品 ▾</strong> | <strong>解决方案 ▾</strong> | 服务 | 案例 | 关于我们</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;margin-bottom:6px;">
|
||||
<div style="font-size:7px;color:#999;margin-bottom:4px;">点击"产品 ▾"展开：</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;">
|
||||
<div style="padding:4px 6px;border-left:2px solid #C41E3A;">
|
||||
<div style="font-size:7px;font-weight:700;">ERP 管理系统</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;">财务·采购·销售·库存</div>
|
||||
</div>
|
||||
<div style="padding:4px 6px;border-left:2px solid #C41E3A;">
|
||||
<div style="font-size:7px;font-weight:700;">CRM 客户管理</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;">线索·商机·合同·服务</div>
|
||||
</div>
|
||||
<div style="padding:4px 6px;border-left:2px solid #C41E3A;">
|
||||
<div style="font-size:7px;font-weight:700;">BI 数据平台</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;">报表·仪表盘·预测</div>
|
||||
</div>
|
||||
<div style="padding:4px 6px;border-left:2px solid #C41E3A;">
|
||||
<div style="font-size:7px;font-weight:700;">CMS 内容平台</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;">建站·运营·分发</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:8px;color:#16A34A;">改进：</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">• 6项→核心4项+2个下拉</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">• 下拉预览产品，减少跳转</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">• "团队/新闻"移入"关于我们"</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>🎨 Design Token 体系（收敛版）</h3>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:8px;padding:16px;">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
|
||||
<div>
|
||||
<div style="font-size:10px;font-weight:700;margin-bottom:8px;">色彩（保留，微调）</div>
|
||||
<div style="display:flex;gap:4px;margin-bottom:6px;">
|
||||
<div style="text-align:center;">
|
||||
<div style="width:28px;height:28px;background:#1C1C1C;border-radius:4px;"></div>
|
||||
<div style="font-size:6px;color:#888;margin-top:2px;">墨黑</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="width:28px;height:28px;background:#C41E3A;border-radius:4px;"></div>
|
||||
<div style="font-size:6px;color:#888;margin-top:2px;">朱砂红</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="width:28px;height:28px;background:#FFFBF5;border:1px solid #E5E5E5;border-radius:4px;"></div>
|
||||
<div style="font-size:6px;color:#888;margin-top:2px;">宣纸白</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="width:28px;height:28px;background:#F5F5F5;border-radius:4px;"></div>
|
||||
<div style="font-size:6px;color:#888;margin-top:2px;">浅灰</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="width:28px;height:28px;background:#FEF2F4;border-radius:4px;"></div>
|
||||
<div style="font-size:6px;color:#888;margin-top:2px;">红底</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">✅ 保留现有色彩体系不变</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">➕ 新增场景色：#FFFBEB(黄底) #F0FDF4(绿底)</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:10px;font-weight:700;margin-bottom:8px;">动效（大幅收敛）</div>
|
||||
<div style="font-size:7px;color:#C41E3A;margin-bottom:2px;">❌ 移除：水墨粒子、数据流、粒子星河、鼠标交互粒子</div>
|
||||
<div style="font-size:7px;color:#C41E3A;margin-bottom:2px;">❌ 移除：流体波浪、几何抽象、网格线</div>
|
||||
<div style="font-size:7px;color:#16A34A;margin-bottom:2px;">✅ 保留：渐变流动（极简版）、微妙圆点</div>
|
||||
<div style="font-size:7px;color:#16A34A;margin-bottom:2px;">✅ 保留：滚动揭示（FadeUp）、数字动画</div>
|
||||
<div style="font-size:7px;color:#0052CC;margin-bottom:2px;">➕ 新增：悬浮微交互、卡片 hover 提升效果</div>
|
||||
<div style="font-size:7px;color:#0052CC;">➕ 新增：导航下拉过渡、场景卡片 hover 色变</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>🧩 Phase 1 沉淀的核心组件</h3>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;">
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
|
||||
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">MegaDropdown</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">产品矩阵下拉导航</div>
|
||||
<div style="font-size:6px;color:#999;margin-top:4px;">复用：产品页、解决方案页</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
|
||||
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">ProductCard</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">朱砂红左边框产品卡片</div>
|
||||
<div style="font-size:6px;color:#999;margin-top:4px;">复用：产品列表页、首页</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
|
||||
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">ChallengeCard</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">痛点/场景入口卡片</div>
|
||||
<div style="font-size:6px;color:#999;margin-top:4px;">复用：解决方案页、服务页</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
|
||||
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">StatsBar</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">三列数据统计条</div>
|
||||
<div style="font-size:6px;color:#999;margin-top:4px;">复用：产品页、关于页</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
|
||||
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">TestimonialBlock</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">深色背景客户证言</div>
|
||||
<div style="font-size:6px;color:#999;margin-top:4px;">复用：案例页、产品页</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
|
||||
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">CTASection</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">朱砂红渐变行动号召</div>
|
||||
<div style="font-size:6px;color:#999;margin-top:4px;">复用：全站通用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>📋 现有组件迁移策略</h3>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:8px;padding:12px;">
|
||||
<table style="width:100%;font-size:8px;border-collapse:collapse;">
|
||||
<tr style="border-bottom:1px solid #E5E5E5;">
|
||||
<td style="padding:4px;font-weight:700;">组件</td>
|
||||
<td style="padding:4px;font-weight:700;">策略</td>
|
||||
<td style="padding:4px;font-weight:700;">说明</td>
|
||||
</tr>
|
||||
<tr style="border-bottom:1px solid #F5F5F5;">
|
||||
<td style="padding:4px;color:#C41E3A;">InkBackground</td>
|
||||
<td style="padding:4px;">❌ 废弃</td>
|
||||
<td style="padding:4px;color:#5C5C5C;">水墨背景不再使用，用极简装饰替代</td>
|
||||
</tr>
|
||||
<tr style="border-bottom:1px solid #F5F5F5;">
|
||||
<td style="padding:4px;color:#C41E3A;">DataParticleFlow</td>
|
||||
<td style="padding:4px;">❌ 废弃</td>
|
||||
<td style="padding:4px;color:#5C5C5C;">粒子动效过于花哨，不符合收敛方向</td>
|
||||
</tr>
|
||||
<tr style="border-bottom:1px solid #F5F5F5;">
|
||||
<td style="padding:4px;color:#16A34A;">SubtleDots</td>
|
||||
<td style="padding:4px;">✅ 保留</td>
|
||||
<td style="padding:4px;color:#5C5C5C;">微妙圆点符合收敛方向</td>
|
||||
</tr>
|
||||
<tr style="border-bottom:1px solid #F5F5F5;">
|
||||
<td style="padding:4px;color:#16A34A;">GradientFlow</td>
|
||||
<td style="padding:4px;">🔧 简化</td>
|
||||
<td style="padding:4px;color:#5C5C5C;">保留但降低强度，作为Hero极淡背景</td>
|
||||
</tr>
|
||||
<tr style="border-bottom:1px solid #F5F5F5;">
|
||||
<td style="padding:4px;color:#16A34A;">ScrollReveal/FadeUp</td>
|
||||
<td style="padding:4px;">✅ 保留</td>
|
||||
<td style="padding:4px;color:#5C5C5C;">滚动揭示动画是核心交互</td>
|
||||
</tr>
|
||||
<tr style="border-bottom:1px solid #F5F5F5;">
|
||||
<td style="padding:4px;color:#16A34A;">AnimatedNumber</td>
|
||||
<td style="padding:4px;">✅ 保留</td>
|
||||
<td style="padding:4px;color:#5C5C5C;">数据统计动画</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:4px;color:#0052CC;">SealAnimation</td>
|
||||
<td style="padding:4px;">🔄 重构</td>
|
||||
<td style="padding:4px;color:#5C5C5C;">印章动画保留但仅用于品牌标题区</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section" style="text-align:center;padding:16px;background:#FFFBF5;border-radius:8px;border:2px solid #C41E3A;">
|
||||
<p style="font-size:13px;color:#1C1C1C;font-weight:700;">以上是方案二的完整设计规格</p>
|
||||
<p style="font-size:11px;color:#5C5C5C;margin-top:4px;">确认无误后，我将编写正式设计文档并进入实现规划阶段</p>
|
||||
</div>
|
||||
@@ -0,0 +1,224 @@
|
||||
<h2>首页重构：3 种布局方案</h2>
|
||||
<p class="subtitle">同样的品牌方向（收敛+保留印记），不同的信息组织逻辑</p>
|
||||
|
||||
<div class="section">
|
||||
<h3>方案一：Atlassian 直接映射</h3>
|
||||
<p class="subtitle">将 Atlassian 首页结构直接映射到 Novalon 内容</p>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">首页线框图</div>
|
||||
<div class="mockup-body" style="padding:12px;">
|
||||
<div class="mock-nav" style="margin-bottom:8px;">Logo 睿新致遠 | 产品 ▾ | 解决方案 ▾ | 案例 | 关于 | 联系我们</div>
|
||||
<div style="background:#FFFBF5;border:1px solid #E5E5E5;border-radius:6px;padding:16px;text-align:center;margin-bottom:6px;">
|
||||
<div style="font-size:8px;color:#C41E3A;border:1px solid rgba(196,30,58,0.3);display:inline-block;padding:1px 6px;border-radius:2px;margin-bottom:4px;">数字化转型伙伴</div>
|
||||
<div style="font-family:serif;font-size:14px;color:#1C1C1C;letter-spacing:2px;margin-bottom:2px;">睿新致遠</div>
|
||||
<div style="font-size:8px;color:#5C5C5C;margin-bottom:6px;">企业数字化转型的可靠成长伙伴</div>
|
||||
<div style="display:inline-block;background:#C41E3A;color:#fff;font-size:7px;padding:3px 10px;border-radius:2px;">预约演示</div>
|
||||
</div>
|
||||
<div style="background:#F5F5F5;border-radius:4px;padding:6px;text-align:center;margin-bottom:6px;font-size:8px;color:#5C5C5C;">
|
||||
📊 200+ 企业客户 · 覆盖 15+ 行业 · 99.9% 系统可用性
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px;">
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:4px;padding:8px;text-align:center;">
|
||||
<div style="font-size:7px;color:#C41E3A;font-weight:700;">ERP</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;">企业管理系统</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:4px;padding:8px;text-align:center;">
|
||||
<div style="font-size:7px;color:#C41E3A;font-weight:700;">CRM</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;">客户关系管理</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:4px;padding:8px;text-align:center;">
|
||||
<div style="font-size:7px;color:#C41E3A;font-weight:700;">BI</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;">商业智能分析</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:4px;padding:8px;text-align:center;">
|
||||
<div style="font-size:7px;color:#C41E3A;font-weight:700;">CMS</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;">内容管理平台</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:4px;padding:8px;margin-bottom:6px;">
|
||||
<div style="font-size:8px;font-weight:700;margin-bottom:4px;">按场景探索</div>
|
||||
<div style="display:flex;gap:4px;">
|
||||
<div style="background:#FEF2F4;font-size:6px;padding:2px 6px;border-radius:2px;color:#C41E3A;">制造业</div>
|
||||
<div style="background:#FEF2F4;font-size:6px;padding:2px 6px;border-radius:2px;color:#C41E3A;">金融</div>
|
||||
<div style="background:#FEF2F4;font-size:6px;padding:2px 6px;border-radius:2px;color:#C41E3A;">零售</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:#F5F5F5;border-radius:4px;padding:8px;margin-bottom:6px;">
|
||||
<div style="font-size:7px;color:#5C5C5C;font-style:italic;">"与睿新合作后，我们的运营效率提升了40%"</div>
|
||||
<div style="font-size:6px;color:#999;margin-top:2px;">— 某制造业CTO</div>
|
||||
</div>
|
||||
<div style="background:#C41E3A;border-radius:4px;padding:8px;text-align:center;">
|
||||
<div style="font-size:8px;color:#fff;font-weight:700;">开始您的数字化转型</div>
|
||||
<div style="font-size:6px;color:rgba(255,255,255,0.8);margin-top:2px;">预约免费咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pros-cons" style="margin-top:8px;">
|
||||
<div class="pros"><h4>✅ 优势</h4><ul><li>结构清晰，Atlassian 验证过的模式</li><li>产品矩阵一目了然</li><li>开发参照明确</li></ul></div>
|
||||
<div class="cons"><h4>⚠️ 不足</h4><ul><li>可能过于"复制"Atlassian</li><li>缺乏 Novalon 独特叙事</li><li>场景入口较浅</li></ul></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>方案二：品牌融合重构 ⭐推荐</h3>
|
||||
<p class="subtitle">Atlassian 的信息架构 + Novalon 的品牌叙事逻辑</p>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">首页线框图</div>
|
||||
<div class="mockup-body" style="padding:12px;">
|
||||
<div class="mock-nav" style="margin-bottom:8px;">Logo 睿新致遠 | 产品 ▾ | 解决方案 ▾ | 服务 | 案例 | 关于我们</div>
|
||||
<div style="background:linear-gradient(180deg,#FFFBF5,#FFFFFF);border:1px solid #E5E5E5;border-radius:6px;padding:20px 16px;text-align:center;margin-bottom:6px;position:relative;overflow:hidden;">
|
||||
<div style="position:absolute;top:8px;right:12px;width:24px;height:24px;border:1px solid rgba(196,30,58,0.08);border-radius:50%;"></div>
|
||||
<div style="position:absolute;bottom:12px;left:10px;width:18px;height:18px;border:1px solid rgba(196,30,58,0.06);border-radius:50%;"></div>
|
||||
<div style="font-size:7px;color:#C41E3A;letter-spacing:2px;margin-bottom:6px;">NOVALON · 睿新致遠</div>
|
||||
<div style="font-family:serif;font-size:16px;color:#1C1C1C;letter-spacing:3px;margin-bottom:4px;">智连未来，成长伙伴</div>
|
||||
<div style="font-size:8px;color:#5C5C5C;margin-bottom:8px;max-width:240px;margin-left:auto;margin-right:auto;">从战略规划到系统落地，陪伴企业完成数字化转型的每一步</div>
|
||||
<div style="display:flex;gap:6px;justify-content:center;">
|
||||
<div style="background:#C41E3A;color:#fff;font-size:7px;padding:4px 12px;border-radius:2px;">预约演示</div>
|
||||
<div style="border:1px solid #1C1C1C;color:#1C1C1C;font-size:7px;padding:4px 12px;border-radius:2px;">了解方案</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;margin-bottom:6px;background:#F5F5F5;border-radius:4px;padding:8px;">
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:12px;font-weight:700;color:#C41E3A;">200+</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;">企业客户</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:12px;font-weight:700;color:#C41E3A;">15+</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;">行业覆盖</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:12px;font-weight:700;color:#C41E3A;">99.9%</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;">系统可用性</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom:6px;">
|
||||
<div style="font-size:8px;font-weight:700;margin-bottom:4px;color:#1C1C1C;">核心产品</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;">
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;border-left:3px solid #C41E3A;">
|
||||
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">ERP 管理系统</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;margin-top:2px;">财务·采购·销售·库存·生产</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;border-left:3px solid #C41E3A;">
|
||||
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">CRM 客户管理</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;margin-top:2px;">线索·商机·合同·服务</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;border-left:3px solid #C41E3A;">
|
||||
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">BI 数据平台</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;margin-top:2px;">报表·仪表盘·预测·决策</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;border-left:3px solid #C41E3A;">
|
||||
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">CMS 内容平台</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;margin-top:2px;">建站·运营·分发·分析</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom:6px;">
|
||||
<div style="font-size:8px;font-weight:700;margin-bottom:4px;color:#1C1C1C;">您面临什么挑战？</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;">
|
||||
<div style="background:#FEF2F4;border-radius:6px;padding:8px;text-align:center;cursor:pointer;">
|
||||
<div style="font-size:10px;margin-bottom:2px;">🏭</div>
|
||||
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">系统孤岛</div>
|
||||
<div style="font-size:6px;color:#C41E3A;margin-top:1px;">数据不通</div>
|
||||
</div>
|
||||
<div style="background:#FFFBEB;border-radius:6px;padding:8px;text-align:center;cursor:pointer;">
|
||||
<div style="font-size:10px;margin-bottom:2px;">📈</div>
|
||||
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">增长瓶颈</div>
|
||||
<div style="font-size:6px;color:#D97706;margin-top:1px;">效率低下</div>
|
||||
</div>
|
||||
<div style="background:#F0FDF4;border-radius:6px;padding:8px;text-align:center;cursor:pointer;">
|
||||
<div style="font-size:10px;margin-bottom:2px;">🔒</div>
|
||||
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">合规风险</div>
|
||||
<div style="font-size:6px;color:#16A34A;margin-top:1px;">安全隐忧</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:#1C1C1C;border-radius:6px;padding:10px;margin-bottom:6px;">
|
||||
<div style="font-size:7px;color:rgba(255,255,255,0.6);margin-bottom:4px;">客户成果</div>
|
||||
<div style="font-size:8px;color:#fff;font-style:italic;margin-bottom:4px;">"睿新团队不是交付完就走的供应商，而是真正陪伴我们成长的伙伴"</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||
<div style="font-size:6px;color:rgba(255,255,255,0.5);">— 某上市制造企业 CTO</div>
|
||||
<div style="display:flex;gap:4px;">
|
||||
<div style="text-align:center;"><div style="font-size:9px;font-weight:700;color:#C41E3A;">40%</div><div style="font-size:5px;color:rgba(255,255,255,0.4);">效率提升</div></div>
|
||||
<div style="text-align:center;"><div style="font-size:9px;font-weight:700;color:#C41E3A;">6月</div><div style="font-size:5px;color:rgba(255,255,255,0.4);">交付周期</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:linear-gradient(135deg,#C41E3A,#A01830);border-radius:6px;padding:10px;text-align:center;">
|
||||
<div style="font-size:8px;color:#fff;font-weight:700;">开启数字化转型之旅</div>
|
||||
<div style="font-size:6px;color:rgba(255,255,255,0.8);margin-top:2px;">免费咨询 · 专属方案 · 30天试用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pros-cons" style="margin-top:8px;">
|
||||
<div class="pros"><h4>✅ 优势</h4><ul><li>品牌叙事 + 产品矩阵完美融合</li><li>"您面临什么挑战"场景入口有温度</li><li>深色客户成果区形成视觉节奏</li><li>朱砂红左边框 = 品牌印记</li></ul></div>
|
||||
<div class="cons"><h4>⚠️ 不足</h4><ul><li>设计复杂度中等</li><li>需要更多内容支撑（客户证言/数据）</li></ul></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>方案三：场景驱动叙事</h3>
|
||||
<p class="subtitle">以用户痛点/场景为主线，产品作为解决方案嵌入</p>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">首页线框图</div>
|
||||
<div class="mockup-body" style="padding:12px;">
|
||||
<div class="mock-nav" style="margin-bottom:8px;">Logo 睿新致遠 | 行业方案 ▾ | 产品 | 服务 | 案例</div>
|
||||
<div style="background:#FFFBF5;border:1px solid #E5E5E5;border-radius:6px;padding:16px;text-align:center;margin-bottom:6px;">
|
||||
<div style="font-family:serif;font-size:14px;color:#1C1C1C;letter-spacing:2px;margin-bottom:4px;">您的挑战，我们的使命</div>
|
||||
<div style="font-size:8px;color:#5C5C5C;">选择您最关心的业务挑战</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px;">
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;">
|
||||
<div style="font-size:10px;margin-bottom:2px;">🏭</div>
|
||||
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">制造业数字化转型</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;margin-top:2px;">ERP + MES + BI 一体化</div>
|
||||
<div style="font-size:6px;color:#C41E3A;margin-top:2px;">查看方案 →</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;">
|
||||
<div style="font-size:10px;margin-bottom:2px;">🏦</div>
|
||||
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">金融合规与风控</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;margin-top:2px;">CRM + BI + 安全审计</div>
|
||||
<div style="font-size:6px;color:#C41E3A;margin-top:2px;">查看方案 →</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;">
|
||||
<div style="font-size:10px;margin-bottom:2px;">🛒</div>
|
||||
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">零售全渠道运营</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;margin-top:2px;">CRM + CMS + 数据中台</div>
|
||||
<div style="font-size:6px;color:#C41E3A;margin-top:2px;">查看方案 →</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;">
|
||||
<div style="font-size:10px;margin-bottom:2px;">🏗️</div>
|
||||
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">工程项目管理</div>
|
||||
<div style="font-size:6px;color:#5C5C5C;margin-top:2px;">ERP + 进度追踪 + 成本管控</div>
|
||||
<div style="font-size:6px;color:#C41E3A;margin-top:2px;">查看方案 →</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:#F5F5F5;border-radius:4px;padding:6px;text-align:center;margin-bottom:6px;font-size:7px;color:#5C5C5C;">
|
||||
每个场景背后，都有对应的产品组合支撑
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:4px;padding:8px;margin-bottom:6px;">
|
||||
<div style="font-size:7px;font-weight:700;margin-bottom:4px;">我们的产品</div>
|
||||
<div style="display:flex;gap:6px;justify-content:center;">
|
||||
<div style="font-size:7px;color:#C41E3A;font-weight:700;">ERP</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">·</div>
|
||||
<div style="font-size:7px;color:#C41E3A;font-weight:700;">CRM</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">·</div>
|
||||
<div style="font-size:7px;color:#C41E3A;font-weight:700;">BI</div>
|
||||
<div style="font-size:7px;color:#5C5C5C;">·</div>
|
||||
<div style="font-size:7px;color:#C41E3A;font-weight:700;">CMS</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:#C41E3A;border-radius:4px;padding:8px;text-align:center;">
|
||||
<div style="font-size:8px;color:#fff;font-weight:700;">找到您的解决方案</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pros-cons" style="margin-top:8px;">
|
||||
<div class="pros"><h4>✅ 优势</h4><ul><li>用户视角，按痛点找方案</li><li>差异化明显（竞品少这么做）</li><li>产品自然嵌入场景</li></ul></div>
|
||||
<div class="cons"><h4>⚠️ 不足</h4><ul><li>需要丰富的行业场景内容</li><li>产品曝光度相对弱</li><li>SEO 不利（产品关键词靠后）</li><li>内容准备量大</li></ul></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section" style="text-align:center;padding:16px;background:#FFFBF5;border-radius:8px;border:2px solid #C41E3A;">
|
||||
<p style="font-size:13px;color:#1C1C1C;font-weight:700;">👆 点击你倾向的方案卡片（方案一/二/三的线框图区域），然后在终端确认</p>
|
||||
<p style="font-size:11px;color:#5C5C5C;margin-top:4px;">我推荐方案二——品牌融合重构，它在 Atlassian 架构优势和 Novalon 品牌特色之间取得了最佳平衡</p>
|
||||
</div>
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,299 @@
|
||||
# 核心业务与解决方案设计升级 实现计划
|
||||
|
||||
> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。
|
||||
|
||||
**目标：** 将产品服务页面的成熟设计模式（组件拆分、动画升级、背景特效、独立布局）应用到核心业务和解决方案页面，实现全站设计一致性。
|
||||
|
||||
**架构：** 参照 `src/components/products/` 的 8 个独立 Section 组件模式，为核心业务创建 6 个独立 Section 组件，为解决方案创建 3 个独立 Section 组件。复用 `@/lib/animations` 动画组件库。核心业务详情页采用独立 Header/Footer 布局。
|
||||
|
||||
**技术栈：** Next.js 16 + React 19 + Framer Motion 12 + Tailwind CSS 4 + 自定义动画组件库
|
||||
|
||||
---
|
||||
|
||||
## 文件结构
|
||||
|
||||
### 新建文件
|
||||
|
||||
| 文件 | 职责 |
|
||||
|------|------|
|
||||
| `src/components/services/service-hero-section.tsx` | 服务详情 Hero（InkBackground + DataParticleFlow + SealStamp + InkReveal） |
|
||||
| `src/components/services/service-challenges-section.tsx` | 挑战板块（StaggerContainer + InkCard） |
|
||||
| `src/components/services/service-features-section.tsx` | 功能/如何帮助板块（ScrollReveal + FadeUp + CheckCircle2） |
|
||||
| `src/components/services/service-process-section.tsx` | 服务流程（SealStamp + StaggerContainer + FadeUp + 渐变连接线） |
|
||||
| `src/components/services/service-outcomes-section.tsx` | 成果板块（CountUp + StaggerContainer + InkCard） |
|
||||
| `src/components/services/service-cases-section.tsx` | 相关案例（StaggerContainer + InkCard） |
|
||||
| `src/components/services/service-cta-section.tsx` | CTA 区域（FloatingElement + RippleButton + 红色渐变背景） |
|
||||
| `src/components/solutions/consulting-section.tsx` | 参谋伙伴模块（InkReveal + StaggerContainer + FadeUp） |
|
||||
| `src/components/solutions/tech-solution-section.tsx` | 技术伙伴模块（InkReveal + StaggerContainer + FadeUp） |
|
||||
| `src/components/solutions/accompany-section.tsx` | 同行伙伴模块（InkReveal + StaggerContainer + FadeUp） |
|
||||
| `src/components/layout/service-header.tsx` | 服务详情独立 Header（参照 product-header） |
|
||||
| `src/components/layout/service-footer.tsx` | 服务详情独立 Footer（参照 product-footer） |
|
||||
|
||||
### 修改文件
|
||||
|
||||
| 文件 | 变更 |
|
||||
|------|------|
|
||||
| `src/app/(marketing)/services/[id]/client.tsx` | 重构：拆分为 7 个独立 Section 组件 + dynamic 懒加载 |
|
||||
| `src/app/(marketing)/services/[id]/page.tsx` | 添加独立布局支持（isServiceDetailPage 判断） |
|
||||
| `src/app/(marketing)/solutions/page.tsx` | 重构：拆分为 3 个独立 Section 组件 + dynamic 懒加载 |
|
||||
| `src/app/(marketing)/layout.tsx` | 添加 ServiceHeader/ServiceFooter 布局切换逻辑 |
|
||||
| `src/lib/constants/services.ts` | 补充 challenges 和 outcomes 数据结构 |
|
||||
|
||||
---
|
||||
|
||||
## 任务 1：数据结构补全
|
||||
|
||||
**文件：**
|
||||
- 修改：`src/lib/constants/services.ts`
|
||||
|
||||
- [ ] **步骤 1：扩展 Service 类型，补充 challenges 和 outcomes 字段**
|
||||
|
||||
将 `client.tsx` 中硬编码的 `challenges` 和 `outcomes` 对象迁移到 `services.ts`，为每个服务添加：
|
||||
- `challenges: Array<{ title: string; description: string }>` — 4 项挑战
|
||||
- `outcomes: Array<{ value: string; label: string }>` — 3 项成果数据
|
||||
|
||||
- [ ] **步骤 2：验证类型导出**
|
||||
|
||||
确认 `SERVICES` 从 `@/lib/constants` 正确导出，新字段可被消费。
|
||||
|
||||
---
|
||||
|
||||
## 任务 2：核心业务 — Hero Section
|
||||
|
||||
**文件：**
|
||||
- 创建：`src/components/services/service-hero-section.tsx`
|
||||
|
||||
- [ ] **步骤 1：创建 ServiceHeroSection 组件**
|
||||
|
||||
参照 `product-hero-section.tsx`，实现：
|
||||
- Props: `{ service: Service }`
|
||||
- 背景：`InkBackground` + `DataParticleFlow`（particleCount=60, color="#C41E3A", intensity="subtle"）
|
||||
- 布局：`min-h-screen flex items-center justify-center` + `bg-gradient-to-b from-white to-[#F8F8F8]`
|
||||
- 动画：`SealStamp` 包裹 Badge（delay=0.1），`InkReveal` 包裹 h1（delay=0.2）、描述（delay=0.4）、CTA 按钮（delay=0.6）
|
||||
- CTA：`RippleButton` 主按钮"了解服务详情" + outline 次按钮"免费咨询"
|
||||
- 滚动指示器：`FloatingElement` + ChevronDown
|
||||
|
||||
---
|
||||
|
||||
## 任务 3：核心业务 — 挑战 Section
|
||||
|
||||
**文件：**
|
||||
- 创建：`src/components/services/service-challenges-section.tsx`
|
||||
|
||||
- [ ] **步骤 1：创建 ServiceChallengesSection 组件**
|
||||
|
||||
- Props: `{ service: Service }`
|
||||
- 背景：`bg-[#F8F8F8]`（灰色交替背景）
|
||||
- 标题区：`ScrollReveal` + `slideInLeftVariants` + 朱砂红装饰线
|
||||
- 卡片网格：`StaggerContainer` + `StaggerItem` 包裹 2x2 网格
|
||||
- 每张卡片：`InkCard`（hoverScale=1.02, hoverShadow 带红色调）
|
||||
- 卡片内容：挑战标题 + 描述
|
||||
|
||||
---
|
||||
|
||||
## 任务 4：核心业务 — 功能 Section
|
||||
|
||||
**文件：**
|
||||
- 创建：`src/components/services/service-features-section.tsx`
|
||||
|
||||
- [ ] **步骤 1：创建 ServiceFeaturesSection 组件**
|
||||
|
||||
- Props: `{ service: Service }`
|
||||
- 背景：`bg-white`
|
||||
- 标题区：`ScrollReveal` + `inkRevealVariants`
|
||||
- 概述文字：`InkReveal`（delay=0.2）
|
||||
- 功能列表：`StaggerContainer` + `StaggerItem`，每项用 `CheckCircle2` 图标 + `FadeUp`
|
||||
|
||||
---
|
||||
|
||||
## 任务 5：核心业务 — 流程 Section
|
||||
|
||||
**文件：**
|
||||
- 创建：`src/components/services/service-process-section.tsx`
|
||||
|
||||
- [ ] **步骤 1：创建 ServiceProcessSection 组件**
|
||||
|
||||
- Props: `{ service: Service }`
|
||||
- 背景：`bg-[#F8F8F8]`
|
||||
- 标题区：`ScrollReveal` + `inkRevealVariants` 居中
|
||||
- 步骤列表：`StaggerContainer`（staggerDelay=0.15）+ `StaggerItem`
|
||||
- 每步：`SealStamp` 编号圆形 + `FadeUp` 标题描述 + 渐变连接线（`w-0.5 h-16 bg-gradient-to-b from-[#C41E3A]/40 to-[#C41E3A]/10`，最后一步无连接线）
|
||||
- 文本解析：中文冒号 `：` 分隔标题和描述
|
||||
|
||||
---
|
||||
|
||||
## 任务 6：核心业务 — 成果 Section
|
||||
|
||||
**文件：**
|
||||
- 创建：`src/components/services/service-outcomes-section.tsx`
|
||||
|
||||
- [ ] **步骤 1：创建 ServiceOutcomesSection 组件**
|
||||
|
||||
- Props: `{ service: Service }`
|
||||
- 背景：`bg-white`
|
||||
- 标题区：`ScrollReveal` + `slideInLeftVariants`
|
||||
- 数据卡片：`StaggerContainer` + `StaggerItem` 包裹 3 列网格
|
||||
- 每张卡片：`InkCard` + `CountUp` 数字动画（从 outcomes.value 提取数字）+ 渐变色文字
|
||||
- Benefits 汇总：底部 `InkReveal` 包裹 benefits 文本
|
||||
|
||||
---
|
||||
|
||||
## 任务 7：核心业务 — 案例 Section
|
||||
|
||||
**文件：**
|
||||
- 创建：`src/components/services/service-cases-section.tsx`
|
||||
|
||||
- [ ] **步骤 1：创建 ServiceCasesSection 组件**
|
||||
|
||||
- Props: 无（内部从 `CASES` 常量获取数据）
|
||||
- 背景：`bg-[#F8F8F8]`
|
||||
- 标题区：`ScrollReveal` + `slideInLeftVariants`
|
||||
- 案例网格：`StaggerContainer` + `StaggerItem` 包裹 2 列网格
|
||||
- 每张卡片：`InkCard` + Badge 行业标签 + 标题 + 描述 + hover 效果
|
||||
|
||||
---
|
||||
|
||||
## 任务 8：核心业务 — CTA Section
|
||||
|
||||
**文件：**
|
||||
- 创建：`src/components/services/service-cta-section.tsx`
|
||||
|
||||
- [ ] **步骤 1：创建 ServiceCTASection 组件**
|
||||
|
||||
- Props: 无
|
||||
- 背景：`bg-gradient-to-r from-[#C41E3A] to-[#E85D75]`（红色渐变）
|
||||
- 装饰：两个 `FloatingElement` 圆形（右上 280px + 左下 220px）
|
||||
- 内容：`InkReveal` 标题 + `FadeUp` 描述 + `FadeUp` 按钮组
|
||||
- 按钮：`RippleButton` 主按钮"开始您的转型之旅" + outline 次按钮"查看其他服务"
|
||||
|
||||
---
|
||||
|
||||
## 任务 9：核心业务 — 独立 Header/Footer
|
||||
|
||||
**文件：**
|
||||
- 创建：`src/components/layout/service-header.tsx`
|
||||
- 创建：`src/components/layout/service-footer.tsx`
|
||||
|
||||
- [ ] **步骤 1：创建 ServiceHeader**
|
||||
|
||||
参照 `product-header.tsx`：
|
||||
- Logo + "返回主站"按钮
|
||||
- 滚动时 `bg-white/90 backdrop-blur-xl`
|
||||
- `motion.header` 从顶部滑入动画
|
||||
- 区别：CTA 文案改为"免费咨询"
|
||||
|
||||
- [ ] **步骤 2：创建 ServiceFooter**
|
||||
|
||||
参照 `product-footer.tsx`：
|
||||
- 顶部装饰线 + CTA 区域 + 底部信息
|
||||
- 锚点导航改为服务相关（服务概览/面临挑战/服务流程/预期成果/相关案例）
|
||||
- `RippleButton` + `FloatingElement`
|
||||
|
||||
---
|
||||
|
||||
## 任务 10：核心业务 — 重构详情页
|
||||
|
||||
**文件：**
|
||||
- 修改：`src/app/(marketing)/services/[id]/client.tsx`
|
||||
- 修改：`src/app/(marketing)/services/[id]/page.tsx`
|
||||
- 修改：`src/app/(marketing)/layout.tsx`
|
||||
|
||||
- [ ] **步骤 1：重构 client.tsx**
|
||||
|
||||
将当前的单文件 5 板块替换为 7 个 dynamic 懒加载 Section 组件：
|
||||
```tsx
|
||||
const ServiceHeroSection = dynamic(() => import('@/components/services/service-hero-section'), { ssr: false });
|
||||
const ServiceChallengesSection = dynamic(() => import('@/components/services/service-challenges-section'), { ssr: false });
|
||||
const ServiceFeaturesSection = dynamic(() => import('@/components/services/service-features-section'), { ssr: false });
|
||||
const ServiceProcessSection = dynamic(() => import('@/components/services/service-process-section'), { ssr: false });
|
||||
const ServiceOutcomesSection = dynamic(() => import('@/components/services/service-outcomes-section'), { ssr: false });
|
||||
const ServiceCasesSection = dynamic(() => import('@/components/services/service-cases-section'), { ssr: false });
|
||||
const ServiceCTASection = dynamic(() => import('@/components/services/service-cta-section'), { ssr: false });
|
||||
```
|
||||
渲染顺序：Hero → Challenges → Features → Process → Outcomes → Cases → CTA
|
||||
|
||||
- [ ] **步骤 2：修改 layout.tsx 添加服务详情独立布局**
|
||||
|
||||
在 `isProductDetailPage` 逻辑旁添加 `isServiceDetailPage` 判断：
|
||||
- 路径匹配 `/services/[id]` 时使用 `ServiceHeader` + `ServiceFooter`
|
||||
- 其他页面保持 `Header` + `Footer`
|
||||
|
||||
- [ ] **步骤 3：修改 page.tsx 确保数据传递正确**
|
||||
|
||||
确认 `generateStaticParams` 和 `generateMetadata` 正常工作，新字段（challenges, outcomes）正确序列化传递。
|
||||
|
||||
---
|
||||
|
||||
## 任务 11：解决方案 — 拆分模块组件
|
||||
|
||||
**文件：**
|
||||
- 创建：`src/components/solutions/consulting-section.tsx`
|
||||
- 创建：`src/components/solutions/tech-solution-section.tsx`
|
||||
- 创建：`src/components/solutions/accompany-section.tsx`
|
||||
|
||||
- [ ] **步骤 1：创建 ConsultingSection（参谋伙伴）**
|
||||
|
||||
- Props: 无（内部硬编码内容，或从常量获取）
|
||||
- 背景：`bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20`
|
||||
- 动画升级：`InkReveal` 包裹标题（delay=0），`FadeUp` 包裹描述段落（delay=0.1/0.2/0.3），`StaggerContainer` + `StaggerItem` 包裹核心价值点网格
|
||||
- 保持现有内容和布局结构不变
|
||||
|
||||
- [ ] **步骤 2：创建 TechSolutionSection（技术伙伴）**
|
||||
|
||||
同上模式，delay 递增 0.2。
|
||||
|
||||
- [ ] **步骤 3：创建 AccompanySection（同行伙伴）**
|
||||
|
||||
同上模式，delay 递增 0.4。
|
||||
|
||||
---
|
||||
|
||||
## 任务 12：解决方案 — 重构页面
|
||||
|
||||
**文件：**
|
||||
- 修改：`src/app/(marketing)/solutions/page.tsx`
|
||||
|
||||
- [ ] **步骤 1：重构 solutions/page.tsx**
|
||||
|
||||
将 3 个内联 `motion.section` 替换为 dynamic 懒加载的独立组件：
|
||||
```tsx
|
||||
const ConsultingSection = dynamic(() => import('@/components/solutions/consulting-section'), { ssr: false });
|
||||
const TechSolutionSection = dynamic(() => import('@/components/solutions/tech-solution-section'), { ssr: false });
|
||||
const AccompanySection = dynamic(() => import('@/components/solutions/accompany-section'), { ssr: false });
|
||||
```
|
||||
保持 `MethodologySection` 和底部 CTA 区域不变。
|
||||
|
||||
---
|
||||
|
||||
## 任务 13：验证
|
||||
|
||||
- [ ] **步骤 1：构建验证**
|
||||
|
||||
运行 `npm run build`，确认无 TypeScript 错误、无导入错误。
|
||||
|
||||
- [ ] **步骤 2：页面验证**
|
||||
|
||||
启动 dev server，逐页检查：
|
||||
- `/services` 列表页正常渲染
|
||||
- `/services/software` 详情页：7 个 Section 全部渲染，动画正常
|
||||
- `/services/data` 详情页：同上
|
||||
- `/services/consulting` 详情页：同上
|
||||
- `/services/solutions` 详情页：同上
|
||||
- `/solutions` 页面：3 个模块全部渲染，动画正常
|
||||
- 独立 Header/Footer 在服务详情页正确显示
|
||||
- 主站 Header/Footer 在其他页面正确显示
|
||||
|
||||
- [ ] **步骤 3：Commit**
|
||||
|
||||
```bash
|
||||
git add -A
|
||||
git commit -m "feat: 升级核心业务和解决方案页面设计，对齐产品服务设计体系
|
||||
|
||||
- 核心业务详情页拆分为 7 个独立 Section 组件
|
||||
- 解决方案页拆分为 3 个独立模块组件
|
||||
- 全面接入动画组件库（InkReveal/SealStamp/InkCard/CountUp 等）
|
||||
- Hero 区域添加 InkBackground + DataParticleFlow 背景特效
|
||||
- 服务详情页采用独立 Header/Footer 布局
|
||||
- 服务数据结构补全 challenges 和 outcomes 字段
|
||||
- 所有组件使用 dynamic 懒加载"
|
||||
```
|
||||
@@ -0,0 +1,428 @@
|
||||
# 移除联系电话和更新 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 执行任务，批量执行并设有检查点
|
||||
|
||||
**选哪种方式？**
|
||||
@@ -0,0 +1,671 @@
|
||||
# 前沿技术升级 Phase 1 实现计划：View Transitions + SVG drawSVG + Container Queries
|
||||
|
||||
> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。
|
||||
|
||||
**目标：** 在不改变现有静态导出架构的前提下，引入 View Transitions API 实现跨页面流畅过渡、SVG 路径动画实现品牌标题毛笔书写效果、Container Queries 实现组件级响应式布局。
|
||||
|
||||
**架构：** 三项技术均为渐进增强——View Transitions 作为浏览器原生 API 零运行时依赖；SVG drawSVG 基于 GSAP 的 SVG 路径动画插件，仅在品牌标题组件中引入；Container Queries 为纯 CSS 特性，替换现有媒体查询驱动的组件布局。三项改动互不耦合，可独立交付。
|
||||
|
||||
**技术栈：** React 19.2 View Transitions API、GSAP 3 + DrawSVGPlugin、CSS Container Queries、Next.js 16 App Router
|
||||
|
||||
---
|
||||
|
||||
## 文件结构
|
||||
|
||||
### 新建文件
|
||||
| 文件 | 职责 |
|
||||
|------|------|
|
||||
| `src/components/ui/view-transition.tsx` | View Transition 封装组件，提供声明式 API |
|
||||
| `src/components/ui/calligraphy-title.tsx` | 品牌标题 SVG 书写动画组件 |
|
||||
| `src/components/ui/calligraphy-title.test.tsx` | 品牌标题组件测试 |
|
||||
| `src/components/ui/view-transition.test.tsx` | View Transition 组件测试 |
|
||||
| `public/brand/ruixin-zhiyuan.svg` | "睿新致遠" SVG 路径数据 |
|
||||
|
||||
### 修改文件
|
||||
| 文件 | 变更内容 |
|
||||
|------|---------|
|
||||
| `src/app/(marketing)/layout.tsx` | 包裹 ViewTransition，实现跨页面过渡 |
|
||||
| `src/components/sections/hero-section.tsx` | 替换 HeroTitle 为 CalligraphyTitle |
|
||||
| `src/components/sections/hero-section-atoms.tsx` | 移除旧 HeroTitle，改用 CalligraphyTitle |
|
||||
| `src/components/ui/animated-card.tsx` | 添加 Container Query 支持 |
|
||||
| `src/components/sections/products-section.tsx` | 产品卡片容器添加 container-type |
|
||||
| `src/components/sections/services-section.tsx` | 服务卡片容器添加 container-type |
|
||||
| `src/app/globals.css` | 添加 View Transition 关键帧、Container Query 样式 |
|
||||
| `package.json` | 添加 gsap 依赖 |
|
||||
|
||||
---
|
||||
|
||||
## 任务 1：View Transitions API 基础封装
|
||||
|
||||
**文件：**
|
||||
- 创建：`src/components/ui/view-transition.tsx`
|
||||
- 创建：`src/components/ui/view-transition.test.tsx`
|
||||
|
||||
- [ ] **步骤 1：编写失败的测试**
|
||||
|
||||
```tsx
|
||||
// src/components/ui/view-transition.test.tsx
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { ViewTransitionWrapper } from './view-transition';
|
||||
|
||||
describe('ViewTransitionWrapper', () => {
|
||||
it('renders children when View Transitions API is not supported', () => {
|
||||
const originalStartViewTransition = document.startViewTransition;
|
||||
// @ts-expect-error - testing fallback
|
||||
document.startViewTransition = undefined;
|
||||
|
||||
render(
|
||||
<ViewTransitionWrapper name="hero-title">
|
||||
<h1>Test Content</h1>
|
||||
</ViewTransitionWrapper>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Test Content')).toBeInTheDocument();
|
||||
|
||||
// @ts-expect-error - restore
|
||||
document.startViewTransition = originalStartViewTransition;
|
||||
});
|
||||
|
||||
it('applies view-transition-name style when name prop is provided', () => {
|
||||
render(
|
||||
<ViewTransitionWrapper name="hero-title">
|
||||
<h1>Test Content</h1>
|
||||
</ViewTransitionWrapper>
|
||||
);
|
||||
|
||||
const element = screen.getByText('Test Content').parentElement;
|
||||
expect(element?.style.viewTransitionName).toBe('hero-title');
|
||||
});
|
||||
|
||||
it('renders without name prop (no view-transition-name)', () => {
|
||||
render(
|
||||
<ViewTransitionWrapper>
|
||||
<h1>Test Content</h1>
|
||||
</ViewTransitionWrapper>
|
||||
);
|
||||
|
||||
const element = screen.getByText('Test Content').parentElement;
|
||||
expect(element?.style.viewTransitionName).toBe('');
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
- [ ] **步骤 2：运行测试验证失败**
|
||||
|
||||
运行：`npx vitest run src/components/ui/view-transition.test.tsx`
|
||||
预期：FAIL — 模块 `./view-transition` 不存在
|
||||
|
||||
- [ ] **步骤 3：编写最少实现代码**
|
||||
|
||||
```tsx
|
||||
// src/components/ui/view-transition.tsx
|
||||
'use client';
|
||||
|
||||
import { type ReactNode, type CSSProperties } from 'react';
|
||||
|
||||
interface ViewTransitionWrapperProps {
|
||||
children: ReactNode;
|
||||
name?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ViewTransitionWrapper({
|
||||
children,
|
||||
name,
|
||||
className = '',
|
||||
}: ViewTransitionWrapperProps) {
|
||||
const style: CSSProperties = name
|
||||
? { viewTransitionName: name }
|
||||
: {};
|
||||
|
||||
return (
|
||||
<div style={style} className={className}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **步骤 4：运行测试验证通过**
|
||||
|
||||
运行：`npx vitest run src/components/ui/view-transition.test.tsx`
|
||||
预期：PASS
|
||||
|
||||
- [ ] **步骤 5：Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/ui/view-transition.tsx src/components/ui/view-transition.test.tsx
|
||||
git commit -m "feat: add ViewTransitionWrapper component with progressive enhancement"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 任务 2：View Transitions 跨页面过渡集成
|
||||
|
||||
**文件：**
|
||||
- 修改：`src/app/(marketing)/layout.tsx`
|
||||
- 修改：`src/app/globals.css`
|
||||
|
||||
- [ ] **步骤 1：在 globals.css 添加 View Transition 关键帧**
|
||||
|
||||
在 `src/app/globals.css` 的 `@layer base` 块末尾添加：
|
||||
|
||||
```css
|
||||
/* View Transitions - 跨页面过渡动画 */
|
||||
@keyframes vt-fade-in {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes vt-fade-out {
|
||||
from { opacity: 1; transform: translateY(0); }
|
||||
to { opacity: 0; transform: translateY(-8px); }
|
||||
}
|
||||
|
||||
@keyframes vt-hero-enter {
|
||||
from { opacity: 0; clip-path: circle(0% at 50% 50%); }
|
||||
to { opacity: 1; clip-path: circle(75% at 50% 50%); }
|
||||
}
|
||||
|
||||
::view-transition-old(root) {
|
||||
animation: vt-fade-out 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
::view-transition-new(root) {
|
||||
animation: vt-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
::view-transition-old(hero-title) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
::view-transition-new(hero-title) {
|
||||
animation: vt-hero-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation: none !important;
|
||||
}
|
||||
::view-transition-old(hero-title),
|
||||
::view-transition-new(hero-title) {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **步骤 2：修改 MarketingLayout 集成 View Transitions**
|
||||
|
||||
在 `src/app/(marketing)/layout.tsx` 中，将主内容区域包裹 ViewTransitionWrapper：
|
||||
|
||||
找到 `export default function MarketingLayout` 函数，在 children 外层添加 ViewTransitionWrapper：
|
||||
|
||||
```tsx
|
||||
// 在文件顶部添加导入
|
||||
import { ViewTransitionWrapper } from '@/components/ui/view-transition';
|
||||
|
||||
// 在 return 的 children 包裹处，找到所有渲染 children 的位置
|
||||
// 对主站布局的 children 添加 ViewTransitionWrapper：
|
||||
<ViewTransitionWrapper name="page-content">
|
||||
{children}
|
||||
</ViewTransitionWrapper>
|
||||
|
||||
// 对产品详情页布局的 children 添加：
|
||||
<ViewTransitionWrapper name="product-content">
|
||||
{children}
|
||||
</ViewTransitionWrapper>
|
||||
```
|
||||
|
||||
- [ ] **步骤 3：在 HeroSection 中标记共享元素**
|
||||
|
||||
修改 `src/components/sections/hero-section.tsx`，对品牌标题添加 view-transition-name：
|
||||
|
||||
找到 HeroTitle 的渲染位置，在其外层包裹：
|
||||
|
||||
```tsx
|
||||
<ViewTransitionWrapper name="hero-title">
|
||||
<HeroTitle isVisible={isVisible} />
|
||||
</ViewTransitionWrapper>
|
||||
```
|
||||
|
||||
- [ ] **步骤 4：验证 View Transitions 工作正常**
|
||||
|
||||
运行：`npm run dev`
|
||||
操作：在首页和各子页面之间导航，观察页面过渡动画
|
||||
预期：页面切换时有淡入淡出效果，品牌标题有圆形展开动画
|
||||
|
||||
- [ ] **步骤 5：Commit**
|
||||
|
||||
```bash
|
||||
git add src/app/globals.css src/app/\(marketing\)/layout.tsx src/components/sections/hero-section.tsx
|
||||
git commit -m "feat: integrate View Transitions API for cross-page transitions"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 任务 3：GSAP 安装与 SVG 品牌标题路径准备
|
||||
|
||||
**文件：**
|
||||
- 创建：`public/brand/ruixin-zhiyuan.svg`
|
||||
|
||||
- [ ] **步骤 1：安装 GSAP**
|
||||
|
||||
运行：`npm install gsap`
|
||||
|
||||
- [ ] **步骤 2：创建"睿新致遠"SVG 路径文件**
|
||||
|
||||
将品牌标题转为 SVG path 数据。由于青柳隷書字体已内嵌，需要用字体渲染后提取路径。
|
||||
|
||||
创建 `public/brand/ruixin-zhiyuan.svg`：
|
||||
|
||||
```svg
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 200" fill="none">
|
||||
<!-- 睿 -->
|
||||
<path class="stroke-1" d="M80,40 L80,160 M50,60 L110,60 M50,100 L110,100 M40,140 L120,140 M50,40 L50,160 M110,40 L110,160" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<!-- 新 -->
|
||||
<path class="stroke-2" d="M200,40 L200,160 M170,60 L230,60 M170,100 L230,100 M160,140 L240,140 M170,40 L170,160 M230,40 L230,160 M200,100 L230,140" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<!-- 致 -->
|
||||
<path class="stroke-3" d="M320,40 L320,160 M290,60 L350,60 M290,100 L350,100 M280,140 L360,140 M290,40 L290,160 M350,40 L350,160" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<!-- 遠 -->
|
||||
<path class="stroke-4" d="M440,40 L440,160 M410,60 L470,60 M410,100 L470,100 M400,140 L480,140 M410,40 L410,160 M470,40 L470,160 M440,100 L470,140 M400,80 L440,120" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
</svg>
|
||||
```
|
||||
|
||||
> **注意**：上述 SVG 为占位骨架。实际生产需使用字体转 SVG 工具（如 opentype.js 或在线工具 text-to-svg）从青柳隷書字体提取精确路径。此步骤在实现时需用脚本从 `src/app/fonts/AoyagiReisho.ttf` 提取。
|
||||
|
||||
- [ ] **步骤 3：验证 SVG 可访问**
|
||||
|
||||
运行：`npm run dev`
|
||||
访问：`http://localhost:3000/brand/ruixin-zhiyuan.svg`
|
||||
预期：SVG 文件可正常加载
|
||||
|
||||
- [ ] **步骤 4：Commit**
|
||||
|
||||
```bash
|
||||
git add package.json package-lock.json public/brand/ruixin-zhiyuan.svg
|
||||
git commit -m "feat: add GSAP dependency and brand title SVG path data"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 任务 4：CalligraphyTitle 组件实现
|
||||
|
||||
**文件：**
|
||||
- 创建：`src/components/ui/calligraphy-title.tsx`
|
||||
- 创建：`src/components/ui/calligraphy-title.test.tsx`
|
||||
|
||||
- [ ] **步骤 1：编写失败的测试**
|
||||
|
||||
```tsx
|
||||
// src/components/ui/calligraphy-title.test.tsx
|
||||
import { render, screen, act } from '@testing-library/react';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { CalligraphyTitle } from './calligraphy-title';
|
||||
|
||||
describe('CalligraphyTitle', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers();
|
||||
});
|
||||
|
||||
it('renders the title text as fallback', () => {
|
||||
render(<CalligraphyTitle text="睿新致遠" />);
|
||||
expect(screen.getByText('睿新致遠')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies brand font family', () => {
|
||||
render(<CalligraphyTitle text="睿新致遠" />);
|
||||
const element = screen.getByText('睿新致遠');
|
||||
expect(element.style.fontFamily).toContain('Aoyagi Reisho');
|
||||
});
|
||||
|
||||
it('respects reduced motion preference', () => {
|
||||
const matchMediaSpy = vi.spyOn(window, 'matchMedia').mockImplementation(
|
||||
(query: string) => ({
|
||||
matches: query === '(prefers-reduced-motion: reduce)',
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: vi.fn(),
|
||||
removeListener: vi.fn(),
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
dispatchEvent: vi.fn(),
|
||||
})
|
||||
);
|
||||
|
||||
render(<CalligraphyTitle text="睿新致遠" />);
|
||||
const element = screen.getByText('睿新致遠');
|
||||
expect(element).toHaveStyle({ opacity: '1' });
|
||||
|
||||
matchMediaSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<CalligraphyTitle text="睿新致遠" className="custom-class" />);
|
||||
const element = screen.getByText('睿新致遠').closest('.custom-class');
|
||||
expect(element).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
- [ ] **步骤 2：运行测试验证失败**
|
||||
|
||||
运行：`npx vitest run src/components/ui/calligraphy-title.test.tsx`
|
||||
预期：FAIL — 模块 `./calligraphy-title` 不存在
|
||||
|
||||
- [ ] **步骤 3：编写最少实现代码**
|
||||
|
||||
```tsx
|
||||
// src/components/ui/calligraphy-title.tsx
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import { gsap } from 'gsap';
|
||||
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin';
|
||||
|
||||
gsap.registerPlugin(DrawSVGPlugin);
|
||||
|
||||
interface CalligraphyTitleProps {
|
||||
text: string;
|
||||
className?: string;
|
||||
duration?: number;
|
||||
stagger?: number;
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
export function CalligraphyTitle({
|
||||
text,
|
||||
className = '',
|
||||
duration = 2.5,
|
||||
stagger = 0.4,
|
||||
delay = 0.3,
|
||||
}: CalligraphyTitleProps) {
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
setPrefersReducedMotion(mq.matches);
|
||||
|
||||
const handler = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches);
|
||||
mq.addEventListener('change', handler);
|
||||
return () => mq.removeEventListener('change', handler);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (prefersReducedMotion || !svgRef.current) return;
|
||||
|
||||
const paths = svgRef.current.querySelectorAll('path');
|
||||
if (paths.length === 0) return;
|
||||
|
||||
gsap.set(paths, { drawSVG: '0%' });
|
||||
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.fromTo(
|
||||
paths,
|
||||
{ drawSVG: '0%' },
|
||||
{
|
||||
drawSVG: '100%',
|
||||
duration,
|
||||
stagger,
|
||||
delay,
|
||||
ease: 'power2.inOut',
|
||||
}
|
||||
);
|
||||
}, svgRef);
|
||||
|
||||
return () => ctx.revert();
|
||||
}, [prefersReducedMotion, duration, stagger, delay]);
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className={`calligraphy-title ${className}`}>
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox="0 0 800 200"
|
||||
className="w-full h-auto"
|
||||
aria-hidden="true"
|
||||
style={{ display: prefersReducedMotion ? 'none' : 'block' }}
|
||||
>
|
||||
<use href="/brand/ruixin-zhiyuan.svg#strokes" />
|
||||
</svg>
|
||||
<span
|
||||
className={prefersReducedMotion ? '' : 'sr-only'}
|
||||
style={{
|
||||
fontFamily: "var(--font-aoyagi-reisho), 'Aoyagi Reisho', 'Ma Shan Zheng', serif",
|
||||
fontWeight: 'normal',
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **步骤 4：运行测试验证通过**
|
||||
|
||||
运行：`npx vitest run src/components/ui/calligraphy-title.test.tsx`
|
||||
预期：PASS
|
||||
|
||||
- [ ] **步骤 5：Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/ui/calligraphy-title.tsx src/components/ui/calligraphy-title.test.tsx
|
||||
git commit -m "feat: add CalligraphyTitle component with GSAP DrawSVG animation"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 任务 5：集成 CalligraphyTitle 到 Hero 区域
|
||||
|
||||
**文件：**
|
||||
- 修改：`src/components/sections/hero-section-atoms.tsx`
|
||||
- 修改：`src/components/sections/hero-section.tsx`
|
||||
|
||||
- [ ] **步骤 1：替换 HeroTitle 组件**
|
||||
|
||||
在 `src/components/sections/hero-section-atoms.tsx` 中，修改 `HeroTitle` 函数：
|
||||
|
||||
```tsx
|
||||
// 替换现有 HeroTitle 实现
|
||||
import { CalligraphyTitle } from '@/components/ui/calligraphy-title';
|
||||
|
||||
export function HeroTitle(_props: HeroContentProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
if (shouldReduceMotion) {
|
||||
return (
|
||||
<h1
|
||||
id="hero-heading"
|
||||
className="text-5xl sm:text-6xl lg:text-7xl tracking-tight mb-6"
|
||||
style={{
|
||||
fontFamily: "var(--font-aoyagi-reisho), 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', serif",
|
||||
fontWeight: 'normal',
|
||||
WebkitFontSmoothing: 'antialiased',
|
||||
MozOsxFontSmoothing: 'grayscale',
|
||||
textRendering: 'optimizeLegibility',
|
||||
}}
|
||||
>
|
||||
{COMPANY_INFO.shortName}
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CalligraphyTitle
|
||||
text={COMPANY_INFO.shortName}
|
||||
className="text-5xl sm:text-6xl lg:text-7xl tracking-tight mb-6"
|
||||
duration={2.5}
|
||||
stagger={0.4}
|
||||
delay={0.3}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **步骤 2：移除旧的 InkReveal 包裹**
|
||||
|
||||
在 `src/components/sections/hero-section-atoms.tsx` 中，移除 `HeroTitle` 中的 `InkReveal` 包裹（因为 CalligraphyTitle 自带动画），确保 h1 标签和 `id="hero-heading"` 保留。
|
||||
|
||||
- [ ] **步骤 3：验证 Hero 标题动画效果**
|
||||
|
||||
运行：`npm run dev`
|
||||
访问：`http://localhost:3000`
|
||||
预期：品牌标题"睿新致遠"以毛笔书写动画逐笔呈现
|
||||
|
||||
- [ ] **步骤 4：Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/sections/hero-section-atoms.tsx src/components/sections/hero-section.tsx
|
||||
git commit -m "feat: replace HeroTitle with CalligraphyTitle for brush writing animation"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 任务 6：Container Queries 实现
|
||||
|
||||
**文件：**
|
||||
- 修改：`src/components/ui/animated-card.tsx`
|
||||
- 修改：`src/components/sections/products-section.tsx`
|
||||
- 修改：`src/components/sections/services-section.tsx`
|
||||
- 修改：`src/app/globals.css`
|
||||
|
||||
- [ ] **步骤 1：在 globals.css 添加 Container Query 工具类**
|
||||
|
||||
在 `src/app/globals.css` 的 `@layer utilities` 块中添加：
|
||||
|
||||
```css
|
||||
/* Container Queries */
|
||||
@utility cq-container {
|
||||
container-type: inline-size;
|
||||
container-name: card;
|
||||
}
|
||||
|
||||
@utility cq-container-section {
|
||||
container-type: inline-size;
|
||||
container-name: section;
|
||||
}
|
||||
```
|
||||
|
||||
在 `@layer base` 块之后添加：
|
||||
|
||||
```css
|
||||
/* Container Query 响应式卡片布局 */
|
||||
@container card (min-width: 350px) {
|
||||
.cq-card-horizontal {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@container card (min-width: 500px) {
|
||||
.cq-card-horizontal {
|
||||
grid-template-columns: 180px 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@container section (min-width: 768px) {
|
||||
.cq-section-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@container section (min-width: 1024px) {
|
||||
.cq-section-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **步骤 2：修改 AnimatedCard 添加 container-type**
|
||||
|
||||
在 `src/components/ui/animated-card.tsx` 中，找到 `motion.div` 的 `className`，添加 `cq-container`：
|
||||
|
||||
```tsx
|
||||
// 修改前
|
||||
className={cn('ink-card', className)}
|
||||
|
||||
// 修改后
|
||||
className={cn('ink-card cq-container', className)}
|
||||
```
|
||||
|
||||
- [ ] **步骤 3：修改 ProductsSection 添加容器查询**
|
||||
|
||||
在 `src/components/sections/products-section.tsx` 中，找到产品卡片的 grid 容器 div，添加 `cq-container-section`：
|
||||
|
||||
```tsx
|
||||
// 修改前
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-stretch">
|
||||
|
||||
// 修改后
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-stretch cq-container-section">
|
||||
```
|
||||
|
||||
- [ ] **步骤 4：修改 ServicesSection 添加容器查询**
|
||||
|
||||
在 `src/components/sections/services-section.tsx` 中做同样的修改。
|
||||
|
||||
- [ ] **步骤 5：验证 Container Queries 工作**
|
||||
|
||||
运行：`npm run dev`
|
||||
操作：调整浏览器窗口大小，观察卡片在不同容器宽度下的布局变化
|
||||
预期：卡片在窄容器中单列显示，宽容器中自动切换为多列
|
||||
|
||||
- [ ] **步骤 6：运行全量单元测试**
|
||||
|
||||
运行：`npx vitest run`
|
||||
预期：所有测试通过
|
||||
|
||||
- [ ] **步骤 7：Commit**
|
||||
|
||||
```bash
|
||||
git add src/app/globals.css src/components/ui/animated-card.tsx src/components/sections/products-section.tsx src/components/sections/services-section.tsx
|
||||
git commit -m "feat: add Container Queries for component-level responsive layouts"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 任务 7：Phase 1 集成验证与收尾
|
||||
|
||||
**文件：**
|
||||
- 无新增/修改
|
||||
|
||||
- [ ] **步骤 1：运行完整构建**
|
||||
|
||||
运行：`npm run build`
|
||||
预期：构建成功，无错误
|
||||
|
||||
- [ ] **步骤 2：运行全量测试**
|
||||
|
||||
运行：`npx vitest run`
|
||||
预期：所有测试通过
|
||||
|
||||
- [ ] **步骤 3：运行类型检查**
|
||||
|
||||
运行：`npm run type-check`
|
||||
预期：无类型错误
|
||||
|
||||
- [ ] **步骤 4：运行 Lighthouse 审计**
|
||||
|
||||
运行：`npm run lighthouse:mobile`
|
||||
预期：Performance ≥ 90, Accessibility ≥ 95
|
||||
|
||||
- [ ] **步骤 5：验证渐进增强降级**
|
||||
|
||||
操作：
|
||||
1. 在不支持 View Transitions 的浏览器（如 Firefox < 126）中访问 → 页面正常显示，无过渡动画
|
||||
2. 在不支持 Container Queries 的浏览器中 → 卡片使用原有媒体查询布局
|
||||
3. 开启 `prefers-reduced-motion` → 品牌标题直接显示，无书写动画
|
||||
|
||||
预期：所有降级场景均正常工作
|
||||
|
||||
- [ ] **步骤 6：最终 Commit**
|
||||
|
||||
```bash
|
||||
git add -A
|
||||
git commit -m "chore: Phase 1 integration verification complete"
|
||||
```
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,350 @@
|
||||
{
|
||||
"project": "novalon-website-atlassian-brand-fusion",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-04-30",
|
||||
"status": "approved",
|
||||
"spec": "docs/superpowers/specs/2026-04-30-atlassian-brand-fusion-redesign.md",
|
||||
"plan": "docs/superpowers/plans/2026-04-30-atlassian-brand-fusion-redesign.md",
|
||||
"objective": "借鉴 Atlassian 信息架构，重构 Novalon 首页为收敛但保留印记的品牌融合风格，同步沉淀 6 个核心组件",
|
||||
"architecture": "Next.js 16 App Router + 静态导出。首页从单文件长滚动重构为 6 个独立 Section 组件 + 新导航组件。动效从粒子/水墨收敛为微交互。导航从 8 项平铺改为 4 核心 + 2 下拉。",
|
||||
"techStack": ["Next.js 16", "React 19", "Tailwind CSS 4", "Framer Motion 12", "Lucide React"],
|
||||
"phases": [
|
||||
{
|
||||
"id": "phase-1",
|
||||
"name": "首页重构 + 设计系统基础",
|
||||
"status": "pending",
|
||||
"tasks": [
|
||||
{
|
||||
"id": "task-1",
|
||||
"title": "Design Token 更新",
|
||||
"status": "pending",
|
||||
"priority": "high",
|
||||
"files": {
|
||||
"modify": ["src/app/globals.css"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "1-1", "action": "在 :root 中新增场景色变量 (--color-challenge-isolation/growth/compliance 及 hover 变体)", "status": "pending" },
|
||||
{ "id": "1-2", "action": "验证 CSS 变量可用 (npx tsc --noEmit)", "status": "pending" },
|
||||
{ "id": "1-3", "action": "Commit: feat: add challenge scenario color tokens to design system", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-2",
|
||||
"title": "导航常量重构",
|
||||
"status": "pending",
|
||||
"priority": "high",
|
||||
"files": {
|
||||
"create": ["src/lib/constants/navigation.test.ts"],
|
||||
"modify": ["src/lib/constants/navigation.ts", "src/lib/constants/index.ts"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "2-1", "action": "编写失败的测试 (NAVIGATION_V2 + MEGA_DROPDOWN_DATA)", "status": "pending" },
|
||||
{ "id": "2-2", "action": "运行测试验证失败", "status": "pending" },
|
||||
{ "id": "2-3", "action": "实现 NavigationItemV2 + MegaDropdownItem + MegaDropdownData 类型及 NAVIGATION_V2 + MEGA_DROPDOWN_DATA 常量", "status": "pending" },
|
||||
{ "id": "2-4", "action": "更新 index.ts 导出", "status": "pending" },
|
||||
{ "id": "2-5", "action": "运行测试验证通过", "status": "pending" },
|
||||
{ "id": "2-6", "action": "Commit: feat: add NAVIGATION_V2 and MEGA_DROPDOWN_DATA", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-3",
|
||||
"title": "MegaDropdown 组件",
|
||||
"status": "pending",
|
||||
"priority": "high",
|
||||
"files": {
|
||||
"create": ["src/components/layout/mega-dropdown.tsx", "src/components/layout/mega-dropdown.test.tsx"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "3-1", "action": "编写失败的测试 (渲染触发按钮/显示下拉内容/隐藏下拉/点击触发/渲染条目)", "status": "pending" },
|
||||
{ "id": "3-2", "action": "运行测试验证失败", "status": "pending" },
|
||||
{ "id": "3-3", "action": "实现 MegaDropdown 组件 (ChevronDown + AnimatePresence + 2列网格 + 朱砂红左边框)", "status": "pending" },
|
||||
{ "id": "3-4", "action": "运行测试验证通过", "status": "pending" },
|
||||
{ "id": "3-5", "action": "Commit: feat: add MegaDropdown component", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-4",
|
||||
"title": "Header 重构",
|
||||
"status": "pending",
|
||||
"priority": "high",
|
||||
"files": {
|
||||
"modify": ["src/components/layout/header.tsx", "src/components/layout/header.test.tsx"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "4-1", "action": "编写失败的测试 (NAVIGATION_V2 项/旧项不存在)", "status": "pending" },
|
||||
{ "id": "4-2", "action": "运行测试验证失败", "status": "pending" },
|
||||
{ "id": "4-3", "action": "重构 Header: NAVIGATION → NAVIGATION_V2 + MegaDropdown + openDropdown state", "status": "pending" },
|
||||
{ "id": "4-4", "action": "运行测试验证通过", "status": "pending" },
|
||||
{ "id": "4-5", "action": "Commit: feat: refactor Header with NAVIGATION_V2 and MegaDropdown", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-5",
|
||||
"title": "Hero Section 重构",
|
||||
"status": "pending",
|
||||
"priority": "high",
|
||||
"files": {
|
||||
"create": ["src/components/sections/hero-section-v2.tsx", "src/components/sections/hero-section-v2.test.tsx"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "5-1", "action": "编写失败的测试 (品牌标签/书法标题/双CTA/副标题)", "status": "pending" },
|
||||
{ "id": "5-2", "action": "运行测试验证失败", "status": "pending" },
|
||||
{ "id": "5-3", "action": "实现 HeroSectionV2 (暖白渐变+极简装饰圆圈+品牌标签+书法标题+双CTA+FadeUp动效)", "status": "pending" },
|
||||
{ "id": "5-4", "action": "运行测试验证通过", "status": "pending" },
|
||||
{ "id": "5-5", "action": "Commit: feat: add HeroSectionV2 with brand fusion style", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-6",
|
||||
"title": "StatsBar 组件",
|
||||
"status": "pending",
|
||||
"priority": "medium",
|
||||
"files": {
|
||||
"create": ["src/components/ui/stats-bar.tsx", "src/components/ui/stats-bar.test.tsx"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "6-1", "action": "编写失败的测试 (渲染所有数值和标签)", "status": "pending" },
|
||||
{ "id": "6-2", "action": "运行测试验证失败", "status": "pending" },
|
||||
{ "id": "6-3", "action": "实现 StatsBar (3列网格+朱砂红数值+灰色标签)", "status": "pending" },
|
||||
{ "id": "6-4", "action": "运行测试验证通过", "status": "pending" },
|
||||
{ "id": "6-5", "action": "Commit: feat: add StatsBar component", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-7",
|
||||
"title": "社会证明 Section",
|
||||
"status": "pending",
|
||||
"priority": "medium",
|
||||
"files": {
|
||||
"create": ["src/components/sections/social-proof-section.tsx", "src/components/sections/social-proof-section.test.tsx"],
|
||||
"modify": ["src/lib/constants/stats.ts"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "7-1", "action": "在 stats.ts 新增 HOME_STATS 常量", "status": "pending" },
|
||||
{ "id": "7-2", "action": "编写测试 (渲染数据/浅灰背景)", "status": "pending" },
|
||||
{ "id": "7-3", "action": "实现 SocialProofSection (浅灰背景+StatsBar)", "status": "pending" },
|
||||
{ "id": "7-4", "action": "运行测试验证通过", "status": "pending" },
|
||||
{ "id": "7-5", "action": "Commit: feat: add SocialProofSection with HOME_STATS", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-8",
|
||||
"title": "ProductCard 组件",
|
||||
"status": "pending",
|
||||
"priority": "high",
|
||||
"files": {
|
||||
"create": ["src/components/ui/product-card.tsx", "src/components/ui/product-card.test.tsx"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "8-1", "action": "编写失败的测试 (标题/描述/链接/左边框)", "status": "pending" },
|
||||
{ "id": "8-2", "action": "运行测试验证失败", "status": "pending" },
|
||||
{ "id": "8-3", "action": "实现 ProductCard (朱砂红3px左边框+hover提升+阴影)", "status": "pending" },
|
||||
{ "id": "8-4", "action": "运行测试验证通过", "status": "pending" },
|
||||
{ "id": "8-5", "action": "Commit: feat: add ProductCard component", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-9",
|
||||
"title": "产品矩阵 Section",
|
||||
"status": "pending",
|
||||
"priority": "high",
|
||||
"files": {
|
||||
"create": ["src/components/sections/product-matrix-section.tsx", "src/components/sections/product-matrix-section.test.tsx"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "9-1", "action": "编写测试 (标题/4个产品)", "status": "pending" },
|
||||
{ "id": "9-2", "action": "运行测试验证失败", "status": "pending" },
|
||||
{ "id": "9-3", "action": "实现 ProductMatrixSection (白底+2x2网格+PRODUCTS数据)", "status": "pending" },
|
||||
{ "id": "9-4", "action": "运行测试验证通过", "status": "pending" },
|
||||
{ "id": "9-5", "action": "Commit: feat: add ProductMatrixSection", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-10",
|
||||
"title": "ChallengeCard 组件",
|
||||
"status": "pending",
|
||||
"priority": "high",
|
||||
"files": {
|
||||
"create": ["src/components/ui/challenge-card.tsx", "src/components/ui/challenge-card.test.tsx"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "10-1", "action": "编写失败的测试 (图标/标题/副标题/链接)", "status": "pending" },
|
||||
{ "id": "10-2", "action": "运行测试验证失败", "status": "pending" },
|
||||
{ "id": "10-3", "action": "实现 ChallengeCard (场景色背景+hover色变+emoji图标+朱砂红副标题)", "status": "pending" },
|
||||
{ "id": "10-4", "action": "运行测试验证通过", "status": "pending" },
|
||||
{ "id": "10-5", "action": "Commit: feat: add ChallengeCard component", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-11",
|
||||
"title": "挑战场景 Section",
|
||||
"status": "pending",
|
||||
"priority": "high",
|
||||
"files": {
|
||||
"create": ["src/components/sections/challenge-section.tsx", "src/components/sections/challenge-section.test.tsx"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "11-1", "action": "编写测试 (标题/三个挑战卡片)", "status": "pending" },
|
||||
{ "id": "11-2", "action": "运行测试验证失败", "status": "pending" },
|
||||
{ "id": "11-3", "action": "实现 ChallengeSection (暖白背景+三列网格+系统孤岛/增长瓶颈/合规风险)", "status": "pending" },
|
||||
{ "id": "11-4", "action": "运行测试验证通过", "status": "pending" },
|
||||
{ "id": "11-5", "action": "Commit: feat: add ChallengeSection", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-12",
|
||||
"title": "TestimonialBlock 组件",
|
||||
"status": "pending",
|
||||
"priority": "medium",
|
||||
"files": {
|
||||
"create": ["src/components/ui/testimonial-block.tsx", "src/components/ui/testimonial-block.test.tsx"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "12-1", "action": "编写失败的测试 (引言/署名/量化指标)", "status": "pending" },
|
||||
{ "id": "12-2", "action": "运行测试验证失败", "status": "pending" },
|
||||
{ "id": "12-3", "action": "实现 TestimonialBlock (深墨背景+引言+署名+朱砂红数值指标)", "status": "pending" },
|
||||
{ "id": "12-4", "action": "运行测试验证通过", "status": "pending" },
|
||||
{ "id": "12-5", "action": "Commit: feat: add TestimonialBlock component", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-13",
|
||||
"title": "客户成果 Section",
|
||||
"status": "pending",
|
||||
"priority": "medium",
|
||||
"files": {
|
||||
"create": ["src/components/sections/testimonial-section.tsx", "src/components/sections/testimonial-section.test.tsx"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "13-1", "action": "编写测试 (客户成果标签)", "status": "pending" },
|
||||
{ "id": "13-2", "action": "运行测试验证失败", "status": "pending" },
|
||||
{ "id": "13-3", "action": "实现 TestimonialSection (深墨背景+CASES数据+TestimonialBlock)", "status": "pending" },
|
||||
{ "id": "13-4", "action": "运行测试验证通过", "status": "pending" },
|
||||
{ "id": "13-5", "action": "Commit: feat: add TestimonialSection", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-14",
|
||||
"title": "CTASection 组件",
|
||||
"status": "pending",
|
||||
"priority": "medium",
|
||||
"files": {
|
||||
"create": ["src/components/ui/cta-section.tsx", "src/components/ui/cta-section.test.tsx"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "14-1", "action": "编写失败的测试 (标题/副标题/按钮)", "status": "pending" },
|
||||
{ "id": "14-2", "action": "运行测试验证失败", "status": "pending" },
|
||||
{ "id": "14-3", "action": "实现 CTASection (朱砂红渐变+白色描边按钮)", "status": "pending" },
|
||||
{ "id": "14-4", "action": "运行测试验证通过", "status": "pending" },
|
||||
{ "id": "14-5", "action": "Commit: feat: add CTASection component", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-15",
|
||||
"title": "CTA Section 页面级",
|
||||
"status": "pending",
|
||||
"priority": "medium",
|
||||
"files": {
|
||||
"create": ["src/components/sections/cta-section-page.tsx", "src/components/sections/cta-section-page.test.tsx"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "15-1", "action": "编写测试 (标题/副标题内容)", "status": "pending" },
|
||||
{ "id": "15-2", "action": "运行测试验证失败", "status": "pending" },
|
||||
{ "id": "15-3", "action": "实现 CTASectionPage (CTASection 包装+首页特定内容)", "status": "pending" },
|
||||
{ "id": "15-4", "action": "运行测试验证通过", "status": "pending" },
|
||||
{ "id": "15-5", "action": "Commit: feat: add CTASectionPage", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-16",
|
||||
"title": "首页组装",
|
||||
"status": "pending",
|
||||
"priority": "high",
|
||||
"files": {
|
||||
"modify": ["src/app/(marketing)/home-content.tsx"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "16-1", "action": "编写测试 (新Hero/产品矩阵/挑战/CTA)", "status": "pending" },
|
||||
{ "id": "16-2", "action": "运行测试验证失败", "status": "pending" },
|
||||
{ "id": "16-3", "action": "重构 home-content.tsx: 替换为 HeroSectionV2 + SocialProof + ProductMatrix + Challenge + Testimonial + CTA", "status": "pending" },
|
||||
{ "id": "16-4", "action": "运行测试验证通过", "status": "pending" },
|
||||
{ "id": "16-5", "action": "Commit: feat: assemble homepage with new brand-fusion sections", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-17",
|
||||
"title": "废弃动效清理",
|
||||
"status": "pending",
|
||||
"priority": "low",
|
||||
"files": {
|
||||
"modify": ["src/components/effects/index.ts"]
|
||||
},
|
||||
"steps": [
|
||||
{ "id": "17-1", "action": "从 effects/index.ts 移除废弃组件导出 (InkBackground/DataParticleFlow/ParticleGalaxy/MouseInteractiveParticles/FluidWaveBackground/GeometricAbstract/GridLines/AdvancedFloatingEffects)", "status": "pending" },
|
||||
{ "id": "17-2", "action": "验证构建无报错 (npx tsc --noEmit)", "status": "pending" },
|
||||
{ "id": "17-3", "action": "Commit: chore: remove deprecated particle/ink effect exports", "status": "pending" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "task-18",
|
||||
"title": "集成测试与验证",
|
||||
"status": "pending",
|
||||
"priority": "high",
|
||||
"steps": [
|
||||
{ "id": "18-1", "action": "运行全量单元测试 (npx jest --no-coverage)", "status": "pending" },
|
||||
{ "id": "18-2", "action": "运行类型检查 (npx tsc --noEmit)", "status": "pending" },
|
||||
{ "id": "18-3", "action": "运行构建 (npm run build)", "status": "pending" },
|
||||
{ "id": "18-4", "action": "启动开发服务器手动验证 (导航/6个Section/无粒子动效)", "status": "pending" },
|
||||
{ "id": "18-5", "action": "运行 Lighthouse 审计 (Performance≥90, Accessibility≥95)", "status": "pending" },
|
||||
{ "id": "18-6", "action": "最终 Commit: feat: complete Phase 1 of Atlassian-style brand fusion homepage redesign", "status": "pending" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"components": {
|
||||
"new": [
|
||||
{ "name": "MegaDropdown", "path": "src/components/layout/mega-dropdown.tsx", "reuse": ["全站导航"] },
|
||||
{ "name": "ProductCard", "path": "src/components/ui/product-card.tsx", "reuse": ["首页", "产品列表页"] },
|
||||
{ "name": "ChallengeCard", "path": "src/components/ui/challenge-card.tsx", "reuse": ["首页", "解决方案页"] },
|
||||
{ "name": "StatsBar", "path": "src/components/ui/stats-bar.tsx", "reuse": ["首页", "产品页", "关于页"] },
|
||||
{ "name": "TestimonialBlock", "path": "src/components/ui/testimonial-block.tsx", "reuse": ["首页", "案例页", "产品页"] },
|
||||
{ "name": "CTASection", "path": "src/components/ui/cta-section.tsx", "reuse": ["全站通用"] },
|
||||
{ "name": "HeroSectionV2", "path": "src/components/sections/hero-section-v2.tsx", "reuse": ["首页"] },
|
||||
{ "name": "SocialProofSection", "path": "src/components/sections/social-proof-section.tsx", "reuse": ["首页"] },
|
||||
{ "name": "ProductMatrixSection", "path": "src/components/sections/product-matrix-section.tsx", "reuse": ["首页"] },
|
||||
{ "name": "ChallengeSection", "path": "src/components/sections/challenge-section.tsx", "reuse": ["首页"] },
|
||||
{ "name": "TestimonialSection", "path": "src/components/sections/testimonial-section.tsx", "reuse": ["首页"] },
|
||||
{ "name": "CTASectionPage", "path": "src/components/sections/cta-section-page.tsx", "reuse": ["首页"] }
|
||||
],
|
||||
"modify": [
|
||||
{ "name": "Header", "path": "src/components/layout/header.tsx", "change": "集成 MegaDropdown + NAVIGATION_V2" },
|
||||
{ "name": "home-content", "path": "src/app/(marketing)/home-content.tsx", "change": "替换为新 Section 组件" }
|
||||
],
|
||||
"deprecate": [
|
||||
"InkBackground",
|
||||
"DataParticleFlow",
|
||||
"ParticleGalaxy",
|
||||
"MouseInteractiveParticles",
|
||||
"FluidWaveBackground",
|
||||
"GeometricAbstract",
|
||||
"GridLines",
|
||||
"AdvancedFloatingEffects"
|
||||
]
|
||||
},
|
||||
"designDecisions": {
|
||||
"brandDirection": "B — 收敛但保留印记",
|
||||
"deliveryRhythm": "A+C 混合 — 首页驱动的设计系统",
|
||||
"homepageLayout": "方案二 — 品牌融合重构",
|
||||
"animationStrategy": "大幅收敛 — 移除粒子/水墨，保留微交互",
|
||||
"navigationStructure": "4核心+2下拉"
|
||||
},
|
||||
"visualRhythm": ["暖白(Hero)", "浅灰(社会证明)", "白(产品矩阵)", "暖白(挑战场景)", "深墨(客户成果)", "朱砂红(CTA)", "浅灰(Footer)"],
|
||||
"qualityGates": {
|
||||
"unitTests": "all pass",
|
||||
"typeCheck": "no errors",
|
||||
"build": "success",
|
||||
"lighthousePerformance": ">=90",
|
||||
"lighthouseAccessibility": ">=95"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,332 @@
|
||||
# ERP 产品落地页设计规格
|
||||
|
||||
**日期**: 2026-04-24
|
||||
**状态**: 待审查
|
||||
**参考**: Terminal Industries 网站设计风格
|
||||
|
||||
---
|
||||
|
||||
## 1. 概述
|
||||
|
||||
### 1.1 目标
|
||||
|
||||
将 ERP 产品详情页改造为 Terminal 风格的全屏沉浸式落地页，同时保持"水墨科技"品牌基因。
|
||||
|
||||
### 1.2 范围
|
||||
|
||||
- 仅改造 ERP 产品页 (`/products/erp`)
|
||||
- 其他产品页（CRM、CMS、BI）暂不改动，待验证后推广
|
||||
|
||||
### 1.3 设计决策
|
||||
|
||||
| 决策项 | 选择 |
|
||||
|--------|------|
|
||||
| 视觉风格 | 全屏沉浸式（深墨色 + 明暗交替） |
|
||||
| 视频内容 | 暂不添加，使用粒子/水墨动画替代 |
|
||||
| 导航栏 | 动态变色（滚动后变深色毛玻璃） |
|
||||
| 实现方案 | 组件化重构，复用现有动画库 |
|
||||
|
||||
---
|
||||
|
||||
## 2. 页面结构
|
||||
|
||||
### 2.1 整体布局
|
||||
|
||||
```
|
||||
Section 1: 全屏沉浸 Hero [深墨色 #0A0A0A]
|
||||
Section 2: 产品概述 [宣纸白 #FFFFFF]
|
||||
Section 3: 核心功能（滚动叙事） [深墨色 #0A0A0A]
|
||||
Section 4: 产品优势 [宣纸白 #FFFFFF]
|
||||
Section 5: 实施流程 [浅灰 #F5F5F5]
|
||||
Section 6: 技术规格 [宣纸白 #FFFFFF]
|
||||
Section 7: 定价方案 [深墨色 #0A0A0A]
|
||||
Section 8: CTA 横幅 [朱砂红渐变]
|
||||
```
|
||||
|
||||
**明暗节奏**: 深 → 白 → 深 → 白 → 灰 → 白 → 深 → 红
|
||||
|
||||
### 2.2 Section 详细设计
|
||||
|
||||
#### Section 1: 全屏沉浸 Hero
|
||||
|
||||
- **背景**: 深墨色 `#0A0A0A` + 水墨粒子动画（`InkBackground` + `DataParticleFlow`）
|
||||
- **内容**:
|
||||
- 分类标签: "企业软件"（朱砂红背景 `bg-[#C41E3A]/20`）
|
||||
- 产品名称: "睿新ERP管理系统"（白色，大标题）
|
||||
- 价值主张: "集成财务、采购、销售、库存、生产等模块..."（浅灰色）
|
||||
- CTA 按钮: "预约演示"（朱砂红，磁性按钮 `MagneticButton`）
|
||||
- 滚动指示器: 向下箭头动画
|
||||
- **动画**: 入场淡入 + 上移，背景粒子持续运动
|
||||
|
||||
#### Section 2: 产品概述
|
||||
|
||||
- **背景**: 宣纸白 `#FFFFFF`
|
||||
- **内容**: overview 文本
|
||||
- **动画**: 文字逐词揭示（`TextReveal`）
|
||||
|
||||
#### Section 3: 核心功能（滚动叙事）
|
||||
|
||||
- **背景**: 深墨色 `#0A0A0A`
|
||||
- **布局**: 6 个功能分 6 个滚动区块
|
||||
- **每个区块**:
|
||||
- 编号: `01` - `06`（Geist Mono，朱砂红，大号，低透明度作为装饰）
|
||||
- 功能名称: 如"财务管理"
|
||||
- 功能描述: 如"支持总账、应收应付、成本核算..."
|
||||
- 动画区域: 粒子/水墨特效展示
|
||||
- **动画**:
|
||||
- 编号从左侧滑入 + 淡入
|
||||
- 名称逐字揭示
|
||||
- 描述模糊揭示
|
||||
- 动画区域缩放 + 淡入
|
||||
- 整体视差滚动（比页面慢 20%）
|
||||
- **触发**: `useInView` + `amount: 0.5`
|
||||
|
||||
#### Section 4: 产品优势
|
||||
|
||||
- **背景**: 宣纸白 `#FFFFFF`
|
||||
- **布局**: 4 张卡片，2x2 网格
|
||||
- **卡片内容**:
|
||||
- 数据高亮: "30%"、"20%"等（朱砂红，大号）
|
||||
- 描述文字
|
||||
- **动画**: 卡片交错入场（`StaggerReveal` + `StaggerItem`）
|
||||
|
||||
#### Section 5: 实施流程
|
||||
|
||||
- **背景**: 浅灰 `#F5F5F5`
|
||||
- **布局**: 6 步时间线，垂直排列
|
||||
- **每步**:
|
||||
- 编号圆形: 朱砂红背景，白色数字
|
||||
- 步骤文字
|
||||
- 连接线（步骤之间）
|
||||
- **动画**: 滚动触发逐个显现
|
||||
|
||||
#### Section 6: 技术规格
|
||||
|
||||
- **背景**: 宣纸白 `#FFFFFF`
|
||||
- **布局**: 5 项规格，2 列网格
|
||||
- **动画**: 简单淡入
|
||||
|
||||
#### Section 7: 定价方案
|
||||
|
||||
- **背景**: 深墨色 `#0A0A0A`
|
||||
- **布局**: 3 档定价卡片，水平排列
|
||||
- **卡片样式**:
|
||||
- 基础版: 深灰背景，白色文字
|
||||
- 标准版: 朱砂红渐变背景，白色文字，"推荐"标签
|
||||
- 企业版: 深灰背景，白色文字
|
||||
- **动画**: 卡片交错入场
|
||||
|
||||
#### Section 8: CTA 横幅
|
||||
|
||||
- **背景**: 朱砂红渐变 `from-[#C41E3A] to-[#A01830]`
|
||||
- **内容**:
|
||||
- 标题: "准备好提升企业运营效率了吗？"
|
||||
- 按钮: "立即咨询"（白色，磁性按钮）
|
||||
- **动画**: 滚动触发淡入
|
||||
|
||||
---
|
||||
|
||||
## 3. 文件结构
|
||||
|
||||
### 3.1 新增文件
|
||||
|
||||
```
|
||||
src/app/(marketing)/products/[id]/
|
||||
└── product-detail-client.tsx # 客户端组件，组合所有 section
|
||||
|
||||
src/components/products/
|
||||
├── product-hero-section.tsx # Section 1
|
||||
├── product-overview-section.tsx # Section 2
|
||||
├── product-features-section.tsx # Section 3
|
||||
├── product-benefits-section.tsx # Section 4
|
||||
├── product-process-section.tsx # Section 5
|
||||
├── product-specs-section.tsx # Section 6
|
||||
├── product-pricing-section.tsx # Section 7
|
||||
└── product-cta-section.tsx # Section 8
|
||||
```
|
||||
|
||||
### 3.2 修改文件
|
||||
|
||||
```
|
||||
src/app/(marketing)/products/[id]/page.tsx
|
||||
- 保留服务端逻辑（generateStaticParams, generateMetadata）
|
||||
- 导入并渲染 product-detail-client.tsx
|
||||
- 传递产品数据作为 props
|
||||
```
|
||||
|
||||
### 3.3 复用的现有组件
|
||||
|
||||
| 组件 | 路径 | 用途 |
|
||||
|------|------|------|
|
||||
| `ScrollReveal` | `src/components/ui/scroll-animations.tsx` | 滚动揭示 |
|
||||
| `TextReveal` | `src/components/ui/scroll-animations.tsx` | 文字逐词揭示 |
|
||||
| `ParallaxSection` | `src/components/ui/scroll-animations.tsx` | 视差效果 |
|
||||
| `StaggerReveal` | `src/components/ui/scroll-animations.tsx` | 交错动画容器 |
|
||||
| `StaggerItem` | `src/components/ui/scroll-animations.tsx` | 交错动画子项 |
|
||||
| `CounterWithEffect` | `src/lib/animations.tsx` | 数字滚动 |
|
||||
| `MagneticButton` | `src/lib/animations.tsx` | 磁性按钮 |
|
||||
| `BlurReveal` | `src/lib/animations.tsx` | 模糊揭示 |
|
||||
| `InkBackground` | `src/components/effects/ink-decoration.tsx` | 水墨背景 |
|
||||
| `DataParticleFlow` | `src/components/effects/data-particle-flow.tsx` | 粒子流 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 导航栏动态变色
|
||||
|
||||
### 4.1 行为定义
|
||||
|
||||
| 状态 | 背景 | 文字颜色 | Logo |
|
||||
|------|------|---------|------|
|
||||
| Hero 区域内 | 透明 | 白色 | 白色 |
|
||||
| 滚动出 Hero 后 | 深墨毛玻璃 `bg-[#0A0A0A]/90 backdrop-blur-xl` | 白色 | 白色 |
|
||||
|
||||
### 4.2 实现方式
|
||||
|
||||
在 `product-detail-client.tsx` 中：
|
||||
|
||||
```tsx
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 50);
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
```
|
||||
|
||||
通过 Context 或 props 传递 `isScrolled` 状态给 Header 组件，切换导航栏样式。
|
||||
|
||||
### 4.3 注意事项
|
||||
|
||||
- 产品页导航栏始终保持深色系
|
||||
- 用户点击导航返回主站时，导航栏自动恢复白色
|
||||
- 需要修改 `Header` 组件，支持 `variant` prop（`'light' | 'dark'`）
|
||||
|
||||
---
|
||||
|
||||
## 5. 颜色规范
|
||||
|
||||
### 5.1 深色区块
|
||||
|
||||
| 角色 | 色值 | 用途 |
|
||||
|------|------|------|
|
||||
| 背景 | `#0A0A0A` | 深墨色主背景 |
|
||||
| 主文字 | `#FFFFFF` | 标题、重要文字 |
|
||||
| 次文字 | `#B0B0B0` | 描述、辅助文字 |
|
||||
| 强调色 | `#C41E3A` | 编号装饰、CTA |
|
||||
| 卡片背景 | `#1A1A1A` | 定价卡片等 |
|
||||
|
||||
### 5.2 浅色区块
|
||||
|
||||
| 角色 | 色值 | 用途 |
|
||||
|------|------|------|
|
||||
| 背景 | `#FFFFFF` | 宣纸白主背景 |
|
||||
| 主文字 | `#1C1C1C` | 标题、正文 |
|
||||
| 次文字 | `#5C5C5C` | 描述、辅助文字 |
|
||||
| 强调色 | `#C41E3A` | 数据高亮、图标 |
|
||||
| 卡片背景 | `#F5F7FA` | 功能卡片 |
|
||||
|
||||
---
|
||||
|
||||
## 6. 动画规范
|
||||
|
||||
### 6.1 时长
|
||||
|
||||
| 类型 | 时长 | 用途 |
|
||||
|------|------|------|
|
||||
| 快速 | 200ms | hover、微交互 |
|
||||
| 标准 | 500ms | 大部分入场动画 |
|
||||
| 慢速 | 800ms | 大元素、视差 |
|
||||
|
||||
### 6.2 缓动函数
|
||||
|
||||
| 类型 | 缓动 | 用途 |
|
||||
|------|------|------|
|
||||
| 入场 | `ease-out` | 淡入、滑入 |
|
||||
| 退出 | `ease-in` | 淡出、滑出 |
|
||||
| 弹性 | `spring` | 数字滚动、磁性按钮 |
|
||||
|
||||
### 6.3 无障碍
|
||||
|
||||
- 所有动画尊重 `prefers-reduced-motion`
|
||||
- 使用 `useReducedMotion` hook 检测用户偏好
|
||||
- 减少动画时，保留基本淡入效果
|
||||
|
||||
---
|
||||
|
||||
## 7. 性能考虑
|
||||
|
||||
### 7.1 代码分割
|
||||
|
||||
- `product-detail-client.tsx` 使用 `dynamic` 导入，禁用 SSR
|
||||
- 各 section 组件按需加载
|
||||
|
||||
### 7.2 动画优化
|
||||
|
||||
- 使用 `will-change` 提示浏览器优化
|
||||
- 避免同时触发过多动画
|
||||
- 使用 `IntersectionObserver` 替代 `scroll` 事件监听
|
||||
|
||||
### 7.3 图片优化
|
||||
|
||||
- 使用 Next.js `Image` 组件自动优化
|
||||
- 暂无图片需求，后续可扩展
|
||||
|
||||
---
|
||||
|
||||
## 8. 成功标准
|
||||
|
||||
### 8.1 功能验收
|
||||
|
||||
- [ ] ERP 产品页展示所有产品信息
|
||||
- [ ] 8 个 section 按设计顺序渲染
|
||||
- [ ] 所有动画正常触发
|
||||
- [ ] 导航栏动态变色正常
|
||||
- [ ] CTA 按钮链接正确
|
||||
|
||||
### 8.2 性能验收
|
||||
|
||||
- [ ] Lighthouse Performance > 80
|
||||
- [ ] First Contentful Paint < 2s
|
||||
- [ ] 无明显卡顿或闪烁
|
||||
|
||||
### 8.3 无障碍验收
|
||||
|
||||
- [ ] 键盘导航正常
|
||||
- [ ] 屏幕阅读器可访问
|
||||
- [ ] 减少动画偏好生效
|
||||
|
||||
---
|
||||
|
||||
## 9. 后续扩展
|
||||
|
||||
### 9.1 其他产品页
|
||||
|
||||
验证通过后，可将组件复用到 CRM、CMS、BI 产品页：
|
||||
- 创建 `ProductDetailClient` 通用组件
|
||||
- 通过 props 传入产品数据
|
||||
- 保持一致的交互体验
|
||||
|
||||
### 9.2 视频集成
|
||||
|
||||
预留视频播放能力：
|
||||
- 创建 `ProductVideo` 组件
|
||||
- 支持滚动触发播放/暂停
|
||||
- 支持 wide/vert 双版本
|
||||
|
||||
---
|
||||
|
||||
## 10. 风险与缓解
|
||||
|
||||
| 风险 | 影响 | 缓解措施 |
|
||||
|------|------|---------|
|
||||
| 动画性能问题 | 用户体验下降 | 使用 `will-change`、减少同时动画数量 |
|
||||
| 导航栏切换闪烁 | 视觉瑕疵 | 使用 CSS transition 平滑过渡 |
|
||||
| SEO 影响 | 搜索排名下降 | 保留服务端元数据、使用 SSR 首屏 |
|
||||
|
||||
---
|
||||
|
||||
**文档版本**: 1.0
|
||||
**最后更新**: 2026-04-24
|
||||
@@ -0,0 +1,259 @@
|
||||
# 移除联系电话和更新 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`
|
||||
@@ -0,0 +1,187 @@
|
||||
# Atlassian 风格品牌融合重构设计规格
|
||||
|
||||
**日期**: 2026-04-30
|
||||
**状态**: 已审批
|
||||
**参考**: Atlassian 官网设计思路 × Novalon 水墨科技品牌基因
|
||||
|
||||
---
|
||||
|
||||
## 1. 概述
|
||||
|
||||
### 1.1 目标
|
||||
|
||||
借鉴 Atlassian 官网的信息架构和交互模式，重构 Novalon 官网首页，实现"收敛但保留印记"的品牌升级——在保持朱砂红品牌色和书法标题辨识度的前提下，采用更专业、更清晰的白底信息展示风格。
|
||||
|
||||
### 1.2 范围
|
||||
|
||||
- Phase 1：首页重构 + 设计系统基础（本次规格范围）
|
||||
- Phase 2：产品页/服务页迁移（后续）
|
||||
- Phase 3：其余页面 + 设计系统完善（后续）
|
||||
|
||||
### 1.3 设计决策
|
||||
|
||||
| 决策项 | 选择 | 理由 |
|
||||
|--------|------|------|
|
||||
| 品牌方向 | B — 收敛但保留印记 | 专业感与品牌特色兼顾 |
|
||||
| 交付节奏 | A+C 混合 — 首页驱动的设计系统 | 用实际页面需求驱动组件设计 |
|
||||
| 首页布局 | 方案二 — 品牌融合重构 | Atlassian 架构 + Novalon 叙事 |
|
||||
| 动效策略 | 大幅收敛 | 移除粒子/水墨，保留微交互 |
|
||||
| 导航结构 | 4核心+2下拉 | 减少认知负担，产品矩阵预览 |
|
||||
|
||||
---
|
||||
|
||||
## 2. 品牌视觉规范
|
||||
|
||||
### 2.1 色彩（保留现有体系，新增场景色）
|
||||
|
||||
```css
|
||||
/* 保留 */
|
||||
--color-primary: #1C1C1C;
|
||||
--color-brand-primary: #C41E3A;
|
||||
--color-bg-secondary: #FFFBF5;
|
||||
--color-bg-tertiary: #F5F5F5;
|
||||
|
||||
/* 新增场景色 */
|
||||
--color-challenge-isolation: #FEF2F4; /* 系统孤岛 - 红底 */
|
||||
--color-challenge-growth: #FFFBEB; /* 增长瓶颈 - 黄底 */
|
||||
--color-challenge-compliance: #F0FDF4; /* 合规风险 - 绿底 */
|
||||
```
|
||||
|
||||
### 2.2 动效策略
|
||||
|
||||
| 组件 | 策略 | 说明 |
|
||||
|------|------|------|
|
||||
| InkBackground | ❌ 废弃 | 水墨背景不再使用 |
|
||||
| DataParticleFlow | ❌ 废弃 | 粒子动效过于花哨 |
|
||||
| ParticleGalaxy | ❌ 废弃 | 粒子星河 |
|
||||
| MouseInteractiveParticles | ❌ 废弃 | 鼠标交互粒子 |
|
||||
| FluidWaveBackground | ❌ 废弃 | 流体波浪 |
|
||||
| GeometricAbstract | ❌ 废弃 | 几何抽象 |
|
||||
| GridLines | ❌ 废弃 | 网格线 |
|
||||
| AdvancedFloatingEffects | ❌ 废弃 | 高级浮动效果 |
|
||||
| SubtleDots | ✅ 保留 | 微妙圆点符合收敛方向 |
|
||||
| GradientFlow | 🔧 简化 | 保留但降低强度，Hero极淡背景 |
|
||||
| ScrollReveal/FadeUp | ✅ 保留 | 核心滚动交互 |
|
||||
| AnimatedNumber | ✅ 保留 | 数据统计动画 |
|
||||
| SealAnimation | 🔄 重构 | 仅用于品牌标题区 |
|
||||
|
||||
### 2.3 排版
|
||||
|
||||
- 品牌标题：青柳隶书（保留）
|
||||
- 正文/导航：Geist Sans（保留）
|
||||
- 代码/数字：Geist Mono（保留）
|
||||
|
||||
---
|
||||
|
||||
## 3. 首页结构
|
||||
|
||||
### 3.1 整体布局
|
||||
|
||||
```
|
||||
Navigation Logo + 产品▾ + 解决方案▾ + 服务 + 案例 + 关于我们
|
||||
Section 1 Hero（暖白 + 书法标题 + 双CTA + 极简装饰）
|
||||
Section 2 社会证明数据条（三列数字 + 客户Logo墙）
|
||||
Section 3 核心产品矩阵（2×2 卡片 + 朱砂红左边框）
|
||||
Section 4 挑战与场景入口（"您面临什么挑战？"三列痛点卡片）
|
||||
Section 5 客户成果（深墨色背景 + 引言 + 量化数据）
|
||||
Section 6 CTA（朱砂红渐变 + 行动号召）
|
||||
Footer 品牌信息 + 导航 + 联系方式
|
||||
```
|
||||
|
||||
视觉节奏：暖白 → 浅灰 → 白 → 暖白 → **深墨** → 朱砂红 → 浅灰
|
||||
|
||||
### 3.2 导航重设计
|
||||
|
||||
**当前**：8项平铺（首页/核心业务/解决方案/产品服务/成功案例/关于我们/新闻动态/联系）
|
||||
|
||||
**新导航**：
|
||||
- Logo（睿新致遠）
|
||||
- 产品 ▾ → 下拉展示 ERP/CRM/BI/CMS 四产品矩阵
|
||||
- 解决方案 ▾ → 下拉展示制造业/零售/教育/医疗四行业
|
||||
- 服务
|
||||
- 案例
|
||||
- 关于我们（含团队/新闻）
|
||||
- 联系我们
|
||||
|
||||
### 3.3 Section 详细设计
|
||||
|
||||
#### Section 1: Hero
|
||||
|
||||
- **背景**：暖白 `#FFFBF5` → `#FFFFFF` 渐变 + 极简装饰圆圈（1px border, rgba(#C41E3A, 0.08)）
|
||||
- **内容**：
|
||||
- 品牌标签：`NOVALON · 睿新致遠`（8px, letter-spacing: 2px, #C41E3A）
|
||||
- 主标题：`智连未来，成长伙伴`（青柳隶书, 大号, #1C1C1C）
|
||||
- 副标题：`从战略规划到系统落地，陪伴企业完成数字化转型的每一步`（14px, #5C5C5C）
|
||||
- 双CTA：`预约演示`（朱砂红实心）+ `了解方案`（墨黑描边）
|
||||
- **动效**：入场 FadeUp + 极淡 GradientFlow 背景
|
||||
|
||||
#### Section 2: 社会证明
|
||||
|
||||
- **背景**：浅灰 `#F5F5F5`
|
||||
- **内容**：三列数字（200+ 企业客户 / 15+ 行业覆盖 / 99.9% 系统可用性）
|
||||
- **动效**：AnimatedNumber 数字滚动
|
||||
- **可选**：客户 Logo 墙（横向滚动）
|
||||
|
||||
#### Section 3: 核心产品矩阵
|
||||
|
||||
- **背景**：白色 `#FFFFFF`
|
||||
- **布局**：2×2 网格
|
||||
- **每个卡片**：
|
||||
- 朱砂红左边框（3px solid #C41E3A）
|
||||
- 产品名称（14px, font-weight: 700）
|
||||
- 关键词描述（12px, #5C5C5C）
|
||||
- Hover：微提升 + 左边框加粗
|
||||
- **动效**：StaggerContainer 依次入场
|
||||
|
||||
#### Section 4: 挑战与场景入口
|
||||
|
||||
- **背景**：暖白 `#FFFBF5`
|
||||
- **标题**：`您面临什么挑战？`
|
||||
- **三列卡片**：
|
||||
- 系统孤岛（#FEF2F4 红底 + 🏭）
|
||||
- 增长瓶颈（#FFFBEB 黄底 + 📈）
|
||||
- 合规风险（#F0FDF4 绿底 + 🔒）
|
||||
- **交互**：Hover 色变加深 + 点击跳转对应解决方案页
|
||||
- **动效**：FadeUp 依次入场
|
||||
|
||||
#### Section 5: 客户成果
|
||||
|
||||
- **背景**：深墨 `#1C1C1C`
|
||||
- **内容**：
|
||||
- 标签：`客户成果`（8px, rgba(255,255,255,0.6)）
|
||||
- 客户引言（16px, #FFFFFF, italic）
|
||||
- 署名（12px, rgba(255,255,255,0.5)）
|
||||
- 量化数据：2-3 个指标（数字 #C41E3A + 标签 rgba(255,255,255,0.4)）
|
||||
- **数据来源**：CASES 常量中的 testimonial + results
|
||||
- **动效**：FadeUp 入场
|
||||
|
||||
#### Section 6: CTA
|
||||
|
||||
- **背景**：朱砂红渐变 `linear-gradient(135deg, #C41E3A, #A01830)`
|
||||
- **内容**：
|
||||
- 标题：`开启数字化转型之旅`（白色, font-weight: 700）
|
||||
- 副标题：`免费咨询 · 专属方案 · 30天试用`（rgba(255,255,255,0.8)）
|
||||
- 按钮：`立即咨询`（白色描边）
|
||||
|
||||
---
|
||||
|
||||
## 4. Phase 1 沉淀组件
|
||||
|
||||
| 组件 | 职责 | 复用场景 |
|
||||
|------|------|---------|
|
||||
| MegaDropdown | 产品/解决方案矩阵下拉导航 | 全站导航 |
|
||||
| ProductCard | 朱砂红左边框产品卡片 | 首页、产品列表页 |
|
||||
| ChallengeCard | 痛点/场景入口卡片 | 首页、解决方案页 |
|
||||
| StatsBar | 三列数据统计条 | 首页、产品页、关于页 |
|
||||
| TestimonialBlock | 深色背景客户证言 | 首页、案例页、产品页 |
|
||||
| CTASection | 朱砂红渐变行动号召 | 全站通用 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 技术约束
|
||||
|
||||
- **框架**：Next.js 16 + React 19 + Tailwind CSS 4
|
||||
- **动效**：Framer Motion 12（保留）
|
||||
- **图标**：Lucide React（保留）
|
||||
- **部署**：静态导出（保持现有架构）
|
||||
- **测试**：Jest 单元测试 + Playwright E2E
|
||||
@@ -0,0 +1,43 @@
|
||||
from playwright.sync_api import sync_playwright
|
||||
import os
|
||||
|
||||
SCREENSHOTS_DIR = '/tmp/novalon-preview'
|
||||
os.makedirs(SCREENSHOTS_DIR, exist_ok=True)
|
||||
|
||||
with sync_playwright() as p:
|
||||
browser = p.chromium.launch(headless=True)
|
||||
page = browser.new_page(viewport={'width': 1440, 'height': 900})
|
||||
|
||||
page.goto('http://localhost:3000', wait_until='load', timeout=30000)
|
||||
page.wait_for_timeout(3000)
|
||||
|
||||
page.screenshot(path=f'{SCREENSHOTS_DIR}/01-hero-fullpage.png', full_page=True)
|
||||
|
||||
sections = [
|
||||
('home', '02-hero'),
|
||||
('social-proof', '03-social-proof'),
|
||||
('products', '04-products'),
|
||||
('challenges', '05-challenges'),
|
||||
('testimonials', '06-testimonials'),
|
||||
('cta', '07-cta'),
|
||||
]
|
||||
|
||||
for section_id, filename in sections:
|
||||
try:
|
||||
locator = page.locator(f'#{section_id}')
|
||||
if locator.count() > 0:
|
||||
locator.screenshot(path=f'{SCREENSHOTS_DIR}/{filename}.png')
|
||||
print(f'✓ Captured #{section_id}')
|
||||
else:
|
||||
print(f'✗ Section #{section_id} not found')
|
||||
except Exception as e:
|
||||
print(f'✗ Error capturing #{section_id}: {e}')
|
||||
|
||||
page.set_viewport_size({'width': 375, 'height': 812})
|
||||
page.goto('http://localhost:3000', wait_until='load', timeout=30000)
|
||||
page.wait_for_timeout(3000)
|
||||
page.screenshot(path=f'{SCREENSHOTS_DIR}/08-mobile-fullpage.png', full_page=True)
|
||||
print('✓ Captured mobile viewport')
|
||||
|
||||
browser.close()
|
||||
print(f'\nAll screenshots saved to {SCREENSHOTS_DIR}/')
|
||||
@@ -27,11 +27,6 @@ const ChallengeSection = dynamic(
|
||||
{ loading: () => <SectionSkeleton />, ssr: false }
|
||||
);
|
||||
|
||||
const TestimonialSection = dynamic(
|
||||
() => import('@/components/sections/testimonial-section').then(mod => ({ default: mod.TestimonialSection })),
|
||||
{ loading: () => <SectionSkeleton />, ssr: false }
|
||||
);
|
||||
|
||||
const CTASection = dynamic(
|
||||
() => import('@/components/sections/cta-section').then(mod => ({ default: mod.CTASection })),
|
||||
{ loading: () => <SectionSkeleton />, ssr: false }
|
||||
@@ -79,7 +74,6 @@ function HomeContentV2() {
|
||||
<SocialProofSection />
|
||||
<ProductMatrixSection />
|
||||
<ChallengeSection />
|
||||
<TestimonialSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
|
||||
@@ -1,53 +1,51 @@
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import Image from 'next/image';
|
||||
import { Mail, MapPin } from 'lucide-react';
|
||||
import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
|
||||
import { COMPANY_INFO, NAVIGATION_V2, MEGA_DROPDOWN_DATA } from '@/lib/constants';
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="bg-[#F5F5F5] border-t border-[#E5E5E5] py-12" data-testid="footer" role="contentinfo">
|
||||
<footer className="bg-[#1C1C1C] text-white py-16" data-testid="footer" role="contentinfo">
|
||||
<div className="container-wide">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
|
||||
<div className="bg-white rounded-xl p-6 border border-[#E5E5E5] shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300" data-testid="card-brand">
|
||||
<div className="flex items-center mb-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12">
|
||||
<div data-testid="card-brand">
|
||||
<div className="mb-6">
|
||||
<Image
|
||||
src="/logo.svg"
|
||||
alt={COMPANY_INFO.name}
|
||||
width={192}
|
||||
height={48}
|
||||
className="transition-transform duration-200 hover:scale-105"
|
||||
width={160}
|
||||
height={40}
|
||||
className="brightness-0 invert"
|
||||
loading="eager"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[#5C5C5C] text-sm leading-relaxed mb-6">
|
||||
<p className="text-[#A0A0A0] text-sm leading-relaxed mb-6">
|
||||
{COMPANY_INFO.description}
|
||||
</p>
|
||||
<div className="pt-6 border-t border-[#E5E5E5]">
|
||||
<p className="text-sm text-[#5C5C5C] mb-4 font-medium">关注公众号</p>
|
||||
<div className="inline-block bg-white p-4 rounded-lg border border-[#E5E5E5] shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<div className="pt-6 border-t border-[#333]">
|
||||
<p className="text-sm text-[#A0A0A0] mb-3">关注公众号</p>
|
||||
<div className="inline-block p-2 rounded-lg border border-[#333]">
|
||||
<Image
|
||||
src="/images/qrcode_for_gh_a297181ff548_258.jpg"
|
||||
alt="微信公众号二维码"
|
||||
width={120}
|
||||
height={120}
|
||||
className="w-30 h-30"
|
||||
width={100}
|
||||
height={100}
|
||||
className="w-25 h-25"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-[#718096] mt-2">扫码关注获取最新资讯</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl p-6 border border-[#E5E5E5] shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300" data-testid="card-navigation">
|
||||
<div className="mb-6">
|
||||
<h3 className="font-semibold text-lg mb-4 text-[#1C1C1C]">快速链接</h3>
|
||||
<ul className="space-y-2.5">
|
||||
{NAVIGATION.map((item) => (
|
||||
<div data-testid="card-navigation">
|
||||
<h3 className="font-semibold text-base mb-5 text-white">快速导航</h3>
|
||||
<ul className="space-y-3">
|
||||
{NAVIGATION_V2.map((item) => (
|
||||
<li key={item.id}>
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
className="text-[#3D3D3D] hover:text-[#C41E3A] transition-all duration-200 inline-block hover:translate-x-1"
|
||||
className="text-[#A0A0A0] hover:text-white transition-colors duration-200 text-sm"
|
||||
>
|
||||
{item.label}
|
||||
</StaticLink>
|
||||
@@ -55,84 +53,86 @@ export function Footer() {
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="pt-6 border-t border-[#E5E5E5]">
|
||||
<h3 className="font-semibold text-lg mb-4 text-[#1C1C1C]">服务项目</h3>
|
||||
<ul className="space-y-2.5">
|
||||
<li>
|
||||
<StaticLink href="/services/software" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-all duration-200 inline-block hover:translate-x-1">
|
||||
软件开发
|
||||
</StaticLink>
|
||||
</li>
|
||||
<li>
|
||||
<StaticLink href="/services/data" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-all duration-200 inline-block hover:translate-x-1">
|
||||
数据分析
|
||||
</StaticLink>
|
||||
</li>
|
||||
<li>
|
||||
<StaticLink href="/services/consulting" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-all duration-200 inline-block hover:translate-x-1">
|
||||
技术咨询
|
||||
</StaticLink>
|
||||
</li>
|
||||
<li>
|
||||
<StaticLink href="/services/solutions" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-all duration-200 inline-block hover:translate-x-1">
|
||||
解决方案
|
||||
|
||||
<div data-testid="card-products">
|
||||
<h3 className="font-semibold text-base mb-5 text-white">产品服务</h3>
|
||||
<ul className="space-y-3">
|
||||
{(MEGA_DROPDOWN_DATA.products ?? []).map((item) => (
|
||||
<li key={item.id}>
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
className="text-[#A0A0A0] hover:text-white transition-colors duration-200 text-sm"
|
||||
>
|
||||
{item.title}
|
||||
</StaticLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<h3 className="font-semibold text-base mb-5 mt-8 text-white">解决方案</h3>
|
||||
<ul className="space-y-3">
|
||||
{(MEGA_DROPDOWN_DATA.solutions ?? []).map((item) => (
|
||||
<li key={item.id}>
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
className="text-[#A0A0A0] hover:text-white transition-colors duration-200 text-sm"
|
||||
>
|
||||
{item.title}
|
||||
</StaticLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl p-6 border border-[#E5E5E5] shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300" data-testid="card-contact">
|
||||
<h3 className="font-semibold text-lg mb-6 text-[#1C1C1C]">联系方式</h3>
|
||||
<div data-testid="card-contact">
|
||||
<h3 className="font-semibold text-base mb-5 text-white">联系方式</h3>
|
||||
<ul className="space-y-4">
|
||||
<li className="flex items-start gap-3">
|
||||
<MapPin className="w-5 h-5 text-[#C41E3A] mt-0.5 shrink-0" />
|
||||
<span className="text-[#3D3D3D]">{COMPANY_INFO.address}</span>
|
||||
<MapPin className="w-4 h-4 text-[#C41E3A] mt-0.5 shrink-0" />
|
||||
<span className="text-[#A0A0A0] text-sm">{COMPANY_INFO.address}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<Mail className="w-5 h-5 text-[#C41E3A] shrink-0" />
|
||||
<span className="text-[#3D3D3D]">{COMPANY_INFO.email}</span>
|
||||
<Mail className="w-4 h-4 text-[#C41E3A] shrink-0" />
|
||||
<span className="text-[#A0A0A0] text-sm">{COMPANY_INFO.email}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-6 pt-6 border-t border-[#E5E5E5]">
|
||||
<p className="text-sm text-[#5C5C5C] mb-4 font-medium">企业微信业务咨询</p>
|
||||
<div className="inline-block bg-white p-4 rounded-lg border border-[#E5E5E5] shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<div className="mt-6 pt-6 border-t border-[#333]">
|
||||
<p className="text-sm text-[#A0A0A0] mb-3">企业微信业务咨询</p>
|
||||
<div className="inline-block p-2 rounded-lg border border-[#333]">
|
||||
<Image
|
||||
src="/images/149A1D2F-D9FD-49C7-B139-142C50C5FE8B_1_201_a.jpeg"
|
||||
alt="企业微信业务咨询二维码"
|
||||
width={120}
|
||||
height={120}
|
||||
className="w-30 h-30"
|
||||
width={100}
|
||||
height={100}
|
||||
className="w-25 h-25"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-[#718096] mt-2">扫码添加企业微信客服</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-[#E5E5E5] mt-12 pt-8">
|
||||
<div className="border-t border-[#333] mt-12 pt-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p className="text-[#5C5C5C] text-sm">
|
||||
<p className="text-[#666] text-sm">
|
||||
© {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
|
||||
</p>
|
||||
<div className="flex gap-6">
|
||||
<StaticLink href="/privacy" className="text-[#5C5C5C] hover:text-[#C41E3A] text-sm transition-colors duration-200">
|
||||
<StaticLink href="/privacy" className="text-[#666] hover:text-white text-sm transition-colors duration-200">
|
||||
隐私政策
|
||||
</StaticLink>
|
||||
<StaticLink href="/terms" className="text-[#5C5C5C] hover:text-[#C41E3A] text-sm transition-colors duration-200">
|
||||
<StaticLink href="/terms" className="text-[#666] hover:text-white text-sm transition-colors duration-200">
|
||||
服务条款
|
||||
</StaticLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-6 pt-6 border-t border-[#E5E5E5]">
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-4 text-xs text-[#718096]">
|
||||
<div className="text-center mt-6 pt-6 border-t border-[#333]">
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-4 text-xs text-[#555]">
|
||||
<a
|
||||
href="https://beian.miit.gov.cn/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-[#C41E3A] transition-colors duration-200"
|
||||
className="hover:text-white transition-colors duration-200"
|
||||
>
|
||||
{COMPANY_INFO.icp}
|
||||
</a>
|
||||
@@ -141,7 +141,7 @@ export function Footer() {
|
||||
href="https://beian.mps.gov.cn/#/query/webSearch?code=51010602003285"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="hover:text-[#C41E3A] transition-colors duration-200 inline-flex items-center gap-1"
|
||||
className="hover:text-white transition-colors duration-200 inline-flex items-center gap-1"
|
||||
>
|
||||
<Image
|
||||
src="/images/beian-icon.png"
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Menu, X } from 'lucide-react';
|
||||
import { NAVIGATION } from '@/lib/constants';
|
||||
import { Menu, X, ChevronDown } from 'lucide-react';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { NAVIGATION_V2, MEGA_DROPDOWN_DATA } from '@/lib/constants';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useFocusTrap } from '@/hooks/use-focus-trap';
|
||||
|
||||
@@ -12,6 +13,7 @@ interface MobileMenuProps {
|
||||
|
||||
export function MobileMenu({ className }: MobileMenuProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [expandedDropdown, setExpandedDropdown] = useState<string | null>(null);
|
||||
const focusTrapRef = useFocusTrap<HTMLDivElement>(isOpen);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -20,34 +22,25 @@ export function MobileMenu({ className }: MobileMenuProps) {
|
||||
} else {
|
||||
document.body.style.overflow = 'unset';
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = 'unset';
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
const handleNavClick = (id: string) => {
|
||||
setIsOpen(false);
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent, id?: string) => {
|
||||
const handleKeyDown = (event: React.KeyboardEvent, action?: () => void) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
if (id) {
|
||||
handleNavClick(id);
|
||||
} else {
|
||||
setIsOpen(!isOpen);
|
||||
}
|
||||
action?.();
|
||||
}
|
||||
if (event.key === 'Escape' && isOpen) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleDropdown = (key: string) => {
|
||||
setExpandedDropdown(expandedDropdown === key ? null : key);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn('lg:hidden', className)} ref={focusTrapRef}>
|
||||
<button
|
||||
@@ -75,21 +68,56 @@ export function MobileMenu({ className }: MobileMenuProps) {
|
||||
|
||||
<nav
|
||||
id="mobile-menu-panel"
|
||||
className="fixed top-16 left-0 right-0 bg-white border-b border-[#E5E5E5] z-50 shadow-lg"
|
||||
className="fixed top-16 left-0 right-0 bg-white border-b border-[#E5E5E5] z-50 shadow-lg max-h-[calc(100vh-4rem)] overflow-y-auto"
|
||||
role="navigation"
|
||||
aria-label="移动端导航"
|
||||
>
|
||||
<div className="container-wide py-4">
|
||||
<ul className="space-y-1" role="list">
|
||||
{NAVIGATION.map((item) => (
|
||||
{NAVIGATION_V2.map((item) => (
|
||||
<li key={item.id}>
|
||||
{item.hasDropdown && item.dropdownKey ? (
|
||||
<div>
|
||||
<button
|
||||
onClick={() => handleNavClick(item.id)}
|
||||
onKeyDown={(e) => handleKeyDown(e, item.id)}
|
||||
className="block w-full text-left px-4 py-4 text-[#171717] hover:bg-[#FEF2F4] hover:text-[#C41E3A] rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-inset min-h-[48px]"
|
||||
onClick={() => toggleDropdown(item.dropdownKey!)}
|
||||
onKeyDown={(e) => handleKeyDown(e, () => toggleDropdown(item.dropdownKey!))}
|
||||
className="flex items-center justify-between w-full text-left px-4 py-4 text-[#171717] hover:bg-[#FEF2F4] hover:text-[#C41E3A] rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-inset min-h-[48px]"
|
||||
aria-expanded={expandedDropdown === item.dropdownKey}
|
||||
>
|
||||
{item.label}
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
'w-4 h-4 transition-transform duration-200',
|
||||
expandedDropdown === item.dropdownKey && 'rotate-180'
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
{expandedDropdown === item.dropdownKey && (
|
||||
<ul className="pl-4 space-y-1 mt-1 mb-2" role="list">
|
||||
{(MEGA_DROPDOWN_DATA[item.dropdownKey] ?? []).map((sub) => (
|
||||
<li key={sub.id}>
|
||||
<StaticLink
|
||||
href={sub.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="block px-4 py-3 text-sm text-[#595959] hover:text-[#C41E3A] hover:bg-[#FEF2F4] rounded-md transition-colors"
|
||||
>
|
||||
<span className="font-medium text-[#1C1C1C]">{sub.title}</span>
|
||||
<span className="block text-xs text-[#8C8C8C] mt-0.5">{sub.description}</span>
|
||||
</StaticLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="block px-4 py-4 text-[#171717] hover:bg-[#FEF2F4] hover:text-[#C41E3A] rounded-md transition-colors min-h-[48px]"
|
||||
>
|
||||
{item.label}
|
||||
</StaticLink>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
Binary file not shown.
Reference in New Issue
Block a user