@twinsearth/dsh-2xray 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.2.3 — 2026-10-29
+
+### 界面
+
+- 主面板改为三卡片：①当前 VPN 配置（节点下拉、协议/安全/SNI、切换节点）②实时连接信息（运行时长、代理端口、Xray PID、入站类型，日志可折叠）③连接状态（状态点、延迟、出口 IP、节点名）。
+- 新增 `POST /api/xray/switch`（鉴权围栏）驱动节点切换；切换依赖控制面与多节点，单节点会返回明确错误。
+- 状态快照补充 `inbound`、`uptimeSec`、节点 `security/serverName/flow/network`。
+
 ## 0.2.2 — 2026-10-29
 
 ### 新增

package/index.js

@@ -158,6 +158,24 @@ export function apply(ctx, rawConfig) {
             }),
           'dsh-2xray: status api',
         )
+        child.effect(
+          () =>
+            child.connection.fetch.register({
+              path: '/api/xray/switch',
+              methods: ['POST'],
+              requestBody: 'buffered',
+              fetch: async (request) => {
+                try {
+                  const body = await request.json()
+                  const activeNode = await supervisor.switchNode(String(body?.node ?? ''))
+                  return Response.json({ ok: true, activeNode })
+                } catch (error) {
+                  return Response.json({ ok: false, error: String(error?.message ?? error) }, { status: 400 })
+                }
+              },
+            }),
+          'dsh-2xray: switch api',
+        )
       } catch (error) {
         logger.warn(`状态 API 注册失败：${String(error)}`)
       }

package/lib/client.js

