feat: android app list page with search and icons
This commit is contained in:
@@ -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; }
|
||||
|
||||
@@ -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)));
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user