@yezack/dsh-remote-mobile 0.0.0-stage → 1.9.1

package/lib/routes/login-page.js

@@ -0,0 +1,418 @@
+import { getPublicKeyPem } from '../auth/crypto.js';
+/**
+ * 手机端授权与登录页面 HTML
+ */
+export function getLoginPageHtml(publicKeyPem, lang = 'zh') {
+    const inlinePublicKey = publicKeyPem || getPublicKeyPem();
+    const isEn = lang === 'en';
+    const i18n = {
+        pageTitle: isEn ? 'DSH Remote Access Authorization' : 'DSH 移动端访问授权',
+        headerTitle: isEn ? 'Remote Access Auth' : '移动端访问授权',
+        headerDesc: isEn ? 'Enter 6-digit dynamic pairing code or persistent password' : '请输入 6 位动态配对码或长期访问密码',
+        placeholder: isEn ? '6-digit code or password' : '6 位临时配对码 / 长期密码',
+        submitBtn: isEn ? 'Authorize & Connect' : '立即授权连接',
+        footerSecurity: isEn ? '🔒 Protected by 2048-bit RSA encryption' : '🔒 全程受 2048 位 RSA 加密保护',
+        verifying: isEn ? '🔐 Encrypting & verifying...' : '🔐 正在 RSA 加密与验证...',
+        success: isEn ? 'Authorization successful! Entering workspace...' : '授权成功！正在进入工作区...',
+        networkErr: isEn ? 'Network connection error, please try again' : '网络连接异常，请检查网络',
+    };
+    return `<!DOCTYPE html>
+<html lang="${isEn ? 'en' : 'zh-CN'}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <title>${i18n.pageTitle}</title>
+  <style>
+    :root {
+      --bg: #0f1117;
+      --card-bg: rgba(26, 29, 39, 0.85);
+      --card-border: rgba(255, 255, 255, 0.08);
+      --primary: #3b82f6;
+      --primary-hover: #2563eb;
+      --text: #f3f4f6;
+      --text-muted: #9ca3af;
+      --error: #ef4444;
+      --success: #10b981;
+    }
+    @media (prefers-color-scheme: light) {
+      :root {
+        --bg: #f3f4f6;
+        --card-bg: rgba(255, 255, 255, 0.9);
+        --card-border: rgba(0, 0, 0, 0.08);
+        --text: #111827;
+        --text-muted: #6b7280;
+      }
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
+    body {
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+    .auth-card {
+      width: 100%;
+      max-width: 380px;
+      background: var(--card-bg);
+      backdrop-filter: blur(16px);
+      -webkit-backdrop-filter: blur(16px);
+      border: 1px solid var(--card-border);
+      border-radius: 20px;
+      padding: 32px 24px;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+      text-align: center;
+    }
+    .logo-badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 56px;
+      height: 56px;
+      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+      border-radius: 16px;
+      margin-bottom: 20px;
+      color: white;
+      box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
+    }
+    h1 {
+      font-size: 20px;
+      font-weight: 700;
+      margin-bottom: 8px;
+    }
+    p.desc {
+      font-size: 13px;
+      color: var(--text-muted);
+      line-height: 1.5;
+      margin-bottom: 24px;
+    }
+    .input-group {
+      margin-bottom: 16px;
+    }
+    input {
+      width: 100%;
+      height: 48px;
+      background: rgba(128, 128, 128, 0.08);
+      border: 1px solid var(--card-border);
+      border-radius: 12px;
+      padding: 0 16px;
+      font-size: 16px;
+      color: var(--text);
+      outline: none;
+      text-align: center;
+      letter-spacing: 2px;
+      transition: all 0.2s;
+    }
+    input:focus {
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+    }
+    button.submit-btn {
+      width: 100%;
+      height: 48px;
+      background: var(--primary);
+      color: white;
+      border: none;
+      border-radius: 12px;
+      font-size: 15px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+    button.submit-btn:active {
+      background: var(--primary-hover);
+      transform: scale(0.99);
+    }
+    .status-msg {
+      margin-top: 16px;
+      font-size: 13px;
+      display: none;
+    }
+    .status-msg.error {
+      color: var(--error);
+      display: block;
+    }
+    .status-msg.success {
+      color: var(--success);
+      display: block;
+    }
+    .info-footer {
+      margin-top: 24px;
+      padding-top: 16px;
+      border-top: 1px solid var(--card-border);
+      font-size: 12px;
+      color: var(--text-muted);
+      line-height: 1.6;
+      text-align: left;
+    }
+  </style>
+</head>
+<body>
+  <div class="auth-card">
+    <div class="logo-badge">
+      <svg style="width: 28px; height: 28px; fill: currentColor;" viewBox="0 0 24 24">
+        <path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/>
+      </svg>
+    </div>
+    <h1>${i18n.headerTitle}</h1>
+    <p class="desc">${i18n.headerDesc}</p>
+
+    <form id="authForm">
+      <div class="input-group">
+        <input 
+          type="password" 
+          id="credentialInput" 
+          placeholder="${i18n.placeholder}" 
+          autocomplete="off" 
+          required
+        />
+      </div>
+      <button type="submit" class="submit-btn" id="submitBtn">
+        ${i18n.submitBtn}
+      </button>
+      <div id="statusMsg" class="status-msg"></div>
+    </form>
+
+    <div class="info-footer">
+      <div>${i18n.footerSecurity}</div>
+    </div>
+  </div>
+
+  <script>
+    const SERVER_RSA_KEY = ${JSON.stringify(inlinePublicKey)};
+    const form = document.getElementById('authForm');
+    const input = document.getElementById('credentialInput');
+    const statusMsg = document.getElementById('statusMsg');
+    const submitBtn = document.getElementById('submitBtn');
+
+    // 解析 SPKI 格式公钥并提取 n 和 e（用于纯 JS 垫片计算）
+    function parseSpkiKey(pemStr) {
+      const b64 = pemStr.replace(/-----BEGIN PUBLIC KEY-----/g, '').replace(/-----END PUBLIC KEY-----/g, '').replace(/\\s/g, '');
+      const binary = window.atob(b64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+
+      let idx = 0;
+      while (idx < bytes.length && bytes[idx] !== 0x02) idx++;
+      const lenByte = bytes[idx + 1];
+      let nLen = 0;
+      let nStart = 0;
+      if (lenByte === 0x82) {
+        nLen = (bytes[idx + 2] << 8) | bytes[idx + 3];
+        nStart = idx + 4;
+      } else if (lenByte === 0x81) {
+        nLen = bytes[idx + 2];
+        nStart = idx + 3;
+      } else {
+        nLen = lenByte;
+        nStart = idx + 2;
+      }
+      let nBytes = bytes.slice(nStart, nStart + nLen);
+      if (nBytes[0] === 0x00) nBytes = nBytes.slice(1);
+
+      idx = nStart + nLen;
+      while (idx < bytes.length && bytes[idx] !== 0x02) idx++;
+      const eLen = bytes[idx + 1];
+      const eBytes = bytes.slice(idx + 2, idx + 2 + eLen);
+
+      let nHex = '';
+      for (let b of nBytes) nHex += b.toString(16).padStart(2, '0');
+      let eHex = '';
+      for (let b of eBytes) eHex += b.toString(16).padStart(2, '0');
+
+      return { n: BigInt('0x' + nHex), e: BigInt('0x' + eHex), keyLen: nBytes.length };
+    }
+
+    function modPow(b, exp, mod) {
+      let res = 1n;
+      let base = b % mod;
+      let e = exp;
+      while (e > 0n) {
+        if (e & 1n) res = (res * base) % mod;
+        base = (base * base) % mod;
+        e >>= 1n;
+      }
+      return res;
+    }
+
+    // 纯 JS RSA 垫片加密：使用 CSPRNG (crypto.getRandomValues) 填充
+    function rsaEncryptPureJs(plainText, pubPem) {
+      const { n, e, keyLen } = parseSpkiKey(pubPem);
+      const msgBytes = new TextEncoder().encode(plainText);
+      const padLen = keyLen - 3 - msgBytes.length;
+      if (padLen < 8) throw new Error('Message too long');
+
+      const pad = new Uint8Array(padLen);
+      if (window.crypto && typeof window.crypto.getRandomValues === 'function') {
+        window.crypto.getRandomValues(pad);
+        for (let i = 0; i < padLen; i++) {
+          if (pad[i] === 0) pad[i] = (Math.floor(Math.random() * 254) + 1);
+        }
+      } else {
+        for (let i = 0; i < padLen; i++) {
+          pad[i] = Math.floor(Math.random() * 255) + 1;
+        }
+      }
+
+      const em = new Uint8Array(keyLen);
+      em[0] = 0x00;
+      em[1] = 0x02;
+      em.set(pad, 2);
+      em[2 + padLen] = 0x00;
+      em.set(msgBytes, 3 + padLen);
+
+      let emHex = '';
+      for (let b of em) emHex += b.toString(16).padStart(2, '0');
+      const m = BigInt('0x' + emHex);
+      const c = modPow(m, e, n);
+      let cHex = c.toString(16);
+      if (cHex.length % 2 !== 0) cHex = '0' + cHex;
+      while (cHex.length < keyLen * 2) cHex = '00' + cHex;
+
+      let binary = '';
+      for (let i = 0; i < cHex.length; i += 2) {
+        binary += String.fromCharCode(parseInt(cHex.slice(i, i + 2), 16));
+      }
+      return window.btoa(binary);
+    }
+
+    // 尝试使用 Web Crypto API 原生 RSA-OAEP SHA-256 加密（安全上下文可用）
+    async function trySubtleEncrypt(plainText, pubPem) {
+      if (!window.crypto || !window.crypto.subtle) return null;
+      const b64 = pubPem.replace(/-----BEGIN PUBLIC KEY-----/g, '').replace(/-----END PUBLIC KEY-----/g, '').replace(/\\s/g, '');
+      const binary = window.atob(b64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+
+      const cryptoKey = await window.crypto.subtle.importKey(
+        'spki',
+        bytes.buffer,
+        { name: 'RSA-OAEP', hash: 'SHA-256' },
+        false,
+        ['encrypt']
+      );
+
+      const encBuffer = await window.crypto.subtle.encrypt(
+        { name: 'RSA-OAEP' },
+        cryptoKey,
+        new TextEncoder().encode(plainText)
+      );
+
+      const encBytes = new Uint8Array(encBuffer);
+      let binaryEnc = '';
+      for (let i = 0; i < encBytes.length; i++) binaryEnc += String.fromCharCode(encBytes[i]);
+      return window.btoa(binaryEnc);
+    }
+
+    async function encryptCredential(plainText) {
+      try {
+        const subtleB64 = await trySubtleEncrypt(plainText, SERVER_RSA_KEY);
+        if (subtleB64) return { encryptedCredential: subtleB64 };
+      } catch (e) {}
+
+      try {
+        const pureB64 = rsaEncryptPureJs(plainText, SERVER_RSA_KEY);
+        return { encryptedCredential: pureB64 };
+      } catch (err) {
+        console.error('RSA encrypt error:', err);
+        return { credential: plainText };
+      }
+    }
+
+    // 检测 URL 参数里的 token，仅回填输入框，不自动触发验证
+    const urlParams = new URLSearchParams(window.location.search);
+    const queryToken = urlParams.get('token');
+    if (queryToken) {
+      input.value = queryToken;
+    }
+
+    // 自适应网关子路径 / baseURI 与重定向
+    const verifyApiUrl = (function () {
+      try {
+        if (document.baseURI && document.querySelector('base')) {
+          return new URL('api/remote-mobile/verify', document.baseURI).toString();
+        }
+        // ⚠️ 本段内联脚本位于模板字符串内：反斜杠在字符串求值时会被吃掉，
+        // 所以 /auth 后缀正则必须写成双反斜杠形式，否则会拼出以两条斜杠开头
+        // 的行注释，使整个 script 抛 SyntaxError、登录按钮彻底失效（下两处同理）。
+        const pathname = window.location.pathname.replace(/\\/auth\\/?$/, '/');
+        return new URL('api/remote-mobile/verify', window.location.origin + pathname).toString();
+      } catch (e) {
+        return '/api/remote-mobile/verify';
+      }
+    })();
+
+    const successRedirectUrl = (function () {
+      try {
+        // 预留参数能力：支持通过 ?redirect=/path 携带登录后重定向目标
+        const redirectParam = urlParams.get('redirect');
+        if (redirectParam && redirectParam.startsWith('/') && !redirectParam.startsWith('//')) {
+          const appPrefix = window.location.pathname.replace(/\\/auth\\/?$/, '');
+          if (appPrefix && redirectParam.startsWith(appPrefix)) {
+            return window.location.origin + redirectParam;
+          }
+          return window.location.origin + appPrefix + redirectParam;
+        }
+        if (document.baseURI && document.querySelector('base')) {
+          return new URL('./', document.baseURI).toString();
+        }
+        const appPrefix = window.location.pathname.replace(/\\/auth\\/?$/, '/');
+        return window.location.origin + appPrefix;
+      } catch (e) {
+        return '/';
+      }
+    })();
+
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      const val = input.value.trim();
+      if (!val) return;
+      doVerify(val);
+    });
+
+    async function doVerify(credential) {
+      submitBtn.disabled = true;
+      submitBtn.innerText = ${JSON.stringify(i18n.verifying)};
+      statusMsg.className = 'status-msg';
+      statusMsg.style.display = 'none';
+
+      try {
+        const payload = await encryptCredential(credential);
+        const res = await fetch(verifyApiUrl, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        });
+        const data = await res.json();
+        if (data.success) {
+          statusMsg.className = 'status-msg success';
+          statusMsg.innerText = ${JSON.stringify(i18n.success)};
+          statusMsg.style.display = 'block';
+          setTimeout(() => {
+            window.location.href = successRedirectUrl;
+          }, 600);
+        } else {
+          statusMsg.className = 'status-msg error';
+          statusMsg.innerText = data.reason || ${JSON.stringify(isEn ? 'Authorization failed, please try again' : '授权失败，请重试')};
+          statusMsg.style.display = 'block';
+          submitBtn.disabled = false;
+          submitBtn.innerText = ${JSON.stringify(i18n.submitBtn)};
+        }
+      } catch (err) {
+        statusMsg.className = 'status-msg error';
+        statusMsg.innerText = ${JSON.stringify(i18n.networkErr)};
+        statusMsg.style.display = 'block';
+        submitBtn.disabled = false;
+        submitBtn.innerText = ${JSON.stringify(i18n.submitBtn)};
+      }
+    }
+  </script>
+</body>
+</html>`;
+}