@@ -114,29 +114,100 @@ window.__ModuleLoader__.load({
       return { status, logs, error, setLogs }
     }
 
-    function NodeTable({ status }) {
+    function fmtUptime(seconds) {
+      const total = Math.max(0, Math.floor(seconds ?? 0))
+      const hh = Math.floor(total / 3600)
+      const mm = Math.floor((total % 3600) / 60)
+      const ss = total % 60
+      return `${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}:${String(ss).padStart(2, '0')}`
+    }
+
+    function ConfigCard({ status }) {
       const nodes = status?.nodes ?? []
+      const active = nodes.find((node) => node.tag === status?.activeNode) ?? nodes[0]
+      const [switching, setSwitching] = React.useState(false)
+      const [message, setMessage] = React.useState('')
+
       if (nodes.length === 0) {
-        return h('div', { style: { ...C.muted, padding: '10px 0', fontSize: 12.5 } }, '还没有节点。到「设置 → 插件 → Xray 代理」粘贴 vless 链接并保存，重启 DSH 后这里会显示。')
+        return h('section', { style: C.card },
+          h('div', { style: C.cardHead }, '① 当前 VPN 配置'),
+          h('div', { style: { ...C.muted, fontSize: 12.5 } }, '还没有节点。到「设置 → 插件 → Xray 代理」粘贴 vless 链接并保存，重启 DSH 后这里会显示。'))
       }
-      return h(
-        'table',
-        { style: C.table },
-        h('thead', null, h('tr', null,
-          h('th', { style: C.th }), h('th', { style: C.th }, '节点'), h('th', { style: C.th }, '地址'),
-          h('th', { style: C.th }, '端口'), h('th', { style: C.th }, '状态'))),
-        h('tbody', null, nodes.map((node) => {
-          const active = node.tag === status.activeNode
-          return h('tr', { key: node.tag },
-            h('td', { style: C.td }, active
-              ? h('span', { style: { ...C.dot, background: '#15803d', display: 'inline-block' } })
-              : h('span', { style: { ...C.dot, border: '1px solid currentColor', background: 'transparent', display: 'inline-block' } })),
-            h('td', { style: C.td }, node.id ?? node.tag),
-            h('td', { style: { ...C.td, ...C.mono } }, node.address || '—'),
-            h('td', { style: { ...C.td, ...C.mono } }, node.port ?? '—'),
-            h('td', { style: C.td }, active ? '当前' : '—'))
-        })),
-      )
+
+      const switchTo = async (tag) => {
+        if (!tag || tag === status?.activeNode) return
+        setSwitching(true)
+        setMessage('')
+        try {
+          const response = await fetch(new URL('api/xray/switch', document.baseURI), {
+            method: 'POST',
+            credentials: 'same-origin',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ node: tag }),
+          })
+          const data = await response.json()
+          if (!data.ok) throw new Error(data.error || '切换失败')
+          setMessage(`已切换到 ${tag}`)
+        } catch (error) {
+          setMessage(String(error.message || error))
+        } finally {
+          setSwitching(false)
+        }
+      }
+
+      return h('section', { style: C.card },
+        h('div', { style: C.cardHead }, '① 当前 VPN 配置',
+          h('span', { style: { ...C.muted, fontWeight: 400, marginLeft: 'auto' } }, `${nodes.length} 个节点`)),
+        h('div', { style: { display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' } },
+          h('select', {
+            value: active?.tag ?? '',
+            disabled: switching,
+            onChange: (event) => switchTo(event.target.value),
+            style: { ...C.input, width: 'auto', minWidth: 180 },
+          }, nodes.map((node) => h('option', { key: node.tag, value: node.tag }, node.id ?? node.tag))),
+          h('span', { style: { ...C.mono, fontSize: 12.5 } }, active ? `VLESS · ${active.address}:${active.port}` : '—'),
+          h('span', { style: { ...C.muted, fontSize: 12 } }, switching ? '切换中…' : message)),
+        active
+          ? h('div', { style: { ...C.muted, fontSize: 12.5, marginTop: 8 } },
+              `安全：${String(active.security || 'none').toUpperCase()}${active.serverName ? ` (${active.serverName})` : ''} · 传输：${active.network || 'raw'}${active.flow ? ` · flow：${active.flow}` : ''}`)
+          : null)
+    }
+
+    function RuntimeCard({ status, logs, setLogs }) {
+      const [showLogs, setShowLogs] = React.useState(false)
+      const inbound = status?.inbound
+      const inboundLabel = inbound
+        ? `${String(inbound.protocol).toUpperCase()}:${inbound.port}${inbound.socks ? ` · SOCKS5:${inbound.socks.port}` : ''}`
+        : '—'
+      const metrics = [
+        ['运行时长', fmtUptime(status?.uptimeSec)],
+        ['代理端口', status ? `:${status.port}` : '—'],
+        ['Xray PID', status?.process?.pid ?? '—'],
+        ['入站类型', inboundLabel],
+      ]
+      return h('section', { style: C.card },
+        h('div', { style: C.cardHead }, '② 实时连接信息',
+          h('button', { type: 'button', style: { ...C.btn, marginLeft: 'auto' }, onClick: () => setShowLogs((value) => !value) },
+            showLogs ? '收起日志' : '查看日志')),
+        h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 } },
+          metrics.map(([label, value]) => h('div', { key: label },
+            h('div', { style: { ...C.muted, fontSize: 11.5 } }, label),
+            h('div', { style: { ...C.mono, fontSize: 14, fontWeight: 600, marginTop: 2 } }, String(value))))),
+        showLogs ? h('div', { style: { marginTop: 12 } }, h(LogList, { logs, setLogs })) : null)
+    }
+
+    function StatusCard({ status, latency, egress, phase }) {
+      return h('section', { style: C.card },
+        h('div', { style: C.cardHead }, '③ 连接状态'),
+        h('div', { style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' } },
+          h('span', { style: { ...C.dot, background: phase.color } }),
+          h('b', { style: { fontSize: 14 } }, phase.label),
+          h('span', { style: { ...C.mono, fontSize: 13 } }, latency == null ? '延迟 —' : `延迟 ${latency} ms`),
+          h('span', { style: { ...C.mono, fontSize: 12.5, marginLeft: 'auto' } },
+            egress?.ip ? `出口 IP ${egress.ip}${egress.country ? ` (${egress.country})` : ''}` : '出口 IP —')),
+        h('div', { style: { ...C.muted, fontSize: 12.5, marginTop: 6 } },
+          `节点「${status?.vpnName ?? status?.activeNode ?? '—'}」` +
+            (status?.route?.installed ? ` · ${status.route.mode === 'harness' ? 'DSH 策略已接管' : '内置 dispatcher'}` : ' · 尚未接管')))
     }
 
     function LogList({ logs, setLogs }) {
@@ -180,20 +251,9 @@ window.__ModuleLoader__.load({
           ? h('div', { style: { ...C.card, fontSize: 12.5 } }, h('b', null, '原因：'), ` ${status.reason}`,
               status.detail ? h('div', { style: { ...C.muted, marginTop: 4 } }, status.detail) : null)
           : null,
-        h('section', { style: C.card },
-          h('div', { style: C.cardHead }, '当前 VPN 配置',
-            h('span', { style: { ...C.muted, fontWeight: 400, marginLeft: 'auto' } }, `${status?.nodes?.length ?? 0} 个节点`)),
-          h(NodeTable, { status })),
-        h('section', { style: C.card },
-          h('div', { style: C.cardHead }, '实时连接日志'),
-          h(LogList, { logs, setLogs })),
-        h('div', { style: C.statusBar },
-          h('span', { style: { ...C.dot, background: phase.color } }),
-          h('b', null, phase.label),
-          h('span', { style: { ...C.mono, fontWeight: 600 } }, latency == null ? '延迟 —' : `延迟 ${latency} ms`),
-          h('span', { style: { ...C.mono } }, status?.vpnName ? String(status.vpnName) : '—'),
-          h('span', { style: { ...C.mono } }, egress?.ip ? `出口 ${egress.ip}${egress.country ? ` (${egress.country})` : ''}` : '出口 IP —'),
-          h('span', { style: { ...C.muted, marginLeft: 'auto' } }, status?.updatedAt ? `更新于 ${fmtTime(status.updatedAt)}` : '等待状态')))
+        h(ConfigCard, { status }),
+        h(RuntimeCard, { status, logs, setLogs }),
+        h(StatusCard, { status, latency, egress, phase }))
     }
 
     function Field({ label, children }) {

package/lib/supervisor.js

@@ -694,13 +694,32 @@ export class Supervisor {
       enabled: this.config.enabled,
       takeover: this.config.takeover,
       settingsSchema: this.#schemaLoaded,
-      nodes: this.config.nodes.map((node) => ({ id: node.id, tag: node.tag, address: node.address, port: node.port })),
+      nodes: this.config.nodes.map((node) => ({
+        id: node.id,
+        tag: node.tag,
+        address: node.address,
+        port: node.port,
+        protocol: 'vless',
+        security: node.security,
+        serverName: node.serverName,
+        flow: node.flow,
+        network: node.network,
+      })),
       activeNode: this.#activeNode,
       control: this.#control ? { enabled: true, ...this.#control.snapshot() } : { enabled: false },
       generation: this.#generation,
       restarts: this.#restarts,
       port: this.config.inbound.port,
       portSource: 'config',
+      inbound: {
+        protocol: this.config.inbound.protocol,
+        host: this.config.inbound.host,
+        port: this.config.inbound.port,
+        socks: this.config.inbound.socks.enabled
+          ? { host: this.config.inbound.socks.host, port: this.config.inbound.socks.port }
+          : null,
+      },
+      uptimeSec: this.#startedAt ? Math.max(0, Math.floor((this.#now() - this.#startedAt) / 1000)) : 0,
       binary: this.#binary
         ? { path: this.#binary.path, source: this.#binary.source, version: this.#version ?? null }
         : null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twinsearth/dsh-2xray",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "private": false,
   "description": "DSH-2Xray: supervises xray-core and routes DSH process-wide HTTP(S) traffic through its local inbound, with optional multi-node gRPC control plane",
   "type": "module",