124 lines
4.6 KiB
HTML
124 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>洋葱客户大数据标签系统</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<!-- Top Bar -->
|
||
<header class="topbar">
|
||
<div class="topbar-left">
|
||
<div class="brand">
|
||
<div class="brand-icon">
|
||
<!-- Simplified Onion Icon -->
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z" />
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6C8.69 6 6 8.69 6 12C6 15.31 8.69 18 12 18C15.31 18 18 15.31 18 12C18 8.69 15.31 6 12 6Z" />
|
||
</svg>
|
||
</div>
|
||
<div class="brand-text">
|
||
<span class="brand-name">洋葱客户大数据标签系统</span>
|
||
<span class="brand-sub">AMBER ONION DATA INTELLIGENCE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="topbar-center">
|
||
<!-- 原 result-counter 已移至底部 -->
|
||
</div>
|
||
|
||
<div class="topbar-right">
|
||
<button class="action-btn primary" id="btnCompute" onclick="compute()" disabled style="display:none">
|
||
<span class="btn-icon">⚡</span> 实时计算
|
||
</button>
|
||
<button class="action-btn ghost" onclick="resetAll()">重置</button>
|
||
<button class="action-btn ghost" onclick="showPanel('sample')" id="btnSample" style="display:none">查看用户样本</button>
|
||
<button class="action-btn ghost" onclick="showPanel('duration')" id="btnDuration">指导周期分析</button>
|
||
<button class="action-btn ghost" onclick="showPanel('import')">导入数据</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Selected Tags Bar -->
|
||
<div class="selected-bar" id="selectedBar" style="display:none">
|
||
<span class="sel-label">已选条件：</span>
|
||
<div class="sel-tags" id="selTags"></div>
|
||
<span class="sel-logic" style="color:#666; font-size:12px; margin-left:12px;">
|
||
<span style="color:#999;">（同分类: OR | 不同分类: AND）</span>
|
||
</span>
|
||
<button class="sel-clear" onclick="resetAll()">✕ 清空</button>
|
||
</div>
|
||
|
||
<!-- Main Layout -->
|
||
<div class="main-layout">
|
||
<!-- Tag Board -->
|
||
<div class="board" id="tagBoard">
|
||
<!-- Columns rendered by JS -->
|
||
<div class="board-loading" id="boardLoading">
|
||
<div class="spinner"></div>
|
||
<span>加载标签体系...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Panel (collapsible) -->
|
||
<div class="right-panel" id="rightPanel" style="display:none">
|
||
<div class="rp-header">
|
||
<span class="rp-title" id="rpTitle">用户样本</span>
|
||
<button class="rp-close" onclick="closePanel()">✕</button>
|
||
</div>
|
||
<div class="rp-body" id="rpBody"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Compute result overlay on cards -->
|
||
<div class="compute-overlay" id="computeOverlay" style="display:none">
|
||
<div class="co-inner">
|
||
<div class="spinner-lg"></div>
|
||
<span>计算中...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Import Panel Modal -->
|
||
<div class="modal-mask" id="importModal" style="display:none">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<span>📡 数据导入接口</span>
|
||
<button onclick="closeModal('importModal')">✕</button>
|
||
</div>
|
||
<div class="modal-body" id="importModalBody"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom Bar (Footer) -->
|
||
<div class="bottom-bar">
|
||
<div class="result-counter" id="resultCounter">
|
||
<!-- 左：当前规模 -->
|
||
<div class="rc-metric">
|
||
<div class="rc-metric-label">当前规模</div>
|
||
<div class="rc-main">
|
||
<span class="rc-num" id="rcNum">—</span>
|
||
<span class="rc-unit">人</span>
|
||
</div>
|
||
<div class="rc-sub">/ 共 <span id="rcTotal">—</span></div>
|
||
</div>
|
||
<!-- 分隔线 -->
|
||
<div class="rc-divider"></div>
|
||
<!-- 右：预估转化 -->
|
||
<div class="rc-metric">
|
||
<div class="rc-metric-label">预估转化</div>
|
||
<div class="rc-main">
|
||
<span class="rc-num rc-num-rate" id="rcRate">—</span>
|
||
<span class="rc-unit">%</span>
|
||
</div>
|
||
<div class="rc-delta" id="rcDelta" style="display:none"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|