package/lib/styles/style-snippets.d.ts

@@ -0,0 +1,133 @@
+/**
+ * 移动端样式片段注册表 (Mobile Style Snippets Store)
+ *
+ * 【设计职责】
+ * 本模块是插件内部的「样式小插件」体系：把 DSH Web 界面的样式适配拆分成
+ * 一个个可独立启停的 CSS 片段（Snippet）。
+ *
+ * - 内置预设片段（Builtin Presets）：随插件分发，按界面区域划分为三份——
+ *   侧边栏（preset-sidebar）、设置面板（preset-settings）、正文（preset-main）；
+ * - 用户自定义片段（Custom Snippets）：通过设置面板或 API 动态增删改，持久化于
+ *   ~/.dsh/remote-mobile/style-snippets.json，无需修改插件代码、无需重启；
+ * - 每个片段（含内置预设）支持【PC 端 / 移动端】分别启停，且按【视口宽度】判定而非设备 UA：
+ *   mobileEnabled → 包装 @media (max-width: 900px)，窄视口生效（PC 拉小窗口同样生效）；
+ *   pcEnabled     → 包装 @media (min-width: 901px)，宽视口生效；两端都开 → 全宽度原样生效。
+ *
+ * 注入发生在网关层响应拦截（见 bridge/compat.ts 的 patchHttpServerWithVirtualizer），
+ * 对主工作区 index.html 与 /auth 登录页统一生效。
+ */
+/** 用户自定义样式片段持久化文件 */
+export declare const DEFAULT_STYLE_FILE: string;
+/** 移动端 User-Agent 识别正则 */
+export declare const MOBILE_UA_REGEX: RegExp;
+/** 单片段 CSS 长度上限（防配置膨胀） */
+export declare const MAX_CSS_LENGTH = 200000;
+/** 片段名称长度上限 */
+export declare const MAX_NAME_LENGTH = 80;
+/** 内置预设 id 保留前缀（自定义片段不得占用） */
+export declare const BUILTIN_ID_PREFIX = "preset-";
+export interface StyleSnippet {
+    /** 稳定唯一 id（内置片段为 preset-xxx，自定义片段为 custom-xxx） */
+    id: string;
+    /** 片段名称（list(lang) 按语言本地化；自定义片段为用户填写原文） */
+    name: string;
+    /** 可选说明文案 */
+    description?: string;
+    /** CSS 代码片段本体 */
+    css: string;
+    /** 桌面端（PC 浏览器）是否注入 */
+    pcEnabled: boolean;
+    /** 移动端（手机/平板浏览器）是否注入 */
+    mobileEnabled: boolean;
+    /** 是否为内置预设（内置不可删除，仅可启停） */
+    builtin?: boolean;
+    createdAt?: number;
+    updatedAt?: number;
+}
+export interface BuiltinStylePreset {
+    id: string;
+    name: {
+        zh: string;
+        en: string;
+    };
+    description: {
+        zh: string;
+        en: string;
+    };
+    css: string;
+    /** 桌面端默认启停（默认 false：预设主要面向移动端） */
+    defaultPcEnabled?: boolean;
+    /** 移动端默认启停（默认 true） */
+    defaultMobileEnabled?: boolean;
+}
+export interface UpsertStyleInput {
+    id?: string;
+    name: string;
+    description?: string;
+    css: string;
+    pcEnabled?: boolean;
+    mobileEnabled?: boolean;
+}
+/**
+ * 内置官方预设：按界面区域划分的三段预设。
+ * 默认【移动端启用（≤900px 窄视口）、PC 关闭（>900px 宽视口）】——预设面向窄屏优化，宽屏按需开启。
+ */
+export declare const BUILTIN_PRESETS: BuiltinStylePreset[];
+/** 持久化文件的结构版本（v2：双端开关 presetStates + custom.pcEnabled/mobileEnabled） */
+export declare const STORE_VERSION = 2;
+/** 判断请求是否来自移动端浏览器 */
+export declare function isMobileUserAgent(ua?: string): boolean;
+/** 给 <html> 打上 data-dsh-mobile 标记（幂等） */
+export declare function applyDataMobileAttr(html: string): string;
+/** 把收集到的 CSS 包装成 <style> 注入标签（空内容返回空串） */
+export declare function buildMobileStyleTag(css: string): string;
+/** 内置预设某 id 的启停状态。
+ * 落盘时按「三个预设分组齐全」写出：每组两条字段齐全（用户覆盖 ?? 代码默认值），
+ * 不再只写被操作过的端；内存与读取端允许字段缺省（回落预设默认值）。 */
+export interface PresetState {
+    pc?: boolean;
+    mobile?: boolean;
+}
+/**
+ * 样式片段存储：内置预设 + 用户自定义的启停状态与内容管理。
+ * 采用防抖 + 原子写盘，与 SessionStore 的持久化策略保持一致。
+ */
+export declare class StyleSnippetStore {
+    private filePath;
+    private presetStates;
+    private custom;
+    private customOrder;
+    private persistTimer;
+    private dirty;
+    constructor(filePath?: string);
+    /** 文件路径（用于界面展示） */
+    get persistPath(): string;
+    /** 读取持久化文件（自动迁移 v1 → v2 双端开关格式） */
+    load(): void;
+    /** 触发防抖持久化 */
+    private schedulePersist;
+    /** 立即落盘（进程退出前也会被调用） */
+    flushPersistedData(): void;
+    /** 全部片段：内置预设（按注册序）+ 自定义片段（按 customOrder）。lang 决定内置预设名称/描述的本地化。 */
+    list(lang?: 'zh' | 'en'): StyleSnippet[];
+    /** 按 id 获取片段（内置或自定义） */
+    get(id: string, lang?: 'zh' | 'en'): StyleSnippet | undefined;
+    /**
+     * 按端启停任意片段（内置与自定义均可）。
+     * @param scope - pc：桌面端开关；mobile：移动端开关
+     */
+    setEnabled(id: string, scope: 'pc' | 'mobile', enabled: boolean): boolean;
+    /** 重置所有片段的启停状态：内置恢复各自默认（移动端开/PC 关），自定义恢复为移动端开/PC 关 */
+    resetEnabled(): void;
+    /** 新增或更新一个自定义片段 */
+    upsertCustom(input: UpsertStyleInput): StyleSnippet;
+    /** 删除一个用户自定义片段（内置预设不可删除） */
+    removeCustom(id: string): boolean;
+    /**
+     * 收集最终注入的 CSS（与设备 UA 无关，按视口宽度档生效）：
+     * - mobileEnabled && !pcEnabled → 包 @media (max-width: 900px)，窄视口（≤900px）生效；
+     * - pcEnabled && !mobileEnabled → 包 @media (min-width: 901px)，宽视口（>900px）生效；
+     * - 两端都开 → 原样注入，全宽度生效。
+     */
+    collectCss(): string;
+}