154 lines
9.5 KiB
JavaScript
154 lines
9.5 KiB
JavaScript
/* =============================================
|
||
home.js — 主页
|
||
============================================= */
|
||
|
||
// 腾讯LOL新闻数据（真实链接，2026-07-28抓取）
|
||
const NEWS_DATA = [
|
||
{ title: '自然之力玩法概览', date: '2026-07-27', tag: '新闻', url: 'https://lol.qq.com/news/detail.shtml?docid=2940470082043515446' },
|
||
{ title: '【云顶之弈】莲华温泉 不朽厄斐琉斯（暂译）局内预览', date: '2026-07-27', tag: '视频', url: 'https://lol.qq.com/v/v2/detail.shtml?docid=6022405071576176903' },
|
||
{ title: '【云顶之弈】职场精英 小小亚托克斯（暂译）局内预览', date: '2026-07-27', tag: '视频', url: 'https://lol.qq.com/v/v2/detail.shtml?docid=10899500935834176517' },
|
||
{ title: '《双城之战》音乐秀祖安狂欢主题周上线，双人同行限时8折', date: '2026-07-24', tag: '新闻', url: 'https://lol.qq.com/news/detail.shtml?docid=7166884178362213593' },
|
||
{ title: '璀璨臻彩召唤活动上新', date: '2026-07-24', tag: '公告', url: 'https://lol.qq.com/news/detail.shtml?docid=7177124231319241414' },
|
||
{ title: '网鱼海斗挑战赛报名开启，一人到店即可参与，赢每城奖金奖品！', date: '2026-07-21', tag: '新闻', url: 'https://lol.qq.com/news/detail.shtml?docid=18361178770552446235' },
|
||
{ title: '五问星神全球总冠军——AUR Huanmie！', date: '2026-07-17', tag: '新闻', url: 'https://lol.qq.com/news/detail.shtml?docid=15315623112213019510' },
|
||
{ title: '海斗大赛宝典已上线', date: '2026-07-17', tag: '公告', url: 'https://lol.qq.com/news/detail.shtml?docid=3648675094364817556' },
|
||
{ title: '英雄联盟活动及模式上线公告', date: '2026-07-16', tag: '公告', url: 'https://lol.qq.com/news/detail.shtml?docid=7073977129233350758' },
|
||
{ title: '【英雄联盟】T1：2025全球总决赛冠军 官方皮肤宣传片', date: '2026-07-16', tag: '视频', url: 'https://lol.qq.com/v/v2/detail.shtml?docid=10465297417770123157' },
|
||
{ title: '2025 T1冠军皮肤即将上线', date: '2026-07-15', tag: '公告', url: 'https://lol.qq.com/news/detail.shtml?docid=2371950277838654440' },
|
||
{ title: '7月16日凌晨1点停机版本更新公告', date: '2026-07-15', tag: '公告', url: 'https://lol.qq.com/gicp/news/410/37091415.html' },
|
||
];
|
||
|
||
async function renderHome() {
|
||
const page = document.getElementById('page-home');
|
||
page.innerHTML = '<div class="loading-spin">加载中</div>';
|
||
|
||
let summoner = null, gameflow = null, ranked = null, wallet = null;
|
||
await Promise.allSettled([
|
||
API.get('summoner').then(d => summoner = d),
|
||
API.get('gameflow').then(d => gameflow = d),
|
||
API.get('ranked' ).then(d => ranked = d),
|
||
API.get('wallet' ).then(d => wallet = d),
|
||
]);
|
||
|
||
const name = summoner?.gameName || summoner?.displayName || summoner?.internalName || '---';
|
||
const level = summoner?.summonerLevel ?? '--';
|
||
const icon = summoner?.profileIconId ?? 29;
|
||
const phase = typeof gameflow === 'string' ? gameflow : (gameflow?.phase ?? '未知');
|
||
|
||
// ranked 结构：queueMap.RANKED_SOLO_5x5
|
||
let rankStr = '未定级';
|
||
const soloQ = ranked?.queueMap?.['RANKED_SOLO_5x5'];
|
||
if (soloQ && soloQ.tier && soloQ.tier !== '' && soloQ.tier !== 'NONE') {
|
||
rankStr = `${soloQ.tier} ${soloQ.division !== 'NA' ? soloQ.division : ''} ${soloQ.leaguePoints} LP`.trim();
|
||
}
|
||
|
||
// wallet 字段：RP / lol_blue_essence / lol_orange_essence / lol_mythic_essence
|
||
const be = wallet?.lol_blue_essence ?? 'N/A';
|
||
const rp = wallet?.RP ?? 'N/A';
|
||
const oe = wallet?.lol_orange_essence ?? 0;
|
||
const me = wallet?.lol_mythic_essence ?? 0;
|
||
const iconUrl = API.img(`/lol-game-data/assets/v1/profile-icons/${icon}.jpg`);
|
||
|
||
page.innerHTML = `
|
||
<div class="home-grid">
|
||
|
||
<!-- 欢迎横幅（全宽） -->
|
||
<div class="welcome-banner">
|
||
<div>
|
||
<div class="welcome-title">
|
||
<img src="${esc(iconUrl)}" onerror="this.style.display='none'"
|
||
style="width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.5)">
|
||
👋 欢迎回来，${esc(name)}
|
||
</div>
|
||
<div class="welcome-sub">等级 ${level} | 当前状态：${esc(phase)}</div>
|
||
</div>
|
||
<div class="welcome-actions">
|
||
<button class="btn btn-white" onclick="navigate('skins')">🎨 浏览皮肤库</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 左列：召唤师信息 + 快捷功能 -->
|
||
<div style="display:flex;flex-direction:column;gap:16px;">
|
||
<div class="card account-card">
|
||
<div class="card-title">👤 召唤师信息</div>
|
||
<div class="account-row"><span class="account-label">召唤师名称</span><span class="account-value blue">${esc(name)}</span></div>
|
||
<div class="account-row"><span class="account-label">游戏等级</span><span class="account-value">${level}</span></div>
|
||
<div class="account-row"><span class="account-label">当前段位</span><span class="account-value">${esc(rankStr)}</span></div>
|
||
<div class="account-row"><span class="account-label">蓝色精粹</span><span class="account-value">${be}</span></div>
|
||
<div class="account-row"><span class="account-label">橙色精粹</span><span class="account-value">${oe}</span></div>
|
||
<div class="account-row"><span class="account-label">神话精粹</span><span class="account-value">${me}</span></div>
|
||
<div class="account-row"><span class="account-label">点券 (RP)</span><span class="account-value">${rp}</span></div>
|
||
</div>
|
||
<!-- 快捷功能 -->
|
||
<div class="card">
|
||
<div class="card-title">⚡ 快捷功能</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px">
|
||
<button class="btn btn-outline" style="justify-content:center;padding:14px 0" onclick="navigate('skins')">🎨 皮肤库</button>
|
||
<button class="btn btn-outline" style="justify-content:center;padding:14px 0" onclick="navigate('tools')">🔧 工具箱</button>
|
||
<button class="btn btn-outline" style="justify-content:center;padding:14px 0" onclick="navigate('settings')">⚙️ 设置</button>
|
||
<button class="btn btn-outline" style="justify-content:center;padding:14px 0" onclick="refreshHome()">🔄 刷新状态</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右列：使用指南 + 新闻资讯 -->
|
||
<div style="display:flex;flex-direction:column;gap:16px;">
|
||
<!-- 使用指南 -->
|
||
<div class="card guide-card">
|
||
<div class="guide-header">
|
||
<div class="card-title" style="margin:0">
|
||
<svg viewBox="0 0 24 24" width="15" height="15" style="fill:#fa8c16;margin-right:4px;vertical-align:-2px"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
|
||
使用指南
|
||
</div>
|
||
<a class="news-more" href="https://docs.mzeas.com/Mseed%20.html" target="_blank">其他问题 ></a>
|
||
</div>
|
||
<div class="guide-list">
|
||
<div class="guide-item">
|
||
<span class="guide-num">1</span>
|
||
<span class="guide-text">请确保杀毒软件已关闭（火绒除外）</span>
|
||
<a class="guide-link" href="https://docs.mzeas.com/Mseed%20.html?disable_builtin_antivirus.html" target="_blank">> 如何关闭系统自带杀毒?</a>
|
||
</div>
|
||
<div class="guide-item">
|
||
<span class="guide-num">2</span>
|
||
<span class="guide-text">加入熊猫官方QQ群</span>
|
||
<a class="guide-link" href="https://qm.qq.com/q/PtkCYb5Uo6" target="_blank">> 加入我们QQ群</a>
|
||
</div>
|
||
<div class="guide-item">
|
||
<span class="guide-num">3</span>
|
||
<span class="guide-text">熊猫官方网站</span>
|
||
<a class="guide-link" href="http://www.lolxm.cn/" target="_blank">> 打开熊猫网站</a>
|
||
</div>
|
||
</div>
|
||
<div class="guide-disclaimer">
|
||
本软件未经 Riot Games 认可，也不代表 Riot Games 或任何官方参与制作或管理
|
||
Riot Games 产品的人的观点或意见。Riot Games 及其所有相关产物均为 Riot
|
||
Games，Inc 的商标或注册商标。
|
||
</div>
|
||
</div>
|
||
<div class="card news-card" style="flex:1;">
|
||
<div class="news-header">
|
||
<div class="card-title" style="margin:0">
|
||
<svg viewBox="0 0 24 24" width="16" height="16" style="fill:#fa8c16;margin-right:4px;vertical-align:-2px"><path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"/></svg>
|
||
新闻资讯
|
||
</div>
|
||
<a class="news-more" href="https://lol.qq.com/news/index.shtml" target="_blank">更多新闻 ></a>
|
||
</div>
|
||
<div class="news-list-scroll">
|
||
${NEWS_DATA.map(n => {
|
||
const tagColor = n.tag === '视频' ? '#fa8c16' : n.tag === '公告' ? '#52c41a' : '#1677ff';
|
||
return `
|
||
<div class="news-item" onclick="window.open('${esc(n.url)}')">
|
||
<span class="news-tag" style="border-color:${tagColor};color:${tagColor};">${n.tag}</span>
|
||
<span class="news-title">${esc(n.title)}</span>
|
||
<span class="news-date">${n.date}</span>
|
||
</div>`;
|
||
}).join('')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>`;
|
||
}
|
||
|
||
function refreshHome() { renderHome(); showToast('状态已刷新', 'ok'); }
|