Files
BlackFruit-UI/public/header.html
yiqiu ef3eb27ecb
All checks were successful
continuous-integration/drone/push Build is passing
feat: 控制台旁添加用户头像+下拉菜单(个人资料/退出登录)
2026-03-20 20:35:31 +08:00

223 lines
8.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<div class="nav-shadow">
<nav class="section-content nav-header">
<div class="nav-left">
{php}
// Logo 链接使用独立配置,不占用导航数组
$__logoLink = isset($data['site_config']['logo_link']) && !empty($data['site_config']['logo_link'])
? $data['site_config']['logo_link']
: 'index.html';
{/php}
<div class="nav-icon">
<a href="{$__logoLink}">
<img src="{$data.official_website_logo|default='assets/img/index/logo.png'}" alt="Logo" id="logo">
</a>
</div>
<div class="nav-menu">
{if isset($data.header_nav) && !empty($data.header_nav)}
{foreach $data.header_nav as $k=>$item}
{if !empty($item.file_address)}
<a href="{$item.file_address}" {if !empty($item.blank)}target="_blank" {/if}>
<div class="nav-item">{$item.name}</div>
</a>
{else /}
<div class="nav-item">{$item.name}</div>
{/if}
{/foreach}
{/if}
</div>
</div>
<div class="nav-right">
<!-- 语言切换(始终显示,放在最左边) -->
<div class="lang-switch nav-desktop-link" id="langSwitch" onclick="i18n.toggle()">
<span class="lang-text">CN</span>
<span class="lang-sep">/</span>
<span class="lang-alt">EN</span>
</div>
<!-- 未登录状态 -->
<div class="no-login nav-desktop-link d-none">
<span class="nav-text-link" id="loginBtn" data-i18n="nav_login">登录</span>
<span class="nav-divider">|</span>
<div class="btn btn-normal" id="registBtn">
<img src="/web/BlackFruit-web/assets/img/header/liwu.svg" class="regist-icon" alt="Gift">
<span class="regist-text" data-i18n="nav_register">立即注册</span>
</div>
</div>
<!-- 已登录状态 -->
<div class="login-in nav-desktop-link d-none">
<a href="/home.htm" class="console-btn" data-i18n="nav_console">控制台</a>
<div class="user-avatar-wrap">
<div class="user-avatar" id="headImg"></div>
<div class="user-dropdown">
<div class="user-dropdown-item" id="accountBtn" data-i18n="menu_account">个人资料</div>
<div class="user-dropdown-item" id="logout" data-i18n="menu_logout">退出登录</div>
</div>
</div>
</div>
<!-- 移动端汉堡菜单按钮 -->
<button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle navigation">
<img src="/web/BlackFruit-web/assets/img/header/bar.svg" alt="Menu" class="mobile-menu-icon">
</button>
</div>
</nav>
<div class="nav-cont">
<div class="nav-dropdown-inner">
{if isset($data.header_nav) && !empty($data.header_nav)}
{foreach $data.header_nav as $k=>$item}
{if isset($item.children) && !empty($item.children)}
<div class="nav-cont-menu">
{php}
$hasThirdLevel = false;
foreach ($item['children'] as $child) {
if (isset($child['children']) && !empty($child['children'])) {
$hasThirdLevel = true;
break;
}
}
{/php}
{if $hasThirdLevel}
<!-- 方案 C二级分组标题 + 三级国旗链接网格 -->
<div class="nav-groups">
{foreach $item.children as $childIndex=>$child}
{if isset($child.children) && !empty($child.children)}
<div class="nav-group">
<div class="nav-group-title">
{if !empty($child.icon)}
<img src="{$child.icon}" alt="{$child.name}" class="nav-group-icon">
{/if}
<span>{$child.name}</span>
{if !empty($child.description)}
<span class="nav-group-desc">— {$child.description}</span>
{/if}
</div>
<div class="nav-group-grid">
{foreach $child.children as $grandchild}
<a href="{if !empty($grandchild.file_address)}{$grandchild.file_address}{else/}javascript:;{/if}"
class="nav-grid-link" {if !empty($grandchild.blank)}target="_blank" {/if}
title="{$grandchild.name}{if !empty($grandchild.description)} - {$grandchild.description}{/if}">
{if !empty($grandchild.country_code)}
<img src="/web/BlackFruit-web/assets/country/{$grandchild.country_code}.png"
alt="{$grandchild.country_code}" class="country-flag" onerror="this.style.display='none'">
{/if}
{$grandchild.name}
</a>
{/foreach}
</div>
</div>
{/if}
{/foreach}
</div>
{else}
<!-- 纯二级:简单网格 -->
<div class="nav-simple-grid">
{foreach $item.children as $child}
<a href="{if !empty($child.file_address)}{$child.file_address}{else/}javascript:;{/if}"
class="nav-simple-item" {if !empty($child.blank)}target="_blank" {/if}>
{if !empty($child.icon)}
<div class="nav-simple-icon">
<img src="{$child.icon}" alt="{$child.name}">
</div>
{/if}
<div class="nav-simple-info">
<div class="nav-simple-title">{$child.name}</div>
{if !empty($child.description)}
<div class="nav-simple-desc">{$child.description}</div>
{/if}
</div>
</a>
{/foreach}
</div>
{/if}
</div>
{else /}
<div class="nav-cont-menu nav-cont-empty"></div>
{/if}
{/foreach}
{/if}
</div>
</div>
</div>
</div>
<!-- 移动端侧边导航栏 -->
<div class="mobile-sidebar" id="mobileSidebar">
<div class="mobile-sidebar-overlay" id="mobileSidebarOverlay"></div>
<div class="mobile-sidebar-content">
<div class="mobile-sidebar-header">
<div class="mobile-sidebar-logo">
<img src="{$data.official_website_logo|default='assets/img/index/logo.png'}" alt="">
</div>
<div class="mobile-sidebar-close" id="mobileSidebarClose">
<span></span>
</div>
</div>
<div class="mobile-sidebar-body">
<!-- 主导航菜单 -->
{if isset($data.header_nav) && !empty($data.header_nav)}
{foreach $data.header_nav as $k=>$item}
<div class="mobile-nav-item">
{if !empty($item.file_address)}
<a href="{$item.file_address}" {if !empty($item.blank)}target="_blank" {/if} class="mobile-nav-link">
{$item.name}
</a>
{else /}
<div class="mobile-nav-link">{$item.name}</div>
{/if}
</div>
{/foreach}
{/if}
<!-- 分隔线 -->
<div class="mobile-nav-divider"></div>
<!-- 控制台(已登录时显示) -->
<div class="mobile-nav-item mobile-login-in" style="display: none;">
<a href="/home.htm" class="mobile-nav-link" data-i18n="nav_console">控制台</a>
</div>
<!-- 登录注册(未登录状态) -->
<div class="mobile-nav-actions mobile-no-login" style="display: none;">
<div class="mobile-nav-item">
<span class="mobile-nav-link" id="mobileLoginBtn" data-i18n="nav_login">登录</span>
</div>
<div class="mobile-nav-item">
<div class="mobile-nav-btn" id="mobileRegistBtn" data-i18n="nav_register">立即注册</div>
</div>
</div>
<!-- 用户信息(已登录状态) -->
<div class="mobile-nav-user mobile-login-in" style="display: none;">
<div class="mobile-nav-divider"></div>
<div class="mobile-user-info">
<div class="mobile-user-avatar" id="mobileHeadImg"></div>
<div class="mobile-user-name" id="mobileUsername"></div>
</div>
<div class="mobile-nav-item">
<span class="mobile-nav-link" id="mobileAccountBtn" data-i18n="menu_account">账户信息</span>
</div>
<div class="mobile-nav-item">
<span class="mobile-nav-link" id="mobileFinanceBtn" data-i18n="menu_unpaid">未付款订单</span>
</div>
<div class="mobile-nav-item">
<span class="mobile-nav-link" id="mobileTicketBtn" data-i18n="menu_ticket">我的工单</span>
</div>
<div class="mobile-nav-item">
<span class="mobile-nav-link" id="mobileLogout" data-i18n="menu_logout">退出账户</span>
</div>
</div>
<!-- 语言切换 -->
<div class="mobile-nav-divider"></div>
<div class="mobile-nav-item">
<span class="mobile-nav-link" onclick="i18n.toggle()">🌐 <span class="lang-text"></span> / EN</span>
</div>
</div>
</div>
</div>
<!-- 右侧浮窗 — 由 float-widget.js 动态渲染 -->
{if ( isset($data.side_floating_window) && !empty($data.side_floating_window) ) }
<script>
window.__FLOAT_WIDGET_DATA__ = {:json_encode($data['side_floating_window'])};
</script>
{/if}
<div class="float-widget"></div>