feat: android app list page with search and icons

This commit is contained in:
2026-08-16 16:20:10 +08:00
parent bd56d89cf3
commit 0153ec38ae
6 changed files with 98 additions and 1 deletions
+40
View File
@@ -59,3 +59,43 @@ body {
.page { display: none; height: 100%; }
.page.active { display: flex; flex-direction: column; }
/* 安卓 APP 列表页:搜索框 + 网格 */
/* Android app list page: search box + grid */
.search { padding: 16px; }
.search input {
width: 100%;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid var(--glass-border);
background: var(--glass-bg);
color: var(--text);
font-size: 14px;
outline: none;
}
.grid {
flex: 1;
min-height: 0;
overflow-y: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
gap: 12px;
padding: 0 16px 16px;
}
.cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 16px;
padding: 12px 8px;
cursor: pointer;
color: var(--text);
}
.cell .ic { width: 48px; height: 48px; border-radius: 12px; }
.cell .lbl { font-size: 12px; color: var(--text-dim); text-align: center; }
+1
View File
@@ -23,6 +23,7 @@
</div>
<script src="js/bridge.js"></script>
<script src="js/router.js"></script>
<script src="js/pages/applist.js"></script>
<script>
// 渲染侧边栏导航项 / render sidebar nav items
const nav = document.getElementById('rail-nav');
@@ -0,0 +1,24 @@
// 安卓 APP 列表页:网格 + 搜索 + 图标 base64
// Android app list page: grid + search + icon base64
window.loadAppList = async function () {
const page = document.querySelector('[data-page="applist"]');
if (page.dataset.loaded) return; page.dataset.loaded = '1';
page.innerHTML = `
<div class="search"><input id="app-search" placeholder="搜索应用…"></div>
<div class="grid" id="app-grid"></div>`;
const apps = JSON.parse(await bridge.call('listApps'));
const grid = document.getElementById('app-grid');
const render = (list) => {
grid.innerHTML = list.map(a => `
<button class="cell" data-pkg="${a.packageName}">
<img class="ic" src="${a.iconBase64 || ''}" alt="">
<span class="lbl">${a.label}</span>
</button>`).join('');
grid.querySelectorAll('.cell').forEach(el => el.onclick = () => bridge.call('launchApp', el.dataset.pkg));
};
render(apps);
document.getElementById('app-search').oninput = (e) => {
const kw = e.target.value.toLowerCase();
render(apps.filter(a => a.label.toLowerCase().includes(kw)));
};
};