dsh-remote-mobile 1.2.1 → 1.4.1

package/lib/index.d.ts

@@ -30,3 +30,4 @@ export * from './auth/token.js';
 export * from './auth/gate.js';
 export * from './routes/api.js';
 export * from './bridge/compat.js';
+export * from './styles/style-snippets.js';

package/lib/index.js

@@ -14,6 +14,7 @@
 import { SessionStore } from './auth/token.js';
 import { createGlobalAuthGate } from './auth/gate.js';
 import { createRoutes } from './routes/api.js';
+import { StyleSnippetStore } from './styles/style-snippets.js';
 import { getLocalTailscaleIp } from './auth/tailscale.js';
 import { patchHttpServerWithVirtualizer, mountIndexInjections, registerRemoteWebUiPairingBridge, } from './bridge/compat.js';
 /** Cordis 插件名称标识 */
@@ -75,35 +76,36 @@ function bindDshSettings(ctx, store) {
 export function apply(ctx, config = {}) {
     // 1. 初始化会话与令牌持久化管理器
     const store = new SessionStore(config);
+    const styleStore = new StyleSnippetStore();
     const gateMiddleware = createGlobalAuthGate(store);
     // 2. 接入 DSH Settings 服务 (命名空间: dsh-remote-mobile)
     bindDshSettings(ctx, store);
     // 3. 挂载底座 WebServer 相关的门禁拦截与路由注册
     if (ctx.webServer) {
         if (ctx.webServer.server) {
-            patchHttpServerWithVirtualizer(ctx.webServer.server, gateMiddleware, store);
+            patchHttpServerWithVirtualizer(ctx.webServer.server, gateMiddleware, store, styleStore);
         }
         // 挂载 HTML 模板层的 Crypto Polyfill 注入钩子
         mountIndexInjections(ctx);
         // 注册插件专属的 HTTP & SSE API 路由
         if (typeof ctx.webServer.register === 'function') {
-            const routes = createRoutes(store);
+            const routes = createRoutes(store, styleStore);
             for (const route of routes) {
                 ctx.webServer.register(route);
             }
         }
     }
-    // 4. 向 Cordis 容器桥接注册 remoteWebUiPairing 服务
-    // 完美兼容 @linxin666 生态插件（如 dsh-pet 宠物、任务看板等），实现免登信任自动共享
+    // 4. 向 Cordis 容器桥接注册 remoteWebUiPairing 服务（延迟裁决：与其他远程接入
+    // 类插件共存时自动让出，保证启动不冲突，详见 compat.ts）
     registerRemoteWebUiPairingBridge(ctx, store);
     // 5. 延迟补丁与服务启动日志输出
     setTimeout(() => {
         if (ctx.webServer && ctx.webServer.server) {
-            patchHttpServerWithVirtualizer(ctx.webServer.server, gateMiddleware, store);
+            patchHttpServerWithVirtualizer(ctx.webServer.server, gateMiddleware, store, styleStore);
         }
         const tsIp = getLocalTailscaleIp();
         const opts = store.getOptions();
-        ctx.logger?.info?.(`[dsh-remote-mobile] 移动端远程控制与安全门禁已激活 (上下文虚拟化桥接就绪)`);
+        ctx.logger?.info?.(`[dsh-remote-mobile] 移动端远程控制与安全门禁已激活 (上下文虚拟化桥接就绪，样式片段: ${styleStore.list().length} 个)`);
         if (tsIp) {
             ctx.logger?.info?.(`[dsh-remote-mobile] Tailscale 地址: http://${tsIp}:3080 (免密直连: ${opts.allowTailscale ? '已开启' : '已关闭'})`);
         }
@@ -115,3 +117,4 @@ export * from './auth/token.js';
 export * from './auth/gate.js';
 export * from './routes/api.js';
 export * from './bridge/compat.js';
+export * from './styles/style-snippets.js';

package/lib/routes/api.d.ts

@@ -1,6 +1,7 @@
 import type { IncomingMessage, ServerResponse } from 'node:http';
 import { type SessionStore } from '../auth/token.js';
-export declare function createRoutes(store: SessionStore): ({
+import { type StyleSnippetStore } from '../styles/style-snippets.js';
+export declare function createRoutes(store: SessionStore, styleStore?: StyleSnippetStore): ({
     method: string;
     path: string;
     handler: (_req: IncomingMessage, res: ServerResponse) => Promise<void>;
@@ -8,4 +9,8 @@ export declare function createRoutes(store: SessionStore): ({
     method: string;
     path: string;
     handler: (req: IncomingMessage, res: ServerResponse) => Promise<ServerResponse<IncomingMessage> | undefined>;
+} | {
+    method?: undefined;
+    path: string;
+    handler: (req: IncomingMessage, res: ServerResponse) => Promise<void>;
 })[];

package/lib/routes/api.js

@@ -2,6 +2,8 @@ import { AUTH_COOKIE_NAME, readGlobalLocale } from '../auth/token.js';
 import { getLocalTailscaleIp, getLocalLanIp, getAllNetworkIps, getClientIp, isTailscaleIp, isLanIp } from '../auth/tailscale.js';
 import { getPublicKeyPem, decryptWithPrivateKey, validateSecretStrength, RSA_KEY_FILE } from '../auth/crypto.js';
 import { getLoginPageHtml } from './login-page.js';
+import { DEFAULT_STYLE_FILE } from '../styles/style-snippets.js';
+import { getPairingBridgeState } from '../bridge/compat.js';
 function jsonResponse(res, status, data) {
     res.writeHead(status, {
         'Content-Type': 'application/json; charset=utf-8',
@@ -34,7 +36,7 @@ function parseJsonBody(req) {
         req.on('error', () => resolve({}));
     });
 }
-export function createRoutes(store) {
+export function createRoutes(store, styleStore) {
     return [
         // 0. RSA 公钥获取接口 (RSA-OAEP-SHA256)
         {
@@ -59,6 +61,7 @@ export function createRoutes(store) {
                 const ips = getAllNetworkIps();
                 const sessionStats = store.getSessionsList();
                 const ipSecurityStats = store.getIpSecurityStats();
+                const bridgeState = getPairingBridgeState();
                 jsonResponse(res, 200, {
                     success: true,
                     locale: readGlobalLocale(),
@@ -76,7 +79,12 @@ export function createRoutes(store) {
                     ipSecurityStats,
                     persistPath: store.persistPath,
                     rsaKeyPath: RSA_KEY_FILE,
+                    styleSnippetsPath: styleStore ? styleStore.persistPath : DEFAULT_STYLE_FILE,
                     publicKey: getPublicKeyPem(),
+                    // 与其他远程接入类插件共存的裁决结果（设置页据此展示警示横幅与修复信息）
+                    pairingBridgeMode: bridgeState.mode,
+                    pairingBridgeConflict: bridgeState.conflictWith || '',
+                    pairingBridgeConflictId: bridgeState.conflictEntryId || '',
                 });
             },
         },
@@ -319,7 +327,8 @@ export function createRoutes(store) {
                     'Content-Type': 'text/event-stream',
                     'Cache-Control': 'no-cache, no-transform',
                     'Connection': 'keep-alive',
-                    'Access-Control-Allow-Origin': '*',
+                    // 注意：不设置 Access-Control-Allow-Origin。前端 Bundle 与本接口同源加载，
+                    // EventSource 同源连接无需 CORS 头；开放跨域会允许任意网页读取设备与安全事件流。
                 });
                 res.write(': connected\n\n');
                 const onConnected = (device) => {
@@ -366,5 +375,79 @@ export function createRoutes(store) {
                 res.on('close', cleanup);
             },
         },
+        // 10. 移动端样式片段（样式小插件）管理 API（合并 GET 与 POST 处理，避免 webserver.register 重复 path 冲突）
+        {
+            path: '/api/remote-mobile/styles',
+            handler: async (req, res) => {
+                if (!styleStore) {
+                    return jsonResponse(res, 404, { success: false, reason: 'style snippets module unavailable' });
+                }
+                // POST: 新增或修改自定义片段（pcEnabled/mobileEnabled 双端开关，缺省移动端开、PC 关）
+                if (req.method === 'POST') {
+                    const body = await parseJsonBody(req);
+                    try {
+                        const snippet = styleStore.upsertCustom({
+                            id: typeof body.id === 'string' ? body.id : undefined,
+                            name: typeof body.name === 'string' ? body.name : '',
+                            description: typeof body.description === 'string' ? body.description : undefined,
+                            css: typeof body.css === 'string' ? body.css : '',
+                            pcEnabled: typeof body.pcEnabled === 'boolean' ? body.pcEnabled : false,
+                            mobileEnabled: typeof body.mobileEnabled === 'boolean' ? body.mobileEnabled : true,
+                        });
+                        return jsonResponse(res, 200, { success: true, snippet });
+                    }
+                    catch (e) {
+                        return jsonResponse(res, 400, {
+                            success: false,
+                            reason: e?.message || 'invalid style snippet payload',
+                        });
+                    }
+                }
+                // 默认 GET: 列出全部样式片段（内置预设名称按请求语言本地化）
+                const accept = req.headers['accept-language'] || '';
+                const lang = accept.toLowerCase().startsWith('en') ? 'en' : readGlobalLocale();
+                jsonResponse(res, 200, {
+                    success: true,
+                    snippets: styleStore.list(lang),
+                    persistPath: styleStore.persistPath,
+                });
+            },
+        },
+        {
+            method: 'POST',
+            path: '/api/remote-mobile/styles/toggle',
+            handler: async (req, res) => {
+                if (!styleStore) {
+                    return jsonResponse(res, 404, { success: false, reason: 'style snippets module unavailable' });
+                }
+                const body = await parseJsonBody(req);
+                const scope = body.scope === 'pc' ? 'pc' : 'mobile';
+                const ok = styleStore.setEnabled(String(body.id || ''), scope, Boolean(body.enabled));
+                jsonResponse(res, ok ? 200 : 400, { success: ok, reason: ok ? undefined : 'style snippet not found' });
+            },
+        },
+        {
+            method: 'POST',
+            path: '/api/remote-mobile/styles/delete',
+            handler: async (req, res) => {
+                if (!styleStore) {
+                    return jsonResponse(res, 404, { success: false, reason: 'style snippets module unavailable' });
+                }
+                const body = await parseJsonBody(req);
+                const ok = styleStore.removeCustom(String(body.id || ''));
+                jsonResponse(res, ok ? 200 : 400, { success: ok, reason: ok ? undefined : 'custom snippet not found' });
+            },
+        },
+        {
+            method: 'POST',
+            path: '/api/remote-mobile/styles/reset',
+            handler: async (_req, res) => {
+                if (!styleStore) {
+                    return jsonResponse(res, 404, { success: false, reason: 'style snippets module unavailable' });
+                }
+                styleStore.resetEnabled();
+                jsonResponse(res, 200, { success: true, snippets: styleStore.list() });
+            },
+        },
     ];
 }

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;
+}