feat: settings page

This commit is contained in:
2026-08-16 16:56:08 +08:00
parent b157dac7ae
commit 05a4009532
5 changed files with 125 additions and 1 deletions
+106
View File
@@ -310,3 +310,109 @@ body {
}
#tab-panel .tab-close:hover { opacity: 1; }
/* 设置页:Miuix Preference 分组 + 柔光玻璃条目 */
/* Settings page: Miuix Preference groups + soft-glass items */
.st-wrap {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 16px;
}
/* 分组标题:小号弱化文本 */
/* Group header: small dim text */
.st-group {
margin: 8px 4px 6px;
font-size: 13px;
color: var(--text-dim);
}
/* 设置项:玻璃拟态圆角行(复用 Task 4 token,非纯色背景) */
/* Setting item: soft-glass rounded row (reuse Task 4 tokens, not solid color) */
.st-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
margin-bottom: 8px;
border-radius: 14px;
background: var(--glass-bg);
backdrop-filter: blur(20px) saturate(1.2) brightness(1.05) contrast(1.1);
-webkit-backdrop-filter: blur(20px) saturate(1.2) brightness(1.05) contrast(1.1);
border: 1px solid var(--glass-border);
color: var(--text);
}
.st-item .lbl { font-size: 15px; }
/* 右侧箭头:弱化色 */
/* Trailing arrow: dim color */
.st-item .arrow {
color: var(--text-dim);
font-size: 18px;
line-height: 1;
}
/* 开关:Miuix Switch(静态展示,交互留后续) */
/* Switch: Miuix style (static; interaction later) */
.sw {
position: relative;
flex: none;
width: 46px;
height: 28px;
border-radius: 999px;
background: rgba(127, 127, 127, 0.35);
transition: background .2s;
}
.sw.on { background: var(--accent); }
.sw i {
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
border-radius: 999px;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: left .2s;
}
.sw.on i { left: 21px; }
/* 滑块:Miuix Slider(静态展示:轨道 + 高亮填充 + 圆点) */
/* Slider: Miuix style (static: track + filled portion + thumb) */
.slider {
position: relative;
flex: none;
width: 140px;
height: 4px;
border-radius: 999px;
background: var(--glass-border);
}
.slider::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 60%;
border-radius: 999px;
background: var(--accent);
}
.slider i {
position: absolute;
top: 50%;
left: 60%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--accent);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
+1
View File
@@ -27,6 +27,7 @@
<script src="js/pages/applist.js"></script>
<script src="js/pages/webapplist.js"></script>
<script src="js/pages/home.js"></script>
<script src="js/pages/settings.js"></script>
<script src="js/webapp/tabs.js"></script>
<script src="js/webapp/topbar.js"></script>
<script>
@@ -0,0 +1,16 @@
// 设置页:Miuix Preference 分组 + 玻璃条目(仅 UI 骨架,交互留后续)
// Settings page: Miuix Preference groups + glass items (UI skeleton only; interactions later)
window.loadSettings = function () {
const page = document.querySelector('[data-page="settings"]');
if (page.dataset.loaded) return; page.dataset.loaded = '1';
page.innerHTML = `<div class="st-wrap">
<div class="st-group">显示</div>
<div class="st-item"><span class="lbl">跟随系统主题</span><span class="sw on"><i></i></span></div>
<div class="st-item"><span class="lbl">屏幕亮度</span><span class="slider"><i></i></span></div>
<div class="st-group">网络</div>
<div class="st-item"><span class="lbl">webAPP 服务器地址</span><span class="arrow"></span></div>
<div class="st-item"><span class="lbl">检查更新</span><span class="arrow"></span></div>
<div class="st-group">关于</div>
<div class="st-item"><span class="lbl">版本 0.1.0</span><span class="arrow"></span></div>
</div>`;
};
+1
View File
@@ -21,5 +21,6 @@ const router = {
if (id === 'home') window.updateHomeCards && window.updateHomeCards();
if (id === 'applist') window.loadAppList && window.loadAppList();
if (id === 'webapplist') window.loadWebAppList && window.loadWebAppList();
if (id === 'settings') window.loadSettings && window.loadSettings();
}
};
@@ -274,7 +274,7 @@ cards/<card-id>/
| 权限 | 用途 | 授予方式 |
|---|---|---|
| `QUERY_ALL_PACKAGES` | 查询已装应用列表 | launcher 豁免,声明即生效 |
| `MEDIA_CONTENT_CONTROL` | 读取媒体状态 | 运行时 + 通知监听授权(用户手动) |
| `BIND_NOTIFICATION_LISTENER_SERVICE` | 读取媒体通知(媒体卡数据源) | 用户手动授权「通知使用权」 |
| `READ_CALENDAR` | 日历卡片数据 | 运行时授权 |
| `INTERNET` | 拉取 webAPP/卡片 | 声明即生效 |