@twinsearth/dsh-2xray 0.2.3 → 0.2.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.2.4 — 2026-10-29
+
+### 设置页与导入
+
+- **设置页新增「2Xray」标签页**（`settings.section`）：VLESS 链接输入、本地二维码图片选择、屏幕扫码、启用/takeover/xray 路径/端口，保存后重启生效。
+- 插件页卡片 `plugins.item` 的 id 改为 settings namespace（`xray-proxy`），并按页面真实契约使用 `{ state, mutate }`；写冲突（mutate=false）会显式报错，不再假装保存成功。
+- 左侧「2Xray」面板保持三卡片（配置/实时信息/状态）。
+
+### 兼容
+
+- 路由直连规则从 `geoip:private` 改为显式私有网段（10/8、172.16/12、192.168/16、127/8、169.254/16、::1、fc00::/7、fe80::/10），不再依赖 xray 二进制旁的 `geoip.dat`——v2rayN 自带的 xray.exe 可 `-test` 通过。
+
 ## 0.2.3 — 2026-10-29
 
 ### 界面

package/lib/client.js

@@ -6,7 +6,7 @@ window.__ModuleLoader__.load({
 
     const PANEL_ID = 'xray'
     const NS = 'xray-proxy'
-    const inject = ['slots', 'locale']
+    const inject = ['slots']
 
     const C = {
       page: { maxWidth: 980, margin: '0 auto', padding: '20px 24px 16px', color: 'var(--dsw-alias-label-primary, #0f1115)' },
@@ -260,76 +260,220 @@ window.__ModuleLoader__.load({
       return h('div', null, h('label', { style: C.label }, label), children)
     }
 
-    function readFormValue(form) {
+    function controllerValue(controller) {
       try {
-        const snapshot = form?.getSnapshot?.()
-        const candidate = snapshot?.value ?? snapshot?.state?.view?.value ?? snapshot?.view?.value
-        return candidate && typeof candidate === 'object' ? candidate : {}
+        const snapshot = controller?.getSnapshot?.()
+        return snapshot?.value && typeof snapshot.value === 'object' ? snapshot.value : {}
       } catch {
         return {}
       }
     }
 
-    async function setField(form, field, value) {
-      if (typeof form?.set === 'function' && typeof field === 'string') return form.set(field, value)
-      const snapshot = form?.getSnapshot?.()
-      const revision = snapshot?.revision ?? snapshot?.state?.view?.revision
-      if (typeof form?.mutate === 'function') {
-        return form.mutate([{ op: 'set', path: Array.isArray(field) ? field : [field], value }], revision)
+    function pageValue(pageForm) {
+      const value = pageForm?.state?.value
+      return value && typeof value === 'object' ? value : {}
+    }
+
+    async function writeFields({ pageForm, controller }, fields) {
+      if (pageForm && typeof pageForm.mutate === 'function') {
+        const ops = fields.map(({ path, value }) => ({ op: 'set', path, value }))
+        const accepted = await pageForm.mutate(ops, pageForm.state?.revision)
+        if (accepted === false) throw new Error('写入被拒绝（revision 冲突）')
+        return
+      }
+      if (controller && typeof controller.mutate === 'function') {
+        for (const { path, value } of fields) {
+          if (path.length === 1 && typeof controller.set === 'function') {
+            const accepted = await controller.set(path[0], value)
+            if (accepted === false) throw new Error('写入被拒绝（revision 冲突）')
+          } else {
+            const revision = controller.getSnapshot?.()?.revision
+            const accepted = await controller.mutate([{ op: 'set', path, value }], revision)
+            if (accepted === false) throw new Error('写入被拒绝（revision 冲突）')
+          }
+        }
+        return
       }
       throw new Error('设置表单不可写')
     }
 
-    function XraySettingsCard({ form }) {
-      const value = readFormValue(form)
+    async function decodeQrFromCanvas(canvas) {
+      if (!('BarcodeDetector' in window)) return null
+      const detector = new window.BarcodeDetector({ formats: ['qr_code'] })
+      const codes = await detector.detect(canvas)
+      return codes && codes.length > 0 ? codes[0].rawValue : null
+    }
+
+    function XrayConfigForm({ controller, pageForm }) {
+      const value = controller ? controllerValue(controller) : pageValue(pageForm)
       const [shareLink, setShareLink] = React.useState(value.shareLink ?? '')
       const [binaryPath, setBinaryPath] = React.useState(value.binary?.path ?? '')
       const [port, setPort] = React.useState(String(value.inbound?.port ?? 20808))
       const [enabled, setEnabled] = React.useState(value.enabled === true)
       const [takeover, setTakeover] = React.useState(value.takeover ?? 'auto')
       const [message, setMessage] = React.useState('')
+      const [kind, setKind] = React.useState('')
       const [busy, setBusy] = React.useState(false)
+      const [scanning, setScanning] = React.useState(false)
+      const videoRef = React.useRef(null)
+      const streamRef = React.useRef(null)
+      const timerRef = React.useRef(null)
+
+      const say = (text, tone) => {
+        setMessage(text)
+        setKind(tone || '')
+      }
+
+      const applyDecoded = (text) => {
+        const trimmed = String(text || '').trim()
+        if (!trimmed) return
+        setShareLink(trimmed)
+        say('已识别二维码，确认后点保存。', 'ok')
+      }
+
+      const onFile = async (event) => {
+        const file = event.target.files && event.target.files[0]
+        if (!file) return
+        say('正在解析图片…')
+        try {
+          const bitmap = await createImageBitmap(file)
+          const scale = Math.min(1, 1600 / Math.max(bitmap.width, bitmap.height))
+          const canvas = document.createElement('canvas')
+          canvas.width = Math.max(1, Math.round(bitmap.width * scale))
+          canvas.height = Math.max(1, Math.round(bitmap.height * scale))
+          canvas.getContext('2d').drawImage(bitmap, 0, 0, canvas.width, canvas.height)
+          const decoded = await decodeQrFromCanvas(canvas)
+          if (!decoded) say('没有识别到二维码；当前浏览器不支持或图片不清晰，可改用插件目录 tools/scanner.html。', 'error')
+          else applyDecoded(decoded)
+        } catch (error) {
+          say('解析失败：' + (error.message || error), 'error')
+        }
+      }
+
+      const stopScan = () => {
+        if (timerRef.current) clearInterval(timerRef.current)
+        timerRef.current = null
+        if (streamRef.current) for (const track of streamRef.current.getTracks()) track.stop()
+        streamRef.current = null
+        if (videoRef.current) videoRef.current.srcObject = null
+        setScanning(false)
+      }
+
+      const tick = async () => {
+        const video = videoRef.current
+        if (!video || !streamRef.current || video.readyState < 2 || !video.videoWidth) return
+        const canvas = document.createElement('canvas')
+        canvas.width = video.videoWidth
+        canvas.height = video.videoHeight
+        canvas.getContext('2d').drawImage(video, 0, 0)
+        try {
+          const decoded = await decodeQrFromCanvas(canvas)
+          if (decoded) {
+            applyDecoded(decoded)
+            stopScan()
+          }
+        } catch {
+          // a frame without a readable code is normal
+        }
+      }
+
+      const startScan = async () => {
+        if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
+          say('当前浏览器不支持屏幕捕获；请使用「二维码图片」。', 'error')
+          return
+        }
+        if (!('BarcodeDetector' in window)) {
+          say('当前浏览器没有 BarcodeDetector；请使用插件目录 tools/scanner.html（内置 jsQR）。', 'error')
+          return
+        }
+        try {
+          const stream = await navigator.mediaDevices.getDisplayMedia({ video: { frameRate: 10 }, audio: false })
+          streamRef.current = stream
+          setScanning(true)
+          if (videoRef.current) {
+            videoRef.current.srcObject = stream
+            videoRef.current.style.display = 'block'
+            await videoRef.current.play()
+          }
+          stream.getVideoTracks()[0].addEventListener('ended', stopScan)
+          timerRef.current = setInterval(tick, 350)
+          say('请把二维码放到共享屏幕上…')
+        } catch (error) {
+          say('屏幕共享未开始：' + (error.message || error), 'error')
+          setScanning(false)
+        }
+      }
+
+      React.useEffect(() => () => stopScan(), [])
 
       const save = async () => {
         setBusy(true)
         try {
-          await setField(form, 'shareLink', shareLink.trim())
-          await setField(form, 'enabled', enabled)
-          await setField(form, 'takeover', takeover)
+          const fields = [
+            { path: ['shareLink'], value: shareLink.trim() },
+            { path: ['enabled'], value: enabled },
+            { path: ['takeover'], value: takeover },
+          ]
+          if (binaryPath.trim()) fields.push({ path: ['binary', 'path'], value: binaryPath.trim() })
           const numericPort = Number(port)
-          if (Number.isInteger(numericPort) && numericPort > 0) await setField(form, ['inbound', 'port'], numericPort)
-          if (binaryPath.trim()) await setField(form, ['binary', 'path'], binaryPath.trim())
-          setMessage('已保存，重启 DSH 后生效。')
+          if (Number.isInteger(numericPort) && numericPort > 0) fields.push({ path: ['inbound', 'port'], value: numericPort })
+          await writeFields({ controller, pageForm }, fields)
+          say('已保存。重启 DSH 后生效。', 'ok')
         } catch (error) {
-          setMessage('保存失败：' + (error.message || error))
+          say('保存失败：' + (error.message || error), 'error')
         } finally {
           setBusy(false)
         }
       }
 
-      return h('div', { style: { ...C.card, marginTop: 8 } },
-        h('div', { style: C.cardHead }, h(GlobeIcon), '2Xray 连接'),
-        h(Field, { label: 'VLESS 分享链接（粘贴或扫码）' },
+      return h('div', null,
+        h(Field, { label: '1. VLESS 分享链接（粘贴）' },
           h('textarea', {
             style: { ...C.input, minHeight: 64, fontFamily: 'ui-monospace, Consolas, monospace' },
             value: shareLink,
             placeholder: 'vless://uuid@host:443?security=reality&sni=...&pbk=...#备注',
             onChange: (event) => setShareLink(event.target.value),
           })),
+        h(Field, { label: '2. 本地二维码图片' },
+          h('input', { type: 'file', accept: 'image/*', onChange: onFile, disabled: scanning })),
+        h('div', { style: { display: 'flex', gap: 10, alignItems: 'center', marginTop: 10, flexWrap: 'wrap' } },
+          h('button', { type: 'button', style: C.btn, onClick: startScan, disabled: scanning }, scanning ? '扫描中…' : '扫描屏幕二维码'),
+          h('button', { type: 'button', style: C.btn, onClick: stopScan, disabled: !scanning }, '停止'),
+          h('span', { style: { ...C.muted, fontSize: 12 } }, '本地图片/屏幕扫码结果会填入上方链接')),
+        h('video', { ref: videoRef, playsInline: true, muted: true, style: { ...C.input, display: 'none', maxHeight: 240, background: '#000' } }),
         h('div', { style: { display: 'flex', gap: 12, flexWrap: 'wrap' } },
-          h('label', { style: { fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 6, marginTop: 8 } },
+          h('label', { style: { fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 6, marginTop: 10 } },
             h('input', { type: 'checkbox', checked: enabled, onChange: (event) => setEnabled(event.target.checked) }), '启用代理'),
-          h('label', { style: { fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 6, marginTop: 8 } }, 'takeover',
+          h('label', { style: { fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 6, marginTop: 10 } }, 'takeover',
             h('select', { value: takeover, onChange: (event) => setTakeover(event.target.value), style: { padding: '4px 8px', borderRadius: 6, background: 'transparent', color: 'inherit' } },
               h('option', { value: 'auto' }, 'auto'), h('option', { value: 'force' }, 'force'), h('option', { value: 'off' }, 'off')))),
         h(Field, { label: 'xray 可执行文件路径（留空自动查找）' },
-          h('input', { style: { ...C.input, fontFamily: 'ui-monospace, Consolas, monospace' }, value: binaryPath, placeholder: '例如 D:\\v2rayN\\xray.exe', onChange: (event) => setBinaryPath(event.target.value) })),
+          h('input', { style: { ...C.input, fontFamily: 'ui-monospace, Consolas, monospace' }, value: binaryPath, placeholder: '例如 D:\\v2rayN\\...\\bin\\xray\\xray.exe', onChange: (event) => setBinaryPath(event.target.value) })),
         h(Field, { label: '本地 HTTP 入站端口' },
           h('input', { style: C.input, value: port, onChange: (event) => setPort(event.target.value) })),
         h('div', { style: { display: 'flex', gap: 10, alignItems: 'center', marginTop: 12 } },
           h('button', { type: 'button', style: C.primaryBtn, disabled: busy, onClick: save }, busy ? '保存中…' : '保存'),
-          h('span', { style: { ...C.muted, fontSize: 12 } }, message)),
-        h('p', { style: { ...C.muted, fontSize: 12, marginTop: 10 } }, '打开左侧「2Xray」面板可扫码导入、查看节点/日志/延迟/出口 IP。'))
+          h('span', { style: { fontSize: 12, color: kind === 'error' ? '#c81e1e' : kind === 'ok' ? '#15803d' : undefined } }, message)),
+        h('p', { style: { ...C.muted, fontSize: 12, marginTop: 10 } }, '保存后重启 DSH；左侧「2Xray」面板显示节点、日志、延迟与出口 IP。'))
+    }
+
+    function XraySettingsCard({ view, form }) {
+      if (view === 'summary') {
+        return h('div', { style: { ...C.muted, fontSize: 12.5 } }, 'VLESS 链接 / 本地二维码导入 · 保存后重启 DSH 生效')
+      }
+      return h('div', { style: { ...C.card, marginTop: 8 } },
+        h('div', { style: C.cardHead }, h(GlobeIcon), '2Xray 连接'),
+        h(XrayConfigForm, { pageForm: form }))
+    }
+
+    function SettingsSection({ controller }) {
+      return h('div', { style: C.page },
+        h('div', { style: C.header },
+          h('span', { style: C.globe }, h(GlobeIcon, { size: 22 })),
+          h('div', null,
+            h('h1', { style: C.title }, '2Xray'),
+            h('p', { style: C.sub }, '导入 VLESS 链接或本地二维码，保存后重启 DSH 生效。'))),
+        h('section', { style: C.card }, h(XrayConfigForm, { controller })))
     }
 
     function apply(ctx) {
@@ -350,26 +494,32 @@ window.__ModuleLoader__.load({
       if (typeof ctx.inject === 'function') {
         ctx.inject(['configForms'], (child) => {
           try {
+            // A dedicated Settings tab. It owns the ConfigFormController, so the
+            // full editor works even when the plugins page passes a narrow form.
+            const controller = child.configForms.get(NS)
+            child.effect(
+              () =>
+                child.slots.inject('settings.section', () =>
+                  child.slots.register(
+                    { name: 'settings.section', id: NS, order: 30, label: () => '2Xray' },
+                    () => h(SettingsSection, { controller }),
+                  ),
+                ),
+              'dsh-2xray: settings section',
+            )
+            // The plugins page card: its id MUST equal the settings namespace,
+            // otherwise the page's formFor(id) returns undefined.
             child.effect(
               () =>
                 child.configForms.whileServed([NS], () =>
                   child.slots.inject('plugins.item', () =>
-                    child.slots.register(
-                      {
-                        name: 'plugins.item',
-                        id: PANEL_ID,
-                        order: 40,
-                        label: () => '2Xray 连接',
-                        inject: () => ({ form: child.configForms.get(NS) }),
-                      },
-                      XraySettingsCard,
-                    ),
+                    child.slots.register({ name: 'plugins.item', id: NS, order: 40, label: () => '2Xray' }, XraySettingsCard),
                   ),
                 ),
-              'dsh-2xray: settings card',
+              'dsh-2xray: plugins card',
             )
-          } catch {
-            // a client without the settings service keeps the sidebar panel
+          } catch (error) {
+            console.error('[dsh-2xray] client registration failed', error)
           }
         })
       }

package/lib/xray-config.js

@@ -17,7 +17,19 @@
  * `api` routing rule, and optionally the stats counters.
  */
 
-const PRIVATE_IP_RULES = ['geoip:private']
+// Explicit RFC1918/loopback/link-local ranges instead of geoip:private: the
+// latter needs geoip.dat beside the binary, and v2rayN's xray.exe keeps it one
+// directory up, which fails -test with "failed to open geoip.dat".
+const PRIVATE_IP_RULES = [
+  '10.0.0.0/8',
+  '172.16.0.0/12',
+  '192.168.0.0/16',
+  '127.0.0.0/8',
+  '169.254.0.0/16',
+  '::1/128',
+  'fc00::/7',
+  'fe80::/10',
+]
 const API_TAG = 'api'
 
 function escapeRegExp(value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twinsearth/dsh-2xray",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "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",

package/test/client.test.js

@@ -1,7 +1,7 @@
 import test from 'node:test'
 import assert from 'node:assert/strict'
 
-test('the client bundle registers a main panel and a sidebar entry', async () => {
+test('the client bundle registers sidebar, main panel and settings entries', async () => {
   let captured
   globalThis.window = { __ModuleLoader__: { load(module) { captured = module } } }
   try {
@@ -24,10 +24,11 @@ test('the client bundle registers a main panel and a sidebar entry', async () =>
   })
 
   assert.equal(typeof mod.apply, 'function')
-  assert.deepEqual(mod.inject, ['slots', 'locale'])
+  assert.deepEqual(mod.inject, ['slots'])
   assert.equal(mod.PANEL_ID, 'xray')
+  assert.equal(mod.NS, 'xray-proxy')
 
-  const registrations = []
+  const base = []
   const ctx = {
     effect(fn) {
       fn()
@@ -37,20 +38,64 @@ test('the client bundle registers a main panel and a sidebar entry', async () =>
         callback()
       },
       register(definition, component) {
-        registrations.push({ definition, component })
+        base.push({ definition, component })
       },
     },
   }
   mod.apply(ctx)
 
   assert.deepEqual(
-    registrations.map((entry) => entry.definition.name),
+    base.map((entry) => entry.definition.name),
     ['sidebar.panellist', 'main'],
   )
-  assert.equal(registrations[0].definition.id, 'xray')
-  assert.equal(registrations[0].definition.order, 1)
-  assert.equal(registrations[0].definition.label(), '2Xray')
-  const icon = registrations[0].component()
-  assert.equal(icon.type, 'svg')
-  assert.equal(registrations[1].definition.key, 'xray')
+  assert.equal(base[0].definition.id, 'xray')
+  assert.equal(base[0].definition.order, 1)
+  assert.equal(base[0].definition.label(), '2Xray')
+  assert.equal(base[0].component().type, 'svg')
+  assert.equal(base[1].definition.key, 'xray')
+
+  const settings = []
+  const controller = {
+    getSnapshot: () => ({ status: 'ready', value: { shareLink: '' }, revision: 0, writable: true }),
+    set: async () => true,
+    mutate: async () => true,
+  }
+  const child = {
+    effect(fn) {
+      fn()
+    },
+    slots: {
+      inject(_name, callback) {
+        callback()
+      },
+      register(definition, component) {
+        settings.push({ definition, component })
+      },
+    },
+    configForms: {
+      get: () => controller,
+      whileServed(namespaces, register) {
+        return register(new Set(namespaces))
+      },
+    },
+  }
+  mod.apply({
+    effect(fn) {
+      fn()
+    },
+    slots: { inject() {}, register() {} },
+    inject(services, callback) {
+      assert.deepEqual(services, ['configForms'])
+      callback(child)
+    },
+  })
+
+  assert.deepEqual(
+    settings.map((entry) => entry.definition.name),
+    ['settings.section', 'plugins.item'],
+  )
+  // The plugins page looks the form up by the settings namespace, not the panel id.
+  assert.equal(settings[0].definition.id, 'xray-proxy')
+  assert.equal(settings[1].definition.id, 'xray-proxy')
+  assert.equal(settings[1].definition.label(), '2Xray')
 })

package/test/xray-config.test.js

@@ -82,7 +82,9 @@ test('direct and block outbounds exist and the catch-all goes to proxy', () => {
 test('private addresses and internal suffixes are routed direct', () => {
   const built = buildXrayConfig(config({ root: { routing: { bypassDomains: ['lan', 'corp'] } } }))
   const ipRule = built.routing.rules.find((rule) => rule.ip)
-  assert.deepEqual(ipRule.ip, ['geoip:private'])
+  assert.ok(ipRule.ip.includes('10.0.0.0/8'))
+  assert.ok(ipRule.ip.includes('192.168.0.0/16'))
+  assert.equal(ipRule.ip.includes('geoip:private'), false)
   const domainRule = built.routing.rules.find((rule) => rule.domain && rule.domain.some((entry) => entry.startsWith('domain:lan')))
   assert.deepEqual(domainRule.domain, ['domain:lan', 'domain:corp'])
 })