From 576e9ee5a51a461743db82d10869abbb6db4348c Mon Sep 17 00:00:00 2001 From: wangjia <809946525@qq.com> Date: Sun, 12 Jul 2026 17:01:28 +0800 Subject: [PATCH] =?UTF-8?q?design(prototype):=20=E8=AE=BE=E5=A4=87?= =?UTF-8?q?=E2=8B=AE=E5=BC=B9=E5=87=BA=E8=8F=9C=E5=8D=95(=E9=87=8D?= =?UTF-8?q?=E5=91=BD=E5=90=8D/=E5=BC=BA=E5=88=B6=E9=80=80=E5=87=BA/?= =?UTF-8?q?=E6=B8=85=E9=99=A4=E7=99=BB=E5=BD=95=E4=BF=A1=E6=81=AF)=20+=20?= =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86=E9=A1=B5=E5=AE=BD=E5=BA=A6?= =?UTF-8?q?=E6=94=B6=E7=AA=84600=E5=B1=85=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 设备行 ⋮ 加弹出菜单(本机仅重命名/他机三项,清除为 danger),复用 .menu 原子,外部点击关闭 - 设备管理页内容 max-width:600 居中(对齐订单/账户页,不再全宽) Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_013nMthbVEmQquxBRKb9Fj8u --- design/prototype/screens/ui-desktop.html | 63 ++++++++++++++++++++++-- design/prototype/screens/ui-mobile.html | 45 +++++++++++++++-- 2 files changed, 99 insertions(+), 9 deletions(-) diff --git a/design/prototype/screens/ui-desktop.html b/design/prototype/screens/ui-desktop.html index fd43d7d..15ab4ff 100644 --- a/design/prototype/screens/ui-desktop.html +++ b/design/prototype/screens/ui-desktop.html @@ -167,6 +167,13 @@ background:transparent; color:var(--fg3); cursor:pointer; border-radius:var(--radius-sm); } .dv-more:hover{ background:var(--bg-subtle); } .dv-more svg{ width:18px; height:18px; } + /* 设备行 ⋮ 弹出菜单（复用 .menu / .menu-item 原子，加图标 + 危险项） */ + .dv-menu{ position:relative; display:inline-flex; } + .dv-menu .menu{ min-width:172px; } + .dv-menu .menu-item{ display:flex; align-items:center; gap:var(--space-2); } + .dv-menu .menu-item svg{ width:15px; height:15px; flex:none; } + .dv-menu .menu-item.is-danger{ color:var(--danger); } + .dv-menu .menu-item.is-danger:hover{ background:var(--danger-subtle); } /* ---- 设置视图 ---- */ .settings-view{ padding:var(--space-5) var(--space-6) var(--space-6); max-width:none; } @@ -634,7 +641,7 @@
- -
+
@@ -1002,7 +1009,7 @@
iPhone 15本机
当前在线
-
+
@@ -1010,7 +1017,7 @@
MacBook Pro
最后在线 2 小时前
-
+
@@ -1018,7 +1025,7 @@
iPad Air
最后在线 昨天
-
+
@@ -1181,6 +1188,8 @@ const I18N = { devFreeLbl:'我的设备 · 1 / 1 台', devProLbl:'我的设备 · 3 / 5 台', secDevices:'设备', myDevices:'我的设备', devMgmt:'设备管理', thisDevice:'本机', devOnlineNow:'当前在线', lastOnline:'最后在线', rel2h:'2 小时前', relYday:'昨天', + devRename:'重命名', devForceLogout:'强制退出', devClearLogin:'清除登录信息', + devRenamedToast:'已重命名（演示）', devLoggedOutToast:'已强制退出（演示）', devClearedToast:'已清除登录信息（演示）', secPref:'偏好', prefLang:'语言', prefTheme:'深色外观', prefProtocol:'协议', followLight:'跟随浅色', stateOn:'已开启', secMore:'更多', navDevices:'设备管理', navSettings:'设置', navRedeem:'兑换 & 购买', navContact:'联系我们', navWebUC:'网页用户中心', logout:'退出登录', @@ -1253,6 +1262,8 @@ const I18N = { devFreeLbl:'My devices · 1 / 1', devProLbl:'My devices · 3 / 5', secDevices:'Devices', myDevices:'My Devices', devMgmt:'Device management', thisDevice:'This device', devOnlineNow:'Online now', lastOnline:'Last online', rel2h:'2h ago', relYday:'yesterday', + devRename:'Rename', devForceLogout:'Force logout', devClearLogin:'Clear login info', + devRenamedToast:'Renamed (demo)', devLoggedOutToast:'Force logged out (demo)', devClearedToast:'Login info cleared (demo)', secPref:'Preferences', prefLang:'Language', prefTheme:'Dark appearance', prefProtocol:'Protocol', followLight:'Follow light', stateOn:'On', secMore:'More', navDevices:'Devices', navSettings:'Settings', navRedeem:'Redeem & Buy', navContact:'Contact us', navWebUC:'Web user center', logout:'Sign out', @@ -1918,6 +1929,32 @@ function subShow(name){ function subOpen(name){ subShow(name); subOverlay.classList.add('is-open'); } function subClose(){ subOverlay.classList.remove('is-open'); } function subToast(msg){ const t=$('#subToast'); $('#subToastText').textContent=msg; t.classList.add('show'); clearTimeout(subToastTimer); subToastTimer=setTimeout(()=>t.classList.remove('show'),1800); } +/* 设备行 ⋮ 弹出菜单（重命名 / 强制退出 / 清除登录信息；本机仅重命名。设备为静态屏，直接绑定） */ +(function(){ + function closeDevMenus(){ + document.querySelectorAll('#subOverlay .dv-menu .menu').forEach(m=>m.hidden=true); + document.querySelectorAll('#subOverlay .dv-menu .dv-more').forEach(b=>b.setAttribute('aria-expanded','false')); + } + document.querySelectorAll('#subOverlay .dv-menu .dv-more').forEach(function(btn){ + btn.addEventListener('click', function(e){ + e.stopPropagation(); + var menu=btn.parentNode.querySelector('.menu'); + var willOpen=menu.hidden; + closeDevMenus(); + if(willOpen){ menu.hidden=false; btn.setAttribute('aria-expanded','true'); } + }); + }); + document.querySelectorAll('#subOverlay .dv-mi').forEach(function(it){ + it.addEventListener('click', function(e){ + e.stopPropagation(); + var act=it.dataset.act; + var key = act==='rename' ? 'devRenamedToast' : (act==='logout' ? 'devLoggedOutToast' : 'devClearedToast'); + closeDevMenus(); + subToast(D()[key]); + }); + }); + document.addEventListener('click', closeDevMenus); +})(); /* 语言切换时同步子屏标题（由 render() 调用） */ function subLangSync(){ if(subOverlay && subOverlay.classList.contains('is-open')) subShow(subOverlay.dataset.sub||'settings'); }