v6.7.3: Web Remedies+KP Tab完成渲染 — 用户可见

## Web应用
- main.js: +renderRemediesTab() — 宝石/咒语/捐赠/Dosha卡片式展示
- main.js: +renderKPTab() — 12宫Significator+KP Sublord概览表
- 两个新Tab现在有实际内容(从API获取数据)

## 构建
- HTML 23KB | JS 327KB | 构建 2.3s
This commit is contained in:
732642856
2026-06-11 21:01:05 +08:00
parent 02ec40137a
commit ec0cae4622
+112
View File
@@ -378,11 +378,123 @@ function renderAll() {
renderAVPinda(pinda);
renderExtraDasas(extraDasas);
// 🔥 v6.7.2: API数据渲染 Recovery & KP tabs
renderRemediesTab(chartData);
renderKPTab(chartData);
// 绑定术语 Tooltip(延迟确保所有异步渲染完成)
setTimeout(() => bindTerms(document.querySelector('#page-chart')), 200);
setTimeout(() => bindTerms(document.querySelector('#page-chart')), 800);
}
// ============================================================================
// Remedies Tab 渲染
// ============================================================================
function renderRemediesTab(chartData) {
const sec = document.getElementById('remedies-section');
if (!sec) return;
const ext = chartData._extended;
if (!ext?.remedies) {
sec.innerHTML = '<p style="text-align:center;color:#999;padding:40px">补救建议将在API返回后展示</p>';
return;
}
const { recommendations, summary } = ext.remedies;
let html = `<p style="color:#666;margin-bottom:15px">${summary}</p>`;
// Gems
const gems = recommendations?.gems || [];
if (gems.length > 0) {
html += '<h4 style="color:#9c27b0;margin-top:15px">💎 宝石建议</h4><div style="display:flex;flex-wrap:wrap;gap:8px">';
for (const g of gems.slice(0, 4)) {
html += `<div style="background:#f3e5f5;padding:8px 12px;border-radius:8px;font-size:13px">
<strong>${g.planet}</strong>: ${g.gem}<br><small style="color:#888">${g.metal || ''} · ${g.finger || ''} · ${g.day || ''}</small></div>`;
}
html += '</div>';
}
// Mantras
const mantras = recommendations?.mantras || [];
if (mantras.length > 0) {
html += '<h4 style="color:#1565c0;margin-top:15px">🕉️ 咒语建议</h4>';
for (const m of mantras.slice(0, 5)) {
html += `<div style="background:#e3f2fd;padding:6px 12px;border-radius:6px;margin:4px 0;font-size:13px">
<strong>${m.mantra}</strong> × ${m.repetitions}${m.note || ''}</div>`;
}
}
// Donations
const donations = recommendations?.donations || [];
if (donations.length > 0) {
html += '<h4 style="color:#2e7d32;margin-top:15px">🙏 捐赠建议</h4>';
for (const d of donations.slice(0, 3)) {
html += `<div style="background:#e8f5e9;padding:6px 12px;border-radius:6px;margin:4px 0;font-size:13px">${d.note || ''}</div>`;
}
}
// Dosha remedies
const dr = recommendations?.dosha_remedies || [];
if (dr.length > 0) {
html += '<h4 style="color:#e65100;margin-top:15px">⚠️ Dosha专项补救</h4>';
for (const d of dr) {
html += `<div style="background:#fff3e0;padding:8px 12px;border-radius:6px;margin:4px 0;font-size:13px">
<strong>${d.dosha}</strong>: ${d.note || ''}</div>`;
}
}
sec.innerHTML = html;
}
// ============================================================================
// KP Tab 渲染
// ============================================================================
function renderKPTab(chartData) {
const sec = document.getElementById('kp-section');
if (!sec) return;
const ext = chartData._extended;
if (!ext?.kp?.houses) {
sec.innerHTML = '<p style="text-align:center;color:#999;padding:40px">KP分析将在API返回后展示</p>';
return;
}
let html = '<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px">';
// House significators
for (let h = 1; h <= 12; h++) {
const hd = ext.kp.houses[h];
if (!hd) continue;
const sig = hd.significators || {};
html += `<div style="background:#f9f9f9;padding:10px;border-radius:8px;font-size:12px">
<strong>${h}宫 (${hd.sign || ''})</strong><br>
A: ${(sig.A || []).join(', ') || '—'}<br>
B: ${(sig.B || []).join(', ') || '—'}<br>
C: ${(sig.C || []).join(', ') || '—'}<br>
D: ${sig.D || '—'}
</div>`;
}
html += '</div>';
// KP lords summary
const planets = ext.kp.planets || {};
if (Object.keys(planets).length > 0) {
html += '<h4 style="margin-top:15px">KP Sublord 概览</h4><table style="width:100%;font-size:12px">';
html += '<tr style="background:#f5f5f5"><th>行星</th><th>Sub Lord</th><th>SubSub Lord</th><th>A</th><th>B</th></tr>';
for (const [pn, pd] of Object.entries(planets).slice(0, 9)) {
const kl = pd.kp_lords || {};
const sig = pd.significators || {};
html += `<tr>
<td>${pn}</td>
<td>${kl.sub_lord || '—'}</td>
<td>${kl.sub_sub_lord || '—'}</td>
<td>${sig.A || '—'}</td>
<td>${sig.B || '—'}</td>
</tr>`;
}
html += '</table>';
}
sec.innerHTML = html;
}
// ============================================================================
// 星盘中心摘要构建
// ============================================================================