feat(home): 改版首页为现代中式高端浅色专业风并适配全响应式布局

这个提交包含在:
wikiboss
2026-10-08 16:36:17 +08:00
父节点 f5999a778b
当前提交 73c56c810e
共有 8 个文件被更改,包括 2363 次插入 和 471 次删除

187
tests/HomepageDesignTest.php 普通文件
查看文件

@@ -0,0 +1,187 @@
<?php
/**
* 首页改版规范与内容完整性测试 (TDD 模式)
* 验证设计规范、色彩体系、禁止项、必备板块与核心业务内容
*/
class HomepageDesignTest
{
private $passed = 0;
private $failed = 0;
private $htmlContent = '';
private $cssContent = '';
public function __construct()
{
$baseDir = dirname(__DIR__);
$htmlFile = $baseDir . '/addons/official/view/web/official_home/index.html';
$navFile = $baseDir . '/addons/official/view/web/official_common/pc/nav.html';
$footerFile = $baseDir . '/addons/official/view/web/official_common/pc/footer.html';
$cssFile = $baseDir . '/public/assets/addons/official/css/modern_nhc.css';
$this->htmlContent = '';
if (file_exists($htmlFile)) {
$this->htmlContent .= file_get_contents($htmlFile) . "\n";
}
if (file_exists($navFile)) {
$this->htmlContent .= file_get_contents($navFile) . "\n";
}
if (file_exists($footerFile)) {
$this->htmlContent .= file_get_contents($footerFile) . "\n";
}
if (file_exists($cssFile)) {
$this->cssContent = file_get_contents($cssFile);
}
}
public function run()
{
echo "=== 开始执行首页改版设计规范与完整性测试 (TDD) ===\n";
// 1. 色彩体系测试
$this->testColorSystem();
// 2. 字体与样式测试
$this->testTypographyAndBorderRadius();
// 3. 禁止项测试(严禁 emoji、国潮堆砌等)
$this->testForbiddenElements();
// 4. 主菜单导航测试
$this->testNavigationMenus();
// 5. 核心业务服务板块测试
$this->testServicesSection();
// 6. 核心产品矩阵板块测试
$this->testProductsSection();
// 7. 案例、流程、评价、CTA 板块测试
$this->testEssentialSections();
// 8. 响应式布局测试
$this->testResponsiveDesign();
echo "\n测试结果: {$this->passed} 通过, {$this->failed} 失败\n";
if ($this->failed > 0) {
exit(1);
}
}
private function assert($condition, $message)
{
if ($condition) {
echo " [PASS] {$message}\n";
$this->passed++;
} else {
echo " [FAIL] {$message}\n";
$this->failed++;
}
}
/**
* 测试色彩体系是否严格符合 AGENTS.md 规范
*/
public function testColorSystem()
{
$hasBlue = (stripos($this->cssContent, '#2563EB') !== false || stripos($this->cssContent, '#2563eb') !== false);
$this->assert($hasBlue, "CSS 必须包含主色 #2563EB (科技蓝)");
$hasCyan = (stripos($this->cssContent, '#06B6D4') !== false || stripos($this->cssContent, '#06b6d4') !== false);
$this->assert($hasCyan, "CSS 必须包含辅助色 #06B6D4 (青)");
$hasPurple = (stripos($this->cssContent, '#7C3AED') !== false || stripos($this->cssContent, '#7c3aed') !== false);
$this->assert($hasPurple, "CSS 必须包含辅助色 #7C3AED (紫)");
$hasBg = (stripos($this->cssContent, '#F8FAFC') !== false || stripos($this->cssContent, '#f8fafc') !== false);
$this->assert($hasBg, "CSS 必须包含背景色 #F8FAFC 与 #FFFFFF");
$hasDarkText = (stripos($this->cssContent, '#0F172A') !== false || stripos($this->cssContent, '#0f172a') !== false);
$this->assert($hasDarkText, "CSS 必须包含文字主色 #0F172A 与正文 #475569");
}
/**
* 测试字体与圆角规范
*/
public function testTypographyAndBorderRadius()
{
$hasSongti = (stripos($this->cssContent, 'SimSun') !== false || stripos($this->cssContent, 'Songti') !== false || stripos($this->cssContent, 'Noto Serif SC') !== false || stripos($this->cssContent, 'Source Han Serif') !== false);
$this->assert($hasSongti, "标题字体必须使用宋体 (SimSun / Songti / Noto Serif SC)");
$hasBodyFont = (stripos($this->cssContent, 'Inter') !== false || stripos($this->cssContent, 'PingFang') !== false || stripos($this->cssContent, 'sans-serif') !== false);
$this->assert($hasBodyFont, "正文字体必须使用 Inter 或标准无衬线黑体");
$has1280Grid = (stripos($this->cssContent, '1280px') !== false);
$this->assert($has1280Grid, "容器应采用 1280px 网格规范");
}
/**
* 测试禁止项(严格禁止 Emoji 图标、霓虹赛博朋克等)
*/
public function testForbiddenElements()
{
// 匹配 Unicode Emoji 范围
$hasEmoji = preg_match('/[\x{1F600}-\x{1F64F}\x{1F300}-\x{1F5FF}\x{1F680}-\x{1F6FF}\x{2600}-\x{26FF}\x{2700}-\x{27BF}]/u', $this->htmlContent);
$this->assert(!$hasEmoji, "首页严禁使用任何 emoji 表情符号");
}
/**
* 测试主导航菜单项
*/
public function testNavigationMenus()
{
$this->assert(strpos($this->htmlContent, '服务') !== false, "必须包含主菜单【服务】");
$this->assert(strpos($this->htmlContent, '产品') !== false, "必须包含主菜单【产品】");
$this->assert(strpos($this->htmlContent, '案例') !== false, "必须包含主菜单【案例】");
$this->assert(strpos($this->htmlContent, '关于我们') !== false, "必须包含主菜单【关于我们】");
$this->assert(strpos($this->htmlContent, '联系我们') !== false, "必须包含主菜单【联系我们】");
}
/**
* 测试核心服务三大领域
*/
public function testServicesSection()
{
$this->assert(strpos($this->htmlContent, '软件开发') !== false, "服务板块必须包含【软件开发】");
$this->assert(strpos($this->htmlContent, '小程序定制') !== false || strpos($this->htmlContent, 'APP与小程序定制') !== false, "服务板块必须包含【APP与小程序定制】");
$this->assert(strpos($this->htmlContent, '智能体开发') !== false, "服务板块必须包含【智能体开发】");
}
/**
* 测试四大产品线
*/
public function testProductsSection()
{
$this->assert(strpos($this->htmlContent, '商城') !== false, "产品板块必须包含【商城】");
$this->assert(strpos($this->htmlContent, '收银') !== false, "产品板块必须包含【收银】");
$this->assert(strpos($this->htmlContent, '进销存') !== false, "产品板块必须包含【进销存】");
$this->assert(strpos($this->htmlContent, 'SaaS') !== false, "产品板块必须包含【SaaS版本】");
}
/**
* 测试首屏、案例、流程、评价、CTA 等核心板块
*/
public function testEssentialSections()
{
$this->assert(strpos($this->htmlContent, 'nhc-hero') !== false, "必须包含首屏 Hero 板块");
$this->assert(strpos($this->htmlContent, 'nhc-services') !== false, "必须包含服务入口板块");
$this->assert(strpos($this->htmlContent, 'nhc-products') !== false, "必须包含产品矩阵入口板块");
$this->assert(strpos($this->htmlContent, 'nhc-cases') !== false, "必须包含客户案例板块");
$this->assert(strpos($this->htmlContent, 'nhc-process') !== false, "必须包含标准化交付流程板块");
$this->assert(strpos($this->htmlContent, 'nhc-testimonials') !== false || strpos($this->htmlContent, 'nhc-clients') !== false, "必须包含客户评价或伙伴板块");
$this->assert(strpos($this->htmlContent, 'nhc-cta') !== false, "必须包含底部 CTA 行动召唤板块");
$this->assert(strpos($this->htmlContent, 'nhc-footer') !== false, "必须包含现代化专业页脚板块");
}
/**
* 测试响应式断点与设计
*/
public function testResponsiveDesign()
{
$hasMediaQueries = (stripos($this->cssContent, '@media') !== false && (stripos($this->cssContent, '768px') !== false || stripos($this->cssContent, '1024px') !== false));
$this->assert($hasMediaQueries, "CSS 必须包含移动端/平板响应式媒体查询适配");
}
}
$test = new HomepageDesignTest();
$test->run();