dsh-mesh-access 1.4.3 → 1.4.5

package/CHANGELOG.md

@@ -173,3 +173,12 @@
 
 - 1.4.0 面板读的是 tn.urlPlain（不存在），实际接口返回的是 tn.url，
   导致密钥模式下「手机首次打开」链接整块不渲染。改为读 tn.url（公网地址）。
+
+## 1.4.4 — 模式切换改分段滑块开关
+
+- 「入口登录」三个模式按钮改为分段滑块（segmented toggle）：胶囊容器内
+  密钥 / 账号密码 / 关闭 三段，当前模式高亮滑块样式，点其它段即切换。
+
+## 1.4.5 — 滑块加模式说明
+
+- 滑块上方加标签「门锁模式（三选一…当前：xx）」，下方加一行三种模式含义说明。

package/lib/client.js

@@ -387,15 +387,37 @@ window.__ModuleLoader__.load({
               : mode === 'basic' ? '已切到账号密码模式：弹窗登录一次，24 小时内该设备免登录'
               : '已关闭入口登录：任何知道地址的人都能打开，请确认你接受')
             const firstUrl = (tn.url || tn.urlPlain) && a.key ? (tn.url || tn.urlPlain) + '?meshkey=' + encodeURIComponent(a.key) : null
-            const modeBtn = (m, label) => h('button', {
-              style: (a.mode === m ? S.btnPrimary : S.btn),
-              disabled: authBusy || a.mode === m, onClick: () => setMode(m),
+            const modes = [
+              { m: 'key', label: '密钥' },
+              { m: 'basic', label: '账号密码' },
+              { m: 'off', label: '关闭' },
+            ]
+            const segItem = (m, label, active) => h('div', {
+              style: {
+                padding: '6px 16px', borderRadius: 999, cursor: 'pointer', fontSize: 13,
+                background: active ? 'rgba(88,166,255,.9)' : 'transparent',
+                color: active ? '#fff' : 'inherit',
+                fontWeight: active ? 600 : 400,
+                transition: 'all .15s ease', userSelect: 'none',
+              },
+              onClick: () => { if (!authBusy && !active) setMode(m) },
             }, label)
+            const modeNames = { key: '密钥', basic: '账号密码', off: '已关闭' }
             return h('div', null,
-              h('div', { style: S.row },
-                modeBtn('key', '密钥（无弹窗）'),
-                modeBtn('basic', '账号密码'),
-                modeBtn('off', '关闭（危险）'),
+              h('div', { style: S.hint }, '门锁模式（三选一，点选切换；同一时间只有一种生效，当前：' + (modeNames[a.mode] || a.mode) + '）：'),
+              h('div', {
+                style: {
+                  display: 'inline-flex', gap: 4, padding: 4, borderRadius: 999,
+                  border: '1px solid rgba(127,127,127,.4)', background: 'rgba(127,127,127,.12)',
+                  marginBottom: 4,
+                },
+              },
+                modes.map(x => segItem(x.m, x.label, a.mode === x.m)),
+              ),
+              h('div', { style: { ...S.hint, marginTop: 6 } },
+                '密钥＝无弹窗（手机用带密钥的地址认证一次，30 天免登录） · ',
+                '账号密码＝浏览器弹窗（登录一次 24 小时内仅该设备免登录） · ',
+                '关闭＝无门锁（任何拿到地址的人都能进，不建议）',
               ),
               authMsg ? h('div', { style: { ...S.hint, color: '#7ee787', marginTop: 8 } }, authMsg) : null,
               a.mode === 'key'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-mesh-access",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "Control your DSH from your phone: opens a port on the mesh/VPN interface from inside the running server process, so a phone browser gets the same instance and the same session list — no SSH, no second dsh. Also reachable from another PC, a GUI NAS, or a TV box.",
   "type": "module",
   "main": "lib/index.js",