Files
ewoooc/templates/components/_navbar.html
OoO 19f1340f5c
All checks were successful
CD Pipeline / deploy (push) Successful in 2m42s
feat(p38): admin 觀測台 6 頁完整繁中化 + 加入導航選單
問題:
1. 6 個 /observability/* 頁面標題與欄位英文殘留(違反設計憲法繁中要求)
2. 6 頁完全沒掛 navbar,使用者進不去(只能彼此 footer link 互連)
3. emoji 取代 Font Awesome,違反設計規範

修補:
- _navbar.html 新增「AI 觀測台」dropdown(位於 AI 助手 與 雲端匯入 之間)
  - AI 監控組:AI 呼叫總覽 / 主機健康監控 / 預算控管
  - AI 學習組:RAG 學習晉升審核 / Caller 反饋趨勢 / PPT 視覺審核歷史
- 6 個 admin/observability template 全面繁中化:
  - 標題、表格欄位、按鈕、badge 文字、JS alert 文案
  - emoji → Font Awesome icon(fa-heartbeat / fa-chart-bar / fa-wallet / fa-brain / fa-comments / fa-search 等)
  - 移除 5 處 footer 手寫 link 條(已由 navbar 取代,避免雙寫)
- routes/admin_observability_routes.py 6 個 render_template 加 active_page='obs_*'
  讓 navbar dropdown 正確高亮

完整覆蓋:host_health / ai_calls_dashboard / budget / promotion_review / quality_trend / ppt_audit_history

設計規範對齊:仍待 Phase 後續工作(ewoooc_base.html 框架升級 + --momo-* design token)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-04 18:49:44 +08:00

238 lines
11 KiB
HTML
Executable File

{#
導航列組件
注意:目前已停用登入驗證,所有選單項目對所有人可見。
使用方式:
{% include 'components/_navbar.html' %}
#}
<nav class="navbar navbar-expand-xl navbar-dark bg-custom-dark fixed-top shadow-sm">
<div class="container">
<!-- 品牌 Logo -->
<a class="navbar-brand d-flex align-items-center" href="/">
<span class="d-none d-sm-inline fw-bold" style="letter-spacing: 2px;">WOOO</span>
</a>
<!-- 手機版選單按鈕 -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<!-- 商品看板 - 所有人可見 -->
<li class="nav-item">
<a class="nav-link {% if active_page == 'dashboard' %}active{% endif %}" href="/">
<i class="fas fa-chart-line me-1"></i>商品看板
</a>
</li>
<!-- 活動看板 - 所有人可見 -->
<li class="nav-item">
<a class="nav-link {% if active_page == 'edm' %}active{% endif %}" href="/edm">
<i class="fas fa-bullhorn me-1"></i>活動看板
</a>
</li>
<!-- 分析報表 -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle {% if active_page in ['sales', 'daily_sales', 'monthly', 'growth'] %}active{% endif %}"
href="#" role="button" data-bs-toggle="dropdown">
<i class="fas fa-chart-bar me-1"></i>分析報表
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="/sales_analysis">
<i class="fas fa-chart-bar me-2"></i>業績分析
</a>
</li>
<li>
<a class="dropdown-item" href="/daily_sales">
<i class="fas fa-calendar-day me-2"></i>當日業績
</a>
</li>
<li>
<a class="dropdown-item" href="/growth_analysis">
<i class="fas fa-chart-line me-2"></i>成長分析
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item" href="/monthly_summary_analysis">
<i class="fas fa-table me-2"></i>月份總表數據分析
</a>
</li>
{% if metabase_url %}
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item" href="{{ metabase_url }}" target="_blank">
<i class="fas fa-chart-pie me-2"></i>自訂圖表 (Metabase)
<i class="fas fa-external-link-alt ms-1 small text-muted"></i>
</a>
</li>
{% endif %}
{% if grist_url %}
<li>
<a class="dropdown-item" href="{{ grist_url }}" target="_blank">
<i class="fas fa-table me-2"></i>資料協作 (Grist)
<i class="fas fa-external-link-alt ms-1 small text-muted"></i>
</a>
</li>
{% endif %}
</ul>
</li>
<!-- 廠商缺貨 -->
<li class="nav-item">
<a class="nav-link {% if active_page == 'vendor_stockout' %}active{% endif %}" href="/vendor-stockout">
<i class="fas fa-box-open me-1"></i>廠商缺貨
</a>
</li>
<!-- AI 助手 -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle {% if active_page in ['ai_recommend', 'ai_history'] %}active{% endif %}"
href="#" role="button" data-bs-toggle="dropdown">
<i class="fas fa-robot me-1"></i>AI 助手
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="/ai_recommend">
<i class="fas fa-magic me-2"></i>智慧文案生成
</a>
</li>
<li>
<a class="dropdown-item" href="/ai_history">
<i class="fas fa-history me-2"></i>生成歷史記錄
</a>
</li>
</ul>
</li>
<!-- AI 觀測台 -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle {% if active_page in ['obs_ai_calls', 'obs_host_health', 'obs_budget', 'obs_promotion_review', 'obs_quality_trend', 'obs_ppt_audit'] %}active{% endif %}"
href="#" role="button" data-bs-toggle="dropdown">
<i class="fas fa-satellite-dish me-1"></i>AI 觀測台
</a>
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">AI 監控</h6></li>
<li>
<a class="dropdown-item" href="/observability/ai_calls">
<i class="fas fa-chart-bar me-2"></i>AI 呼叫總覽
</a>
</li>
<li>
<a class="dropdown-item" href="/observability/host_health">
<i class="fas fa-heartbeat me-2"></i>主機健康監控
</a>
</li>
<li>
<a class="dropdown-item" href="/observability/budget">
<i class="fas fa-wallet me-2"></i>預算控管
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">AI 學習與品質</h6></li>
<li>
<a class="dropdown-item" href="/observability/promotion_review">
<i class="fas fa-brain me-2"></i>RAG 學習晉升審核
</a>
</li>
<li>
<a class="dropdown-item" href="/observability/quality_trend">
<i class="fas fa-comments me-2"></i>Caller 反饋趨勢
</a>
</li>
<li>
<a class="dropdown-item" href="/observability/ppt_audit_history">
<i class="fas fa-search me-2"></i>PPT 視覺審核歷史
</a>
</li>
</ul>
</li>
<!-- 雲端匯入 -->
<li class="nav-item">
<a class="nav-link {% if active_page == 'auto_import' %}active{% endif %}" href="/auto_import">
<i class="fas fa-cloud-download-alt me-1"></i>雲端匯入
</a>
</li>
<!-- 系統管理 -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle {% if active_page in ['settings', 'system_settings', 'logs', 'crawler', 'user_management', 'ai_automation_smoke'] %}active{% endif %}"
href="#" role="button" data-bs-toggle="dropdown">
<i class="fas fa-cog me-1"></i>系統管理
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="/user_management">
<i class="fas fa-users-cog me-2"></i>用戶管理
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item" href="/settings">
<i class="fas fa-robot me-2"></i>爬蟲管理
</a>
</li>
<li>
<a class="dropdown-item" href="/crawler_management">
<i class="fas fa-spider me-2"></i>爬蟲設定
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item" href="/system_settings">
<i class="fas fa-sliders-h me-2"></i>系統設定
</a>
</li>
<li>
<a class="dropdown-item" href="/logs">
<i class="fas fa-file-alt me-2"></i>系統日誌
</a>
</li>
<li>
<a class="dropdown-item" href="/ai_automation_smoke">
<i class="fas fa-heartbeat me-2"></i>AI 自動化 Smoke
</a>
</li>
</ul>
</li>
</ul>
<!-- 右側區域 -->
<div class="d-flex align-items-center">
<!-- 時間顯示 -->
<span class="navbar-text text-light small me-3">
<i class="fas fa-clock me-1"></i>
<span id="navbar-datetime">{{ datetime_now or '' }}</span>
</span>
</div>
</div>
</div>
</nav>
<!-- 導航列時間更新腳本 -->
<script>
(function() {
function updateNavbarTime() {
const now = new Date();
const formatted = now.getFullYear() + '-' +
String(now.getMonth() + 1).padStart(2, '0') + '-' +
String(now.getDate()).padStart(2, '0') + ' ' +
String(now.getHours()).padStart(2, '0') + ':' +
String(now.getMinutes()).padStart(2, '0') + ':' +
String(now.getSeconds()).padStart(2, '0');
const el = document.getElementById('navbar-datetime');
if (el) el.textContent = formatted;
}
// 每秒更新時間
setInterval(updateNavbarTime, 1000);
})();
</script>