feat: settings page
This commit is contained in:
@@ -310,3 +310,109 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#tab-panel .tab-close:hover { opacity: 1; }
|
#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);
|
||||||
|
}
|
||||||
|
|||||||
@@ -27,6 +27,7 @@
|
|||||||
<script src="js/pages/applist.js"></script>
|
<script src="js/pages/applist.js"></script>
|
||||||
<script src="js/pages/webapplist.js"></script>
|
<script src="js/pages/webapplist.js"></script>
|
||||||
<script src="js/pages/home.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/tabs.js"></script>
|
||||||
<script src="js/webapp/topbar.js"></script>
|
<script src="js/webapp/topbar.js"></script>
|
||||||
<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>`;
|
||||||
|
};
|
||||||
@@ -21,5 +21,6 @@ const router = {
|
|||||||
if (id === 'home') window.updateHomeCards && window.updateHomeCards();
|
if (id === 'home') window.updateHomeCards && window.updateHomeCards();
|
||||||
if (id === 'applist') window.loadAppList && window.loadAppList();
|
if (id === 'applist') window.loadAppList && window.loadAppList();
|
||||||
if (id === 'webapplist') window.loadWebAppList && window.loadWebAppList();
|
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 豁免,声明即生效 |
|
| `QUERY_ALL_PACKAGES` | 查询已装应用列表 | launcher 豁免,声明即生效 |
|
||||||
| `MEDIA_CONTENT_CONTROL` | 读取媒体状态 | 运行时 + 通知监听授权(用户手动) |
|
| `BIND_NOTIFICATION_LISTENER_SERVICE` | 读取媒体通知(媒体卡数据源) | 用户手动授权「通知使用权」 |
|
||||||
| `READ_CALENDAR` | 日历卡片数据 | 运行时授权 |
|
| `READ_CALENDAR` | 日历卡片数据 | 运行时授权 |
|
||||||
| `INTERNET` | 拉取 webAPP/卡片 | 声明即生效 |
|
| `INTERNET` | 拉取 webAPP/卡片 | 声明即生效 |
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user