feat: settings interactions (theme/mask/brightness/server-url), svg icons, seconds display, page transition

2026-08-16 18:25:28 +08:00
parent e2a289a4b0
commit c9dcb88647
11 changed files with 510 additions and 29 deletions
@@ -1,11 +1,21 @@
 // 桌面路由：侧边栏 5 页 + 页面切换 + 顶部时间
 // Launcher router: 5 sidebar pages + page switching + top clock
+// 侧边栏图标：内联 SVG（stroke=currentColor，跟随主题色），替代 emoji
+// Sidebar icons: inline SVG (stroke=currentColor, follows theme color), replacing emoji
+const SVG_ICONS = {
+  home: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l9-8 9 8"/><path d="M5 9.5V21h14V9.5"/><path d="M10 21v-6h4v6"/></svg>',
+  immersive: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M5 11l1.5-4.5A2 2 0 018.4 5h7.2a2 2 0 011.9 1.5L19 11"/><path d="M3 11v5a1 1 0 001 1h1a1 1 0 001-1v-1h12v1a1 1 0 001 1h1a1 1 0 001-1v-5"/><circle cx="7.5" cy="16" r="1.6"/><circle cx="16.5" cy="16" r="1.6"/></svg>',
+  webapp: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a15 15 0 010 18a15 15 0 010-18"/></svg>',
+  app: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="8" height="8" rx="2"/><rect x="13" y="3" width="8" height="8" rx="2"/><rect x="3" y="13" width="8" height="8" rx="2"/><rect x="13" y="13" width="8" height="8" rx="2"/></svg>',
+  settings: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33a1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82a1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51a1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>',
+};
+
 const PAGES = [
-  { id: 'home', label: '首页', icon: '🏠' },
-  { id: 'immersive', label: '沉浸首页', icon: '🚗' },
-  { id: 'webapplist', label: 'H5 应用', icon: '🌐' },
-  { id: 'applist', label: '安卓 APP', icon: '📱' },
-  { id: 'settings', label: '设置', icon: '⚙️' },
+  { id: 'home', label: '首页', icon: SVG_ICONS.home },
+  { id: 'immersive', label: '沉浸首页', icon: SVG_ICONS.immersive },
+  { id: 'webapplist', label: 'H5 应用', icon: SVG_ICONS.webapp },
+  { id: 'applist', label: '安卓 APP', icon: SVG_ICONS.app },
+  { id: 'settings', label: '设置', icon: SVG_ICONS.settings },
 ];

 const router = {
@@ -14,10 +24,11 @@ const router = {
    this.current = id;
    document.querySelectorAll('[data-page]').forEach(el =>
      el.classList.toggle('active', el.dataset.page === id));
-    // 非首页时侧边栏顶部显示小时间
-    // Show the small clock at the sidebar top when not on home
+    // 非首页时侧边栏顶部显示小时间（容器始终占位，仅切换可见性避免撑动图标）
+    // Show the small clock at the sidebar top when not on home (the container
+    // always occupies space; only toggle visibility to avoid shifting icons)
    const clock = document.getElementById('rail-clock');
-    if (clock) clock.style.display = (id === 'home') ? 'none' : 'block';
+    if (clock) clock.style.visibility = (id === 'home') ? 'hidden' : 'visible';
    if (id === 'home') window.updateHomeCards && window.updateHomeCards();
    if (id === 'applist') window.loadAppList && window.loadAppList();
    if (id === 'webapplist') window.loadWebAppList && window.loadWebAppList();