feat(nav): 导航栏增加服务与产品高端大气二级卡片面板(Mega Menu)
这个提交包含在：
wikiboss
@@ -24,11 +24,220 @@
|
||||
<li>
|
||||
<a href="{:addon_url('official/web.official_home/index')}" class="nhc-nav-link {if empty(input('param.pid'))}active{/if}">首页</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{:addon_url('official/web.official_product/list',[':pid'=>19,':sid'=>19])}" class="nhc-nav-link {if input('param.pid') == 19}active{/if}">服务</a>
|
||||
<!-- 1. 服务菜单与二级卡片面板 -->
|
||||
<li class="nhc-nav-item nhc-has-dropdown">
|
||||
<a href="{:addon_url('official/web.official_product/list',[':pid'=>19,':sid'=>19])}" class="nhc-nav-link {if input('param.pid') == 19}active{/if}">
|
||||
<span>服务</span>
|
||||
<svg class="nhc-caret" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>
|
||||
</a>
|
||||
<!-- 服务二级大卡片面板 (Mega Panel) -->
|
||||
<div class="nhc-mega-panel">
|
||||
<div class="nhc-mega-grid">
|
||||
<div class="nhc-mega-cards-col">
|
||||
<div class="nhc-mega-header">
|
||||
<span class="nhc-seal">服务矩阵</span>
|
||||
<span>ENGINEERING CAPABILITIES</span>
|
||||
</div>
|
||||
<div class="nhc-mega-cards-grid-3">
|
||||
<!-- 领域 1：软件开发 -->
|
||||
<a href="{:addon_url('official/web.official_product/list',[':pid'=>19,':sid'=>19])}#services-list" class="nhc-mega-card">
|
||||
<div class="nhc-mega-card-top">
|
||||
<div class="nhc-mega-card-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
||||
</div>
|
||||
<div class="nhc-mega-card-title">
|
||||
<span>软件开发</span>
|
||||
<span class="nhc-mega-card-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="nhc-mega-card-desc">高并发业务中台定制，分布式微服务架构，100% 完整源码移交。</p>
|
||||
<div class="nhc-mega-card-tags">
|
||||
<span class="nhc-mega-card-tag">微服务中台</span>
|
||||
<span class="nhc-mega-card-tag">源码移交</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 领域 2：APP与小程序定制 -->
|
||||
<a href="{:addon_url('official/web.official_product/list',[':pid'=>19,':sid'=>19])}#services-list" class="nhc-mega-card">
|
||||
<div class="nhc-mega-card-top">
|
||||
<div class="nhc-mega-card-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
|
||||
</div>
|
||||
<div class="nhc-mega-card-title">
|
||||
<span>APP与小程序定制</span>
|
||||
<span class="nhc-mega-card-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="nhc-mega-card-desc">覆盖 iOS / Android 与微信生态，60fps 丝滑交互与蓝牙物联网硬件直连。</p>
|
||||
<div class="nhc-mega-card-tags">
|
||||
<span class="nhc-mega-card-tag">Flutter/Uni-app</span>
|
||||
<span class="nhc-mega-card-tag">全端协同</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 领域 3：智能体开发 -->
|
||||
<a href="{:addon_url('official/web.official_product/list',[':pid'=>19,':sid'=>19])}#services-list" class="nhc-mega-card">
|
||||
<div class="nhc-mega-card-top">
|
||||
<div class="nhc-mega-card-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||||
</div>
|
||||
<div class="nhc-mega-card-title">
|
||||
<span>智能体开发</span>
|
||||
<span class="nhc-mega-card-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="nhc-mega-card-desc">企业私域专属大模型微调，RAG 向量精准检索，内网物理隔离 0 外泄。</p>
|
||||
<div class="nhc-mega-card-tags">
|
||||
<span class="nhc-mega-card-tag">RAG向量库</span>
|
||||
<span class="nhc-mega-card-tag">私有合规</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 服务面板右侧背书视窗 -->
|
||||
<div class="nhc-mega-sidebar">
|
||||
<div>
|
||||
<div class="nhc-mega-sidebar-title">
|
||||
<span class="nhc-mega-sidebar-heading">工程受控规范</span>
|
||||
<span class="nhc-seal">精工立骨</span>
|
||||
</div>
|
||||
<p class="nhc-mega-sidebar-desc">严格遵循 TDD 测试驱动开发与 ISO9001 质量审核，提供全套系统架构设计蓝图与数据库字典。</p>
|
||||
<div class="nhc-mega-sidebar-metrics">
|
||||
<div class="nhc-mega-metric-row">
|
||||
<span class="nhc-mega-metric-label">响应时效保障</span>
|
||||
<span class="nhc-mega-metric-val">< 15分钟 SLA</span>
|
||||
</div>
|
||||
<div class="nhc-mega-metric-row">
|
||||
<span class="nhc-mega-metric-label">首年质保服务</span>
|
||||
<span class="nhc-mega-metric-val">365天 免费维保</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{:addon_url('official/web.official_online_message/list',[':pid'=>18,':sid'=>18])}" class="nhc-mega-sidebar-link">
|
||||
<span>预约架构师技术初审</span>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{:addon_url('official/web.official_product/list',[':pid'=>22,':sid'=>22])}" class="nhc-nav-link {if input('param.pid') == 22}active{/if}">产品</a>
|
||||
|
||||
<!-- 2. 产品菜单与二级卡片面板 -->
|
||||
<li class="nhc-nav-item nhc-has-dropdown">
|
||||
<a href="{:addon_url('official/web.official_product/list',[':pid'=>22,':sid'=>22])}" class="nhc-nav-link {if input('param.pid') == 22}active{/if}">
|
||||
<span>产品</span>
|
||||
<svg class="nhc-caret" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>
|
||||
</a>
|
||||
<!-- 产品二级大卡片面板 (Mega Panel) -->
|
||||
<div class="nhc-mega-panel">
|
||||
<div class="nhc-mega-grid">
|
||||
<div class="nhc-mega-cards-col">
|
||||
<div class="nhc-mega-header">
|
||||
<span class="nhc-seal">商业矩阵</span>
|
||||
<span>STANDARDIZED SOLUTIONS</span>
|
||||
</div>
|
||||
<div class="nhc-mega-cards-grid-2">
|
||||
<!-- 产品 1：商城系统 -->
|
||||
<a href="{:addon_url('official/web.official_home/index')}#products" class="nhc-mega-card">
|
||||
<div class="nhc-mega-card-top">
|
||||
<div class="nhc-mega-card-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
|
||||
</div>
|
||||
<div class="nhc-mega-card-title">
|
||||
<span>全场景商城系统</span>
|
||||
<span class="nhc-mega-card-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="nhc-mega-card-desc">B2B2C / S2B2C 多商户入驻，全渠道统一订单汇聚与分销裂变体系。</p>
|
||||
<div class="nhc-mega-card-tags">
|
||||
<span class="nhc-mega-card-tag">多商户</span>
|
||||
<span class="nhc-mega-card-tag">社交裂变</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 产品 2：智能收银系统 -->
|
||||
<a href="{:addon_url('official/web.official_home/index')}#products" class="nhc-mega-card">
|
||||
<div class="nhc-mega-card-top">
|
||||
<div class="nhc-mega-card-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
|
||||
</div>
|
||||
<div class="nhc-mega-card-title">
|
||||
<span>智能商业收银系统</span>
|
||||
<span class="nhc-mega-card-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="nhc-mega-card-desc">软硬一体，秒级聚合扫码付，网络中断离线记账自动回传同步。</p>
|
||||
<div class="nhc-mega-card-tags">
|
||||
<span class="nhc-mega-card-tag">秒级聚合付</span>
|
||||
<span class="nhc-mega-card-tag">离线记账</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 产品 3：全链路进销存 -->
|
||||
<a href="{:addon_url('official/web.official_home/index')}#products" class="nhc-mega-card">
|
||||
<div class="nhc-mega-card-top">
|
||||
<div class="nhc-mega-card-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
|
||||
</div>
|
||||
<div class="nhc-mega-card-title">
|
||||
<span>全链路进销存系统</span>
|
||||
<span class="nhc-mega-card-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="nhc-mega-card-desc">采购、销售、仓储与财务业财一体化，批次批号管理与动态盘点预警。</p>
|
||||
<div class="nhc-mega-card-tags">
|
||||
<span class="nhc-mega-card-tag">业财一体</span>
|
||||
<span class="nhc-mega-card-tag">智能补货</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 产品 4：云原生 SaaS 版本 -->
|
||||
<a href="{:addon_url('official/web.official_home/index')}#products" class="nhc-mega-card">
|
||||
<div class="nhc-mega-card-top">
|
||||
<div class="nhc-mega-card-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg>
|
||||
</div>
|
||||
<div class="nhc-mega-card-title">
|
||||
<span>云原生 SaaS 平台</span>
|
||||
<span class="nhc-mega-card-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="nhc-mega-card-desc">多租户金融级数据逻辑与物理隔离，高弹性伸缩云集群，即开即用。</p>
|
||||
<div class="nhc-mega-card-tags">
|
||||
<span class="nhc-mega-card-tag">多租户隔离</span>
|
||||
<span class="nhc-mega-card-tag">弹性扩容</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产品面板右侧背书视窗 -->
|
||||
<div class="nhc-mega-sidebar">
|
||||
<div>
|
||||
<div class="nhc-mega-sidebar-title">
|
||||
<span class="nhc-mega-sidebar-heading">成熟商业开箱即用</span>
|
||||
<span class="nhc-seal">矩阵赋能</span>
|
||||
</div>
|
||||
<p class="nhc-mega-sidebar-desc">经历千万级真实交易峰值验证，支持公有云敏捷订阅与企业专有云私有化源码买断。</p>
|
||||
<div class="nhc-mega-sidebar-metrics">
|
||||
<div class="nhc-mega-metric-row">
|
||||
<span class="nhc-mega-metric-label">日交易承载力</span>
|
||||
<span class="nhc-mega-metric-val">10W+ 单/天</span>
|
||||
</div>
|
||||
<div class="nhc-mega-metric-row">
|
||||
<span class="nhc-mega-metric-label">硬件生态适配</span>
|
||||
<span class="nhc-mega-metric-val">收银外设即插即用</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{:addon_url('official/web.official_home/index')}#contact" class="nhc-mega-sidebar-link">
|
||||
<span>申请在线系统演示</span>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{:addon_url('official/web.official_case_show/list',[':pid'=>14,':sid'=>14])}" class="nhc-nav-link {if input('param.pid') == 14}active{/if}">案例</a>
|
||||
|
||||
@@ -1891,3 +1891,285 @@ img {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
导航栏二级大卡片面板 (Mega Menu Dropdown Panel)
|
||||
========================================================================== */
|
||||
.nhc-nav-item.nhc-has-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nhc-has-dropdown .nhc-nav-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nhc-caret {
|
||||
transition: transform 0.25s ease;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nhc-has-dropdown:hover .nhc-caret {
|
||||
transform: rotate(180deg);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* 巨型下拉卡片面板容器 (固定于导航条下方) */
|
||||
.nhc-mega-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 12px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(8px);
|
||||
width: 980px;
|
||||
max-width: calc(100vw - 40px);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(226, 232, 240, 0.95);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04);
|
||||
padding: 28px 32px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
visibility 0.25s;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* 向上防抖悬停连接区 */
|
||||
.nhc-mega-panel::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 16px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 鼠标悬停展开 */
|
||||
.nhc-has-dropdown:hover .nhc-mega-panel,
|
||||
.nhc-has-dropdown.active .nhc-mega-panel {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
/* 面板内部两列结构：左侧卡片矩阵 + 右侧背书侧边栏 */
|
||||
.nhc-mega-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 280px;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.nhc-mega-cards-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nhc-mega-header {
|
||||
font-size: 11px;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 服务卡片 3 列网格 */
|
||||
.nhc-mega-cards-grid-3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
/* 产品卡片 2 列网格 */
|
||||
.nhc-mega-cards-grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
/* 二级卡片单体设计 */
|
||||
.nhc-mega-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #F8FAFC;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 16px;
|
||||
text-decoration: none;
|
||||
transition: all 0.25s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nhc-mega-card:hover {
|
||||
background: #FFFFFF;
|
||||
border-color: rgba(37, 99, 235, 0.4);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
.nhc-mega-card-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.nhc-mega-card-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E2E8F0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--primary);
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nhc-mega-card:hover .nhc-mega-card-icon {
|
||||
background: var(--primary);
|
||||
color: #FFFFFF;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.nhc-mega-card-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
transition: color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nhc-mega-card:hover .nhc-mega-card-title {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.nhc-mega-card-arrow {
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
transform: translateX(-4px);
|
||||
transition: all 0.2s ease;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.nhc-mega-card:hover .nhc-mega-card-arrow {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.nhc-mega-card-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nhc-mega-card-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nhc-mega-card-tag {
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E2E8F0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* 右侧背书/快捷视窗 */
|
||||
.nhc-mega-sidebar {
|
||||
background: #F8FAFC;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nhc-mega-sidebar-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.nhc-mega-sidebar-heading {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nhc-mega-sidebar-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.nhc-mega-sidebar-metrics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.nhc-mega-metric-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px dashed #E2E8F0;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.nhc-mega-metric-label {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nhc-mega-metric-val {
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.nhc-mega-sidebar-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
background: var(--primary);
|
||||
padding: 8px 14px;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nhc-mega-sidebar-link:hover {
|
||||
background: var(--primary-hover);
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
|
||||
}
|
||||
|
||||
105
tests/NavMegaMenuTest.php
普通文件
105
tests/NavMegaMenuTest.php
普通文件
@@ -0,0 +1,105 @@
|
||||
<?php
|
||||
/**
|
||||
* 导航栏二级卡片面板 (Mega Menu) 规范与完整性测试 (TDD 模式)
|
||||
* 验证鼠标划过时弹出的二级卡片面板结构、业务内容、禁止项与现代中式质感
|
||||
*/
|
||||
|
||||
class NavMegaMenuTest
|
||||
{
|
||||
private $passed = 0;
|
||||
private $failed = 0;
|
||||
private $navContent = '';
|
||||
private $cssContent = '';
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
$baseDir = dirname(__DIR__);
|
||||
$navFile = $baseDir . '/addons/official/view/web/official_common/pc/nav.html';
|
||||
$cssFile = $baseDir . '/public/assets/addons/official/css/modern_nhc.css';
|
||||
|
||||
if (file_exists($navFile)) {
|
||||
$this->navContent = file_get_contents($navFile);
|
||||
}
|
||||
if (file_exists($cssFile)) {
|
||||
$this->cssContent = file_get_contents($cssFile);
|
||||
}
|
||||
}
|
||||
|
||||
public function run()
|
||||
{
|
||||
echo "=== 开始执行导航栏二级卡片面板规范测试 (TDD) ===\n";
|
||||
|
||||
// 1. 基础结构测试
|
||||
$this->testMegaMenuStructure();
|
||||
|
||||
// 2. 服务二级卡片面板业务内容测试
|
||||
$this->testServicesMegaMenu();
|
||||
|
||||
// 3. 产品二级卡片面板业务内容测试
|
||||
$this->testProductsMegaMenu();
|
||||
|
||||
// 4. CSS 交互与现代中式质感测试
|
||||
$this->testMegaMenuCss();
|
||||
|
||||
// 5. 禁止项测试（严禁使用 emoji）
|
||||
$this->testForbiddenElements();
|
||||
|
||||
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++;
|
||||
}
|
||||
}
|
||||
|
||||
public function testMegaMenuStructure()
|
||||
{
|
||||
$hasDropdownClass = (strpos($this->navContent, 'nhc-has-dropdown') !== false);
|
||||
$this->assert($hasDropdownClass, "导航栏必须具备 nhc-has-dropdown 下拉菜单触发类");
|
||||
|
||||
$hasMegaPanel = (strpos($this->navContent, 'nhc-mega-panel') !== false);
|
||||
$this->assert($hasMegaPanel, "导航栏必须具备高端大气的 nhc-mega-panel 二级卡片面板容器");
|
||||
}
|
||||
|
||||
public function testServicesMegaMenu()
|
||||
{
|
||||
$this->assert(strpos($this->navContent, '软件开发') !== false, "服务二级面板必须包含【软件开发】卡片");
|
||||
$this->assert(strpos($this->navContent, 'APP与小程序定制') !== false || (strpos($this->navContent, 'APP') !== false && strpos($this->navContent, '小程序') !== false), "服务二级面板必须包含【APP与小程序定制】卡片");
|
||||
$this->assert(strpos($this->navContent, '智能体开发') !== false, "服务二级面板必须包含【智能体开发】卡片");
|
||||
}
|
||||
|
||||
public function testProductsMegaMenu()
|
||||
{
|
||||
$this->assert(strpos($this->navContent, '商城') !== false, "产品二级面板必须包含【商城】卡片");
|
||||
$this->assert(strpos($this->navContent, '收银') !== false, "产品二级面板必须包含【收银】卡片");
|
||||
$this->assert(strpos($this->navContent, '进销存') !== false, "产品二级面板必须包含【进销存】卡片");
|
||||
$this->assert(strpos($this->navContent, 'SaaS') !== false, "产品二级面板必须包含【SaaS版本】卡片");
|
||||
}
|
||||
|
||||
public function testMegaMenuCss()
|
||||
{
|
||||
$hasPanelStyle = (strpos($this->cssContent, '.nhc-mega-panel') !== false);
|
||||
$this->assert($hasPanelStyle, "CSS 中必须包含 .nhc-mega-panel 卡片面板样式");
|
||||
|
||||
$hasHoverTrigger = (strpos($this->cssContent, '.nhc-has-dropdown:hover') !== false || strpos($this->cssContent, '.nhc-mega-panel.active') !== false);
|
||||
$this->assert($hasHoverTrigger, "CSS 中必须包含鼠标划过悬停展开交互样式");
|
||||
}
|
||||
|
||||
public function testForbiddenElements()
|
||||
{
|
||||
$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->navContent);
|
||||
$this->assert(!$hasEmoji, "导航栏及二级卡片面板严禁使用任何 emoji 表情");
|
||||
}
|
||||
}
|
||||
|
||||
$test = new NavMegaMenuTest();
|
||||
$test->run();
|
||||
在新工单中引用
屏蔽一个用户