dsh-mesh-access 1.4.6 → 1.5.1

package/CHANGELOG.md

@@ -186,3 +186,15 @@
 ## 1.4.6 — 修复所有复制按钮同时显示「已复制」
 
 - copied 状态由布尔改为记录被复制的值，各按钮只在自己的值刚复制时显示「已复制」。
+
+## 1.5.0 — 面板分页：快速上手 + 控制台
+
+- 面板顶部胶囊分段切换「快速上手 / 控制台」两页，默认快速上手。
+- 快速上手页：装插件 → 组网直连 → 门锁 → 公网入口 分步卡片，
+  重点项着色标注（蓝=操作、绿=好处、红=必须注意），代码一律代码框。
+- 新增「太懒了？」卡片：一键复制懒人文档（填空式提示词），
+  粘给任何 AI 即可托管全部安装流程（含安全组/DNS 等人工步骤提醒）。
+
+## 1.5.1 — 删掉「第 0 步装插件」
+
+- 能看到这个页面的用户必然已装好插件，删除冗余步骤；懒人文档同步删掉装插件一项。

package/lib/client.js

@@ -103,6 +103,7 @@ window.__ModuleLoader__.load({
       const [authBusy, setAuthBusy] = react.useState(false)
       const [authErr, setAuthErr] = react.useState(null)
       const [authForm, setAuthForm] = react.useState({ username: '', password: '' })
+      const [tab, setTab] = react.useState('guide')
       const [authMsg, setAuthMsg] = react.useState('')
       const [busy, setBusy] = react.useState(false)
       const [tunnelBusy, setTunnelBusy] = react.useState(false)
@@ -232,11 +233,73 @@ window.__ModuleLoader__.load({
       const referral = (state && state.referral) || 'https://starvpn.cn/register.html?referralCode=Kurali'
       const tn = tunnel || (state && state.tunnel) || {}
 
-      return h(
-        'div',
-        { style: S.wrap },
-        h('div', { style: S.h1 }, '组网访问'),
-        h('div', { style: S.sub }, '用手机远程控制：手机浏览器打开就是你在电脑上用的那个 DSH——同一实例、同一份会话，不用第二个实例，不用 SSH。'),
+      // ===== 快速上手页 =====
+      const accent = '#58a6ff', good = '#3fb950', warn = '#f85149'
+      const Step = ({ n, title, kids }) => h('div', { style: { marginBottom: 18 } },
+        h('div', { style: { ...S.row, marginBottom: 6 } },
+          h('span', { style: { width: 22, height: 22, borderRadius: 999, background: accent, color: '#fff', fontSize: 12, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, String(n)),
+          h('span', { style: { fontSize: 14, fontWeight: 600 } }, title),
+        ),
+        kids,
+      )
+      const K = ({ children }) => h('code', { style: { ...S.mono, background: 'rgba(88,166,255,.15)', color: accent, padding: '1px 6px', borderRadius: 5 } }, children)
+      const Mark = ({ color, children }) => h('span', { style: { color, fontWeight: 600 } }, children)
+      const lazyDoc = `把我手机远程接到 DSH 上。请严格按照下面的流程执行，遇到选择题先问我。
+
+【我的信息】（把尖括号换成真实值）
+- 我的 DSH 已经在电脑上用 dsh web 跑起来了（端口 3080）
+- 服务器（可选）：IP <SERVER_IP>，root 密码我自己输，不要问
+- 域名（可选）：<MY_DOMAIN>，DNS A 记录我已指到服务器
+
+【你要做的事】
+1. 组网直连：如果我有星空组网/同一局域网，通过插件面板（左侧「组网访问」）在组网地址上开端口，给我带 token 的手机访问地址
+2. 公网入口（我填了服务器才做）：
+   - 在服务器上运行 dsh-mesh-access 项目的 tools/frps-setup.sh（GitHub Release 下载 tgz 解包）
+   - 云安全组放行 7000 和 21081 两个端口——这一步做不了，提醒我去控制台点
+   - 在电脑插件面板「公网隧道」卡片填服务器信息并启动，验证公网地址可达（401/弹窗=正常）
+3. 门锁：在面板「入口登录」切到密钥模式，把「手机首次打开」链接给我
+4. 全部完成后按 docs/AI-SETUP.md 第 6 节模板回报结果；任何一步验证不过不许说成功
+
+参考文档（插件的 docs/ 目录里有）：VPS.md（服务器步骤）、AI-SETUP.md（你的操作手册）。`
+
+      const tabBtn = (id, label) => h('div', {
+        style: {
+          padding: '6px 18px', borderRadius: 999, cursor: 'pointer', fontSize: 13,
+          background: tab === id ? 'rgba(88,166,255,.9)' : 'transparent',
+          color: tab === id ? '#fff' : 'inherit',
+          fontWeight: tab === id ? 600 : 400,
+          transition: 'all .15s ease', userSelect: 'none',
+        },
+        onClick: () => setTab(id),
+      }, label)
+
+      const guidePage = h('div', null,
+        h(Card, { title: '第 1 步 · 组网内直连（最短路径：2 次点击）' },
+          h(Step, { n: 1, title: '开端口' }, h('div', { style: S.hint }, '切到「控制台」页 → 「动作」卡 → ', h(Mark, {color:accent}, '在组网地址上开端口'), '。前提：手机和电脑在同一个组网（星空/局域网）。')),
+          h(Step, { n: 2, title: '复制地址' }, h('div', { style: S.hint }, '「访问地址」卡里点复制——那串 ', h(K, null, 'token'), ' 本身就是一层凭证。')),
+          h(Step, { n: 3, title: '手机打开' }, h('div', { style: S.hint }, '就是电脑上这个 DSH：', h(Mark, {color:good}, '同实例、同会话'), '，不用 SSH、不用第二个 dsh。')),
+        ),
+        h(Card, { title: '第 2 步（可选）· 加一把门锁' },
+          h('div', { style: S.hint }, '「控制台 → 入口登录」，滑块三选一。推荐 ', h(Mark, {color:accent}, '密钥'), '：卡片会自动生成「手机首次打开」链接，手机点一次 ', h(Mark, {color:good}, '30 天免登录、无弹窗'), '；泄露随时重置。账号密码模式 = 弹窗，24 小时仅该设备免登录。'),
+        ),
+        h(Card, { title: '第 3 步（可选）· 自备服务器做公网入口' },
+          h('div', { style: S.hint }, '组网中继慢（800–990ms）或要给非组网设备访问时走这条：'),
+          h(Step, { n: 1, title: '服务器（root）' }, h('div', { style: S.hint }, '跑 ', h(K,null,'tools/frps-setup.sh --domain 域名'), '，装好 frps + 证书 + 反代，结尾打印 IP/token/端口；', h(Mark, {color:warn}, '云安全组要自己放行 7000/21081'), '，DNS A 记录自己加。')),
+          h(Step, { n: 2, title: '电脑' }, h('div', { style: S.hint }, '「控制台 → 公网隧道 → 填服务器信息」，保存即启动，绿色 pill = 公网可达，延迟通常 30–60ms。')),
+        ),
+        h(Card, { title: '太懒了？把下面这段扔给 AI，它全包' },
+          h('div', { style: S.row, marginBottom: 8 },
+            h('button', { style: S.btnPrimary, onClick: () => copy(lazyDoc) }, copied === lazyDoc ? '已复制' : '复制懒人文档'),
+            h('span', { style: S.hint }, '粘到任何 AI 对话框（包括 DSH 自己），把尖括号换成真实值即可'),
+          ),
+          h('details', null,
+            h('summary', { style: { ...S.hint, cursor: 'pointer' } }, '展开预览懒人文档'),
+            h('pre', { style: { ...S.mono, whiteSpace: 'pre-wrap', wordBreak: 'break-all', background: 'rgba(127,127,127,.12)', borderRadius: 8, padding: 12, marginTop: 8, fontSize: 12 } }, lazyDoc),
+          ),
+        ),
+      )
+
+      const consolePage = h('div', null,
 
         h(
           Card, { title: '当前状态' },
@@ -477,6 +540,24 @@ window.__ModuleLoader__.load({
           ),
         ),
       )
+
+      return h(
+        'div',
+        { style: S.wrap },
+        h('div', { style: S.h1 }, '组网访问'),
+        h('div', { style: S.sub }, '用手机远程控制：手机浏览器打开就是你在电脑上用的那个 DSH——同一实例、同一份会话，不用第二个实例，不用 SSH。'),
+        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: 16,
+          },
+        },
+          tabBtn('guide', '快速上手'),
+          tabBtn('console', '控制台'),
+        ),
+        tab === 'guide' ? guidePage : consolePage,
+      )
     }
 
     function apply(ctx) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-mesh-access",
-  "version": "1.4.6",
+  "version": "1.5.1",
   "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",