feat: settings page

2026-08-16 16:56:08 +08:00
parent b157dac7ae
commit 05a4009532
5 changed files with 125 additions and 1 deletions
@@ -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);
+}