@xcanwin/manyoyo 5.8.10 → 5.9.0

package/lib/web/frontend/file-browser.js

@@ -0,0 +1,406 @@
+(function () {
+    function escapeHtml(value) {
+        return String(value == null ? '' : value)
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+    }
+
+    function formatBytes(size) {
+        const value = Number(size || 0);
+        if (!Number.isFinite(value) || value <= 0) {
+            return '0 B';
+        }
+        if (value < 1024) {
+            return `${value} B`;
+        }
+        if (value < 1024 * 1024) {
+            return `${(value / 1024).toFixed(1)} KB`;
+        }
+        if (value < 1024 * 1024 * 1024) {
+            return `${(value / (1024 * 1024)).toFixed(1)} MB`;
+        }
+        return `${(value / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+    }
+
+    function formatDateTime(value) {
+        if (!value) {
+            return '未知时间';
+        }
+        const date = new Date(value);
+        if (Number.isNaN(date.getTime())) {
+            return '未知时间';
+        }
+        return date.toLocaleString('zh-CN', {
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    }
+
+    function buildEntryMeta(entry) {
+        const parts = [];
+        if (entry && entry.kind === 'directory') {
+            parts.push('目录');
+        } else {
+            parts.push(formatBytes(entry && entry.size));
+        }
+        if (entry && entry.mtimeMs) {
+            parts.push(formatDateTime(entry.mtimeMs));
+        }
+        return parts.join(' · ');
+    }
+
+    function inferLanguageFromPath(filePath) {
+        const text = String(filePath || '').toLowerCase();
+        if (text.endsWith('.md') || text.endsWith('.markdown')) return 'markdown';
+        if (text.endsWith('.json')) return 'json';
+        if (text.endsWith('.py')) return 'python';
+        if (text.endsWith('.yaml') || text.endsWith('.yml')) return 'yaml';
+        if (text.endsWith('.html') || text.endsWith('.htm')) return 'html';
+        if (text.endsWith('.css')) return 'css';
+        if (text.endsWith('.js') || text.endsWith('.jsx') || text.endsWith('.mjs') || text.endsWith('.cjs') || text.endsWith('.ts') || text.endsWith('.tsx')) {
+            return 'javascript';
+        }
+        return 'text';
+    }
+
+    function create(options) {
+        const root = options && options.root;
+        const api = options && options.api;
+        const onError = options && typeof options.onError === 'function'
+            ? options.onError
+            : function (message) { window.alert(message); };
+        if (!root || typeof api !== 'function') {
+            return {
+                sync: function () {}
+            };
+        }
+
+        root.innerHTML = `
+            <section class="files-browser">
+                <header class="files-toolbar">
+                    <button type="button" class="secondary" data-action="up">上一级</button>
+                    <button type="button" class="secondary" data-action="refresh">刷新</button>
+                    <div class="files-toolbar-path" data-role="path">/</div>
+                    <div class="files-toolbar-status" data-role="status">未加载</div>
+                </header>
+                <div class="files-layout">
+                    <aside class="files-sidebar">
+                        <div class="files-list" data-role="list"></div>
+                    </aside>
+                    <section class="files-preview">
+                        <header class="files-preview-head">
+                            <div class="files-preview-title" data-role="preview-title">未选择文件</div>
+                            <div class="files-preview-meta" data-role="preview-meta">请选择左侧文件或目录</div>
+                        </header>
+                        <div class="files-preview-body" data-role="preview-body"></div>
+                    </section>
+                </div>
+            </section>
+        `;
+
+        const pathNode = root.querySelector('[data-role="path"]');
+        const statusNode = root.querySelector('[data-role="status"]');
+        const listNode = root.querySelector('[data-role="list"]');
+        const previewTitleNode = root.querySelector('[data-role="preview-title"]');
+        const previewMetaNode = root.querySelector('[data-role="preview-meta"]');
+        const previewBodyNode = root.querySelector('[data-role="preview-body"]');
+        const upBtn = root.querySelector('[data-action="up"]');
+        const refreshBtn = root.querySelector('[data-action="refresh"]');
+
+        const state = {
+            visible: false,
+            sessionName: '',
+            containerName: '',
+            containerPath: '',
+            historyOnly: false,
+            currentPath: '',
+            parentPath: '',
+            entries: [],
+            selectedPath: '',
+            selectedFile: null,
+            loadingList: false,
+            loadingFile: false,
+            listRequestId: 0,
+            readRequestId: 0,
+            editor: null,
+            editorHost: null
+        };
+
+        function setStatus(text) {
+            if (statusNode) {
+                statusNode.textContent = String(text || '').trim() || '就绪';
+            }
+        }
+
+        function destroyEditor() {
+            if (state.editor && typeof state.editor.destroy === 'function') {
+                state.editor.destroy();
+            }
+            state.editor = null;
+            state.editorHost = null;
+        }
+
+        function renderPreviewEmpty(title, description) {
+            if (previewTitleNode) {
+                previewTitleNode.textContent = title;
+            }
+            if (previewMetaNode) {
+                previewMetaNode.textContent = description;
+            }
+            if (previewBodyNode) {
+                previewBodyNode.innerHTML = `<div class="files-empty">${escapeHtml(description)}</div>`;
+            }
+            destroyEditor();
+        }
+
+        function ensureEditorHost() {
+            if (!previewBodyNode) {
+                return null;
+            }
+            previewBodyNode.innerHTML = '';
+            const host = document.createElement('div');
+            host.className = 'files-editor-host';
+            previewBodyNode.appendChild(host);
+            state.editorHost = host;
+            return host;
+        }
+
+        function renderPreviewPayload(payload) {
+            state.selectedFile = payload || null;
+            if (!payload) {
+                renderPreviewEmpty('未选择文件', '请选择左侧文件进行预览。');
+                return;
+            }
+            if (previewTitleNode) {
+                previewTitleNode.textContent = payload.path || '未命名文件';
+            }
+            if (previewMetaNode) {
+                previewMetaNode.textContent = `${payload.kind === 'text' ? '文本文件' : '文件'} · ${formatBytes(payload.size)}${payload.truncated ? ' · 已截断预览' : ''}`;
+            }
+            if (!previewBodyNode) {
+                return;
+            }
+
+            if (payload.kind === 'text') {
+                const language = payload.language || inferLanguageFromPath(payload.path);
+                if (window.ManyoyoCodeEditor && typeof window.ManyoyoCodeEditor.create === 'function') {
+                    if (!state.editor || !state.editorHost || !previewBodyNode.contains(state.editorHost)) {
+                        destroyEditor();
+                        const host = ensureEditorHost();
+                        if (host) {
+                            state.editor = window.ManyoyoCodeEditor.create(host, {
+                                doc: String(payload.content || ''),
+                                language,
+                                readOnly: true
+                            });
+                        }
+                    } else {
+                        state.editor.setValue(String(payload.content || ''));
+                        state.editor.setLanguage(language);
+                        state.editor.setReadOnly(true);
+                    }
+                    return;
+                }
+
+                destroyEditor();
+                previewBodyNode.innerHTML = `<pre class="files-pre">${escapeHtml(String(payload.content || ''))}</pre>`;
+                return;
+            }
+
+            destroyEditor();
+            previewBodyNode.innerHTML = `<div class="files-note">当前文件暂不支持在线预览。文件类型：${escapeHtml(payload.kind || 'unknown')}</div>`;
+        }
+
+        function renderList() {
+            if (pathNode) {
+                pathNode.textContent = state.currentPath || state.containerPath || '/';
+            }
+            if (upBtn) {
+                upBtn.disabled = state.loadingList || !state.parentPath;
+            }
+            if (refreshBtn) {
+                refreshBtn.disabled = state.loadingList || state.loadingFile;
+            }
+            if (!listNode) {
+                return;
+            }
+            listNode.innerHTML = '';
+
+            if (!state.sessionName) {
+                listNode.innerHTML = '<div class="files-empty">请选择左侧会话后再浏览容器文件。</div>';
+                renderPreviewEmpty('未选择会话', '请选择左侧会话后再浏览容器文件。');
+                setStatus('未选择会话');
+                return;
+            }
+            if (state.historyOnly) {
+                listNode.innerHTML = '<div class="files-empty">当前会话只有历史记录，没有可访问的运行中容器。</div>';
+                renderPreviewEmpty('容器不可用', '当前会话只有历史记录，没有可访问的运行中容器。');
+                setStatus('容器不可用');
+                return;
+            }
+            if (state.loadingList) {
+                listNode.innerHTML = '<div class="files-empty">正在读取目录...</div>';
+                setStatus('读取目录中');
+                return;
+            }
+            if (!state.entries.length) {
+                listNode.innerHTML = '<div class="files-empty">当前目录为空。</div>';
+                setStatus('目录为空');
+                return;
+            }
+
+            state.entries.forEach(function (entry) {
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.className = 'files-entry' + (state.selectedPath === entry.path ? ' is-active' : '');
+                button.title = String(entry.path || entry.name || '');
+                button.addEventListener('click', function () {
+                    if (entry.kind === 'directory') {
+                        loadDirectory(entry.path);
+                        return;
+                    }
+                    loadFile(entry.path);
+                });
+                button.innerHTML = `
+                    <span class="files-entry-name">
+                        <span class="files-entry-title">${escapeHtml(entry.name || entry.path || '未命名')}</span>
+                    </span>
+                    <span class="files-entry-meta">${escapeHtml(buildEntryMeta(entry))}</span>
+                `;
+                listNode.appendChild(button);
+            });
+            setStatus(state.loadingFile ? '读取文件中' : `共 ${state.entries.length} 项`);
+        }
+
+        async function loadDirectory(targetPath) {
+            const pathText = String(targetPath || state.currentPath || state.containerPath || '/').trim() || '/';
+            const requestId = state.listRequestId + 1;
+            state.listRequestId = requestId;
+            state.loadingList = true;
+            state.selectedPath = '';
+            renderList();
+            try {
+                const payload = await api('/api/sessions/' + encodeURIComponent(state.sessionName) + '/fs/list?path=' + encodeURIComponent(pathText));
+                if (requestId !== state.listRequestId) {
+                    return;
+                }
+                state.currentPath = payload && payload.path ? payload.path : pathText;
+                state.parentPath = payload && payload.parentPath ? payload.parentPath : '';
+                state.entries = Array.isArray(payload && payload.entries) ? payload.entries : [];
+                renderPreviewEmpty(state.currentPath, '请选择左侧文件进行预览。');
+            } catch (e) {
+                if (requestId !== state.listRequestId) {
+                    return;
+                }
+                onError(e && e.message ? e.message : '读取目录失败');
+            } finally {
+                if (requestId !== state.listRequestId) {
+                    return;
+                }
+                state.loadingList = false;
+                renderList();
+            }
+        }
+
+        async function loadFile(targetPath) {
+            const pathText = String(targetPath || '').trim();
+            if (!pathText) {
+                return;
+            }
+            const requestId = state.readRequestId + 1;
+            state.readRequestId = requestId;
+            state.loadingFile = true;
+            state.selectedPath = pathText;
+            renderList();
+            renderPreviewEmpty(pathText, '正在读取文件内容...');
+            try {
+                const payload = await api('/api/sessions/' + encodeURIComponent(state.sessionName) + '/fs/read?path=' + encodeURIComponent(pathText));
+                if (requestId !== state.readRequestId) {
+                    return;
+                }
+                renderPreviewPayload(payload);
+            } catch (e) {
+                if (requestId !== state.readRequestId) {
+                    return;
+                }
+                renderPreviewEmpty(pathText, e && e.message ? e.message : '读取文件失败');
+                onError(e && e.message ? e.message : '读取文件失败');
+            } finally {
+                if (requestId !== state.readRequestId) {
+                    return;
+                }
+                state.loadingFile = false;
+                renderList();
+            }
+        }
+
+        function sync(context) {
+            const session = context && context.session;
+            const detail = context && context.detail;
+            const nextSessionName = String(session && session.name ? session.name : '').trim();
+            const nextContainerName = String(session && session.containerName ? session.containerName : '').trim();
+            const nextContainerPath = String(
+                (detail && detail.containerPath)
+                || (session && session.containerPath)
+                || '/'
+            ).trim() || '/';
+            const nextVisible = Boolean(context && context.visible);
+            const nextHistoryOnly = context && context.historyOnly === true;
+            const sessionChanged = nextSessionName !== state.sessionName;
+            const containerPathChanged = nextContainerPath !== state.containerPath;
+
+            state.visible = nextVisible;
+            state.historyOnly = nextHistoryOnly;
+
+            if (sessionChanged) {
+                state.sessionName = nextSessionName;
+                state.containerName = nextContainerName;
+                state.containerPath = nextContainerPath;
+                state.currentPath = '';
+                state.parentPath = '';
+                state.entries = [];
+                state.selectedPath = '';
+                renderPreviewEmpty('未选择文件', '请选择左侧文件进行预览。');
+            } else if (containerPathChanged) {
+                state.containerPath = nextContainerPath;
+            }
+
+            renderList();
+            if (!nextVisible || !state.sessionName || state.historyOnly) {
+                return;
+            }
+            if (sessionChanged || containerPathChanged || !state.currentPath) {
+                loadDirectory(state.containerPath || '/');
+            }
+        }
+
+        if (upBtn) {
+            upBtn.addEventListener('click', function () {
+                if (state.parentPath) {
+                    loadDirectory(state.parentPath);
+                }
+            });
+        }
+
+        if (refreshBtn) {
+            refreshBtn.addEventListener('click', function () {
+                loadDirectory(state.currentPath || state.containerPath || '/');
+            });
+        }
+
+        renderList();
+
+        return {
+            sync
+        };
+    }
+
+    window.ManyoyoFileBrowser = {
+        create
+    };
+}());

package/lib/web/frontend/markdown-renderer.js

@@ -1,8 +1,11 @@
 (function () {
-    const MARKDOWN_URL_PROTOCOL_PATTERN = /^(https?:|mailto:|tel:)/i;
+    const MARKDOWN_LINK_PROTOCOL_PATTERN = /^(https?:|mailto:|tel:)/i;
+    const MARKDOWN_IMAGE_PROTOCOL_PATTERN = /^(https?:)/i;
     const runtime = {
         configured: false,
-        available: false
+        available: false,
+        linkGuardBound: false,
+        linkOpenHandler: null
     };
 
     function escapeHtml(value) {
@@ -14,26 +17,175 @@
             .replace(/'/g, ''');
     }
 
-    function sanitizeMarkdownUrl(value) {
+    function normalizeRendererValue(value) {
+        if (value && typeof value === 'object') {
+            if (typeof value.href === 'string') {
+                return value.href;
+            }
+            if (typeof value.text === 'string') {
+                return value.text;
+            }
+        }
+        return String(value == null ? '' : value);
+    }
+
+    function sanitizeMarkdownLinkUrl(value) {
         const raw = String(value == null ? '' : value).trim();
         if (!raw) {
             return '';
         }
-        if (raw[0] === '#') {
+        if (MARKDOWN_LINK_PROTOCOL_PATTERN.test(raw)) {
             return raw;
         }
+        return '';
+    }
+
+    function sanitizeMarkdownImageUrl(value) {
+        const raw = String(value == null ? '' : value).trim();
+        if (!raw) {
+            return '';
+        }
         if (raw[0] === '/') {
             return raw.startsWith('//') ? '' : raw;
         }
         if (raw.startsWith('./') || raw.startsWith('../')) {
             return raw;
         }
-        if (MARKDOWN_URL_PROTOCOL_PATTERN.test(raw)) {
+        if (MARKDOWN_IMAGE_PROTOCOL_PATTERN.test(raw)) {
             return raw;
         }
         return '';
     }
 
+    function getRendererToken(value) {
+        return value && typeof value === 'object' ? value : null;
+    }
+
+    function renderInlineTokens(rendererContext, token, fallbackText) {
+        if (
+            token
+            && Array.isArray(token.tokens)
+            && rendererContext
+            && rendererContext.parser
+            && typeof rendererContext.parser.parseInline === 'function'
+        ) {
+            try {
+                return String(rendererContext.parser.parseInline(token.tokens) || '');
+            } catch (e) {
+                // ignore and fallback to plain text below
+            }
+        }
+        if (token && typeof token.text === 'string') {
+            return escapeHtml(token.text);
+        }
+        return escapeHtml(fallbackText || '');
+    }
+
+    function buildSafeAnchorHtml(href, title, content, extraAttrs) {
+        let output = '<a href="' + escapeHtml(href) + '" target="_blank" rel="noopener noreferrer"'
+            + ' referrerpolicy="no-referrer" data-safe-external-link="true"'
+            + ' data-safe-href="' + escapeHtml(href) + '"';
+        if (title) {
+            output += ' title="' + escapeHtml(title) + '"';
+        }
+        if (extraAttrs) {
+            output += extraAttrs;
+        }
+        output += '>' + content + '</a>';
+        return output;
+    }
+
+    function openExternalLinkWithNoReferrer(href) {
+        const url = String(href || '').trim();
+        if (!url || typeof document === 'undefined' || !document || typeof document.createElement !== 'function') {
+            if (typeof window.open === 'function') {
+                const opened = window.open(url, '_blank', 'noopener,noreferrer');
+                if (opened) {
+                    opened.opener = null;
+                }
+            }
+            return;
+        }
+
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.target = '_blank';
+        anchor.rel = 'noopener noreferrer';
+        anchor.referrerPolicy = 'no-referrer';
+        anchor.style.display = 'none';
+        document.body.appendChild(anchor);
+        try {
+            if (typeof anchor.click === 'function') {
+                anchor.click();
+            } else if (typeof window.open === 'function') {
+                const opened = window.open(url, '_blank', 'noopener,noreferrer');
+                if (opened) {
+                    opened.opener = null;
+                }
+            }
+        } finally {
+            if (anchor.parentNode && typeof anchor.parentNode.removeChild === 'function') {
+                anchor.parentNode.removeChild(anchor);
+            }
+        }
+    }
+
+    function requestExternalLinkOpen(href) {
+        const url = String(href || '').trim();
+        if (!url) {
+            return;
+        }
+        if (typeof runtime.linkOpenHandler === 'function') {
+            runtime.linkOpenHandler(url);
+            return;
+        }
+
+        const shouldOpen = typeof window.confirm === 'function'
+            ? window.confirm('即将打开外部链接：\n' + url + '\n\n确认继续打开？')
+            : true;
+        if (!shouldOpen) {
+            return;
+        }
+
+        openExternalLinkWithNoReferrer(url);
+    }
+
+    function bindDocumentLinkGuard() {
+        if (runtime.linkGuardBound || typeof document === 'undefined' || !document || typeof document.addEventListener !== 'function') {
+            return;
+        }
+
+        document.addEventListener('click', function (event) {
+            const target = event && event.target;
+            if (!target || typeof target.closest !== 'function') {
+                return;
+            }
+            const link = target.closest('a[data-safe-external-link="true"]');
+            if (!link) {
+                return;
+            }
+            if (event.preventDefault) {
+                event.preventDefault();
+            }
+            if (event.stopPropagation) {
+                event.stopPropagation();
+            }
+
+            const href = String(
+                (typeof link.getAttribute === 'function' && (link.getAttribute('data-safe-href') || link.getAttribute('href')))
+                || link.href
+                || ''
+            ).trim();
+            if (!href) {
+                return;
+            }
+
+            requestExternalLinkOpen(href);
+        });
+
+        runtime.linkGuardBound = true;
+    }
+
     function getMarkedApi() {
         const api = window.marked;
         if (!api || typeof api.parse !== 'function') {
@@ -57,45 +209,48 @@
         try {
             const renderer = new markedApi.Renderer();
             renderer.html = function (html) {
-                return escapeHtml(html);
+                const token = getRendererToken(html);
+                return escapeHtml(token ? token.text : html);
             };
             renderer.link = function (href, title, text) {
-                const safeHref = sanitizeMarkdownUrl(href);
+                const token = getRendererToken(href);
+                const rawHref = token ? token.href : normalizeRendererValue(href);
+                const rawTitle = token ? token.title : title;
+                const safeHref = sanitizeMarkdownLinkUrl(rawHref);
+                const safeText = renderInlineTokens(this, token, text)
+                    // [P1-02] 移除 marked 已渲染链接文本中的 on* 事件属性，防止内联 HTML 注入 XSS
+                    .replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]*)/gi, '');
                 if (!safeHref) {
-                    return escapeHtml(text || '');
-                }
-                // [P1-02] 移除 marked 已渲染链接文本中的 on* 事件属性，防止内联 HTML 注入 XSS
-                const safeText = String(text || '').replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]*)/gi, '');
-                let output = '<a href="' + escapeHtml(safeHref) + '" target="_blank" rel="noopener noreferrer"';
-                if (title) {
-                    output += ' title="' + escapeHtml(title) + '"';
+                    return safeText || escapeHtml(token ? token.text : text || '');
                 }
-                output += '>' + safeText + '</a>';
-                return output;
+                return buildSafeAnchorHtml(safeHref, rawTitle, safeText || escapeHtml(safeHref));
             };
             // [P1-01] 重写 image 渲染器：
             //   - 外部 http/https 图片转为可点击链接，避免浏览器自动发起外部请求（追踪像素风险）
             //   - 相对路径图片正常渲染为 <img>
             //   - 危险协议（javascript:/data: 等）降级为纯文本
             renderer.image = function (href, title, text) {
-                const safeHref = sanitizeMarkdownUrl(href);
+                const token = getRendererToken(href);
+                const rawHref = token ? token.href : normalizeRendererValue(href);
+                const rawTitle = token ? token.title : title;
+                const safeHref = sanitizeMarkdownImageUrl(rawHref);
+                const safeText = renderInlineTokens(this, token, text)
+                    .replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]*)/gi, '');
                 if (!safeHref) {
-                    return escapeHtml(text || '');
+                    return safeText || escapeHtml(token ? token.text : text || '');
                 }
                 // 外部绝对 URL：转为链接，用户主动决定是否访问
                 if (/^https?:/i.test(safeHref)) {
-                    const safeText = String(text || '').replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]*)/gi, '')
-                        || escapeHtml(safeHref);
-                    let output = '<a href="' + escapeHtml(safeHref) + '" target="_blank" rel="noopener noreferrer"';
-                    if (title) {
-                        output += ' title="' + escapeHtml(title) + '"';
-                    }
-                    return output + '>[\uD83D\uDDBC\uFE0F点击查看图片:' + safeText + ']</a>';
+                    return buildSafeAnchorHtml(
+                        safeHref,
+                        rawTitle,
+                        '[\uD83D\uDDBC\uFE0F点击查看图片:' + (safeText || escapeHtml(safeHref)) + ']'
+                    );
                 }
                 // 相对路径：正常渲染为图片
                 let output = '<img src="' + escapeHtml(safeHref) + '" alt="' + escapeHtml(text || '') + '"';
-                if (title) {
-                    output += ' title="' + escapeHtml(title) + '"';
+                if (rawTitle) {
+                    output += ' title="' + escapeHtml(rawTitle) + '"';
                 }
                 return output + '>';
             };
@@ -138,6 +293,12 @@
 
     window.ManyoyoMarkdown = {
         shouldRenderMessage,
-        render
+        render,
+        openExternalLink: openExternalLinkWithNoReferrer,
+        setLinkOpenHandler: function (handler) {
+            runtime.linkOpenHandler = typeof handler === 'function' ? handler : null;
+        }
     };
+
+    bindDocumentLinkGuard();
 }());