@xcanwin/manyoyo 5.9.3 → 5.9.11

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

@@ -1,4 +1,5 @@
 (function () {
+    const FILE_EDIT_MAX_BYTES = 2 * 1024 * 1024;
     function escapeHtml(value) {
         return String(value == null ? '' : value)
             .replace(/&/g, '&')
@@ -83,10 +84,14 @@
         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>
+                    <div class="files-toolbar-path-group">
+                        <input type="text" class="files-toolbar-path-input" data-role="path" value="/" spellcheck="false" />
+                        <button type="button" class="secondary" data-action="visit">访问</button>
+                    </div>
+                    <div class="files-toolbar-meta">
+                        <div class="files-toolbar-status" data-role="status">未加载</div>
+                        <button type="button" class="secondary" data-action="mkdir">新建目录</button>
+                    </div>
                 </header>
                 <div class="files-layout">
                     <aside class="files-sidebar">
@@ -94,8 +99,13 @@
                     </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>
+                            <div class="files-preview-head-main">
+                                <div class="files-preview-title" data-role="preview-title">未选择文件</div>
+                                <div class="files-preview-meta" data-role="preview-meta">请选择左侧文件或目录</div>
+                            </div>
+                            <div class="files-preview-actions">
+                                <button type="button" class="secondary" data-action="save" disabled>保存</button>
+                            </div>
                         </header>
                         <div class="files-preview-body" data-role="preview-body"></div>
                     </section>
@@ -109,8 +119,9 @@
         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 visitBtn = root.querySelector('[data-action="visit"]');
+        const mkdirBtn = root.querySelector('[data-action="mkdir"]');
+        const saveBtn = root.querySelector('[data-action="save"]');
 
         const state = {
             visible: false,
@@ -119,16 +130,21 @@
             containerPath: '',
             historyOnly: false,
             currentPath: '',
+            pathDraft: '',
             parentPath: '',
             entries: [],
             selectedPath: '',
             selectedFile: null,
+            selectedEntry: null,
             loadingList: false,
             loadingFile: false,
+            savingFile: false,
             listRequestId: 0,
             readRequestId: 0,
             editor: null,
-            editorHost: null
+            editorHost: null,
+            previewReadOnly: true,
+            previewDirty: false
         };
 
         function setStatus(text) {
@@ -145,7 +161,28 @@
             state.editorHost = null;
         }
 
+        function isEditablePreview() {
+            return Boolean(
+                state.selectedFile
+                && state.selectedFile.kind === 'text'
+                && state.previewReadOnly === false
+                && state.historyOnly !== true
+                && state.savingFile !== true
+            );
+        }
+
+        function syncSaveButton() {
+            if (!saveBtn) {
+                return;
+            }
+            saveBtn.disabled = !isEditablePreview();
+            saveBtn.textContent = state.savingFile ? '保存中...' : '保存';
+        }
+
         function renderPreviewEmpty(title, description) {
+            state.selectedFile = null;
+            state.previewReadOnly = true;
+            state.previewDirty = false;
             if (previewTitleNode) {
                 previewTitleNode.textContent = title;
             }
@@ -156,6 +193,7 @@
                 previewBodyNode.innerHTML = `<div class="files-empty">${escapeHtml(description)}</div>`;
             }
             destroyEditor();
+            syncSaveButton();
         }
 
         function ensureEditorHost() {
@@ -172,6 +210,8 @@
 
         function renderPreviewPayload(payload) {
             state.selectedFile = payload || null;
+            state.previewReadOnly = !(payload && payload.editable === true);
+            state.previewDirty = false;
             if (!payload) {
                 renderPreviewEmpty('未选择文件', '请选择左侧文件进行预览。');
                 return;
@@ -180,9 +220,13 @@
                 previewTitleNode.textContent = payload.path || '未命名文件';
             }
             if (previewMetaNode) {
-                previewMetaNode.textContent = `${payload.kind === 'text' ? '文本文件' : '文件'} · ${formatBytes(payload.size)}${payload.truncated ? ' · 已截断预览' : ''}`;
+                const modeLabel = payload.kind === 'text'
+                    ? (payload.editable === true ? '可编辑' : '只读预览')
+                    : '只读预览';
+                previewMetaNode.textContent = `${payload.kind === 'text' ? '文本文件' : '文件'} · ${formatBytes(payload.size)} · ${modeLabel}${payload.truncated ? ' · 已截断预览' : ''}`;
             }
             if (!previewBodyNode) {
+                syncSaveButton();
                 return;
             }
 
@@ -196,35 +240,42 @@
                             state.editor = window.ManyoyoCodeEditor.create(host, {
                                 doc: String(payload.content || ''),
                                 language,
-                                readOnly: true
+                                readOnly: state.previewReadOnly,
+                                onChange: function () {
+                                    state.previewDirty = true;
+                                    syncSaveButton();
+                                }
                             });
                         }
                     } else {
                         state.editor.setValue(String(payload.content || ''));
                         state.editor.setLanguage(language);
-                        state.editor.setReadOnly(true);
+                        state.editor.setReadOnly(state.previewReadOnly);
                     }
+                    syncSaveButton();
                     return;
                 }
 
                 destroyEditor();
                 previewBodyNode.innerHTML = `<pre class="files-pre">${escapeHtml(String(payload.content || ''))}</pre>`;
+                syncSaveButton();
                 return;
             }
 
             destroyEditor();
             previewBodyNode.innerHTML = `<div class="files-note">当前文件暂不支持在线预览。文件类型：${escapeHtml(payload.kind || 'unknown')}</div>`;
+            syncSaveButton();
         }
 
         function renderList() {
             if (pathNode) {
-                pathNode.textContent = state.currentPath || state.containerPath || '/';
+                pathNode.value = state.pathDraft || state.currentPath || state.containerPath || '/';
             }
-            if (upBtn) {
-                upBtn.disabled = state.loadingList || !state.parentPath;
+            if (visitBtn) {
+                visitBtn.disabled = state.loadingList || state.loadingFile || !(state.pathDraft || '').trim();
             }
-            if (refreshBtn) {
-                refreshBtn.disabled = state.loadingList || state.loadingFile;
+            if (mkdirBtn) {
+                mkdirBtn.disabled = state.loadingList || state.loadingFile || !state.sessionName || state.historyOnly === true;
             }
             if (!listNode) {
                 return;
@@ -248,8 +299,25 @@
                 setStatus('读取目录中');
                 return;
             }
+
+            if (state.parentPath) {
+                const parentButton = document.createElement('button');
+                parentButton.type = 'button';
+                parentButton.className = 'files-entry files-entry-parent';
+                parentButton.title = state.parentPath;
+                parentButton.addEventListener('click', function () {
+                    loadDirectory(state.parentPath);
+                });
+                parentButton.innerHTML = `
+                    <span class="files-entry-name">
+                        <span class="files-entry-title">..</span>
+                    </span>
+                    <span class="files-entry-meta">上一级</span>
+                `;
+                listNode.appendChild(parentButton);
+            }
+
             if (!state.entries.length) {
-                listNode.innerHTML = '<div class="files-empty">当前目录为空。</div>';
                 setStatus('目录为空');
                 return;
             }
@@ -264,7 +332,7 @@
                         loadDirectory(entry.path);
                         return;
                     }
-                    loadFile(entry.path);
+                    loadFile(entry.path, entry);
                 });
                 button.innerHTML = `
                     <span class="files-entry-name">
@@ -282,7 +350,9 @@
             const requestId = state.listRequestId + 1;
             state.listRequestId = requestId;
             state.loadingList = true;
+            state.pathDraft = pathText;
             state.selectedPath = '';
+            state.selectedEntry = null;
             renderList();
             try {
                 const payload = await api('/api/sessions/' + encodeURIComponent(state.sessionName) + '/fs/list?path=' + encodeURIComponent(pathText));
@@ -290,9 +360,10 @@
                     return;
                 }
                 state.currentPath = payload && payload.path ? payload.path : pathText;
+                state.pathDraft = state.currentPath;
                 state.parentPath = payload && payload.parentPath ? payload.parentPath : '';
                 state.entries = Array.isArray(payload && payload.entries) ? payload.entries : [];
-                renderPreviewEmpty(state.currentPath, '请选择左侧文件进行预览。');
+                renderPreviewEmpty('未选择文件', '请选择左侧文件进行预览。');
             } catch (e) {
                 if (requestId !== state.listRequestId) {
                     return;
@@ -307,22 +378,39 @@
             }
         }
 
-        async function loadFile(targetPath) {
+        async function loadFile(targetPath, entry) {
             const pathText = String(targetPath || '').trim();
             if (!pathText) {
                 return;
             }
+            const selectedEntry = entry && typeof entry === 'object' ? entry : null;
+            const fileSize = Number(selectedEntry && selectedEntry.size);
+            const requiresReadonlyConfirm = Number.isFinite(fileSize) && fileSize >= FILE_EDIT_MAX_BYTES;
+            if (requiresReadonlyConfirm) {
+                const yes = window.confirm(`文件较大（${formatBytes(fileSize)}），继续后将以只读方式全量预览，无法保存。是否继续？`);
+                if (!yes) {
+                    return;
+                }
+            }
             const requestId = state.readRequestId + 1;
             state.readRequestId = requestId;
             state.loadingFile = true;
             state.selectedPath = pathText;
+            state.selectedEntry = selectedEntry;
             renderList();
             renderPreviewEmpty(pathText, '正在读取文件内容...');
             try {
-                const payload = await api('/api/sessions/' + encodeURIComponent(state.sessionName) + '/fs/read?path=' + encodeURIComponent(pathText));
+                const payload = await api(
+                    '/api/sessions/' + encodeURIComponent(state.sessionName) + '/fs/read?path='
+                    + encodeURIComponent(pathText)
+                    + '&full=1'
+                );
                 if (requestId !== state.readRequestId) {
                     return;
                 }
+                if (requiresReadonlyConfirm && payload && payload.kind === 'text') {
+                    payload.editable = false;
+                }
                 renderPreviewPayload(payload);
             } catch (e) {
                 if (requestId !== state.readRequestId) {
@@ -339,6 +427,83 @@
             }
         }
 
+        async function saveCurrentFile() {
+            if (!isEditablePreview() || !state.editor || typeof state.editor.getValue !== 'function' || !state.selectedFile || !state.selectedFile.path) {
+                return;
+            }
+            state.savingFile = true;
+            syncSaveButton();
+            setStatus('保存中');
+            try {
+                const nextContent = state.editor.getValue();
+                const payload = await api('/api/sessions/' + encodeURIComponent(state.sessionName) + '/fs/write', {
+                    method: 'PUT',
+                    body: JSON.stringify({
+                        path: state.selectedFile.path,
+                        content: nextContent
+                    })
+                });
+                state.previewDirty = false;
+                if (state.selectedFile) {
+                    state.selectedFile.content = nextContent;
+                    state.selectedFile.size = payload && typeof payload.size === 'number'
+                        ? payload.size
+                        : new TextEncoder().encode(nextContent).length;
+                }
+                const matchedEntry = state.entries.find(function (item) {
+                    return item && state.selectedFile && item.path === state.selectedFile.path;
+                });
+                if (matchedEntry && state.selectedFile) {
+                    matchedEntry.size = state.selectedFile.size;
+                }
+                renderPreviewPayload(state.selectedFile);
+                renderList();
+                setStatus('已保存');
+            } catch (e) {
+                setStatus('保存失败');
+                onError(e && e.message ? e.message : '保存文件失败');
+            } finally {
+                state.savingFile = false;
+                syncSaveButton();
+            }
+        }
+
+        function joinDirectoryPath(basePath, childName) {
+            const base = String(basePath || '/').trim() || '/';
+            const child = String(childName || '').trim();
+            if (!child) {
+                return base;
+            }
+            if (base === '/') {
+                return '/' + child.replace(/^\/+/, '');
+            }
+            return base.replace(/\/+$/, '') + '/' + child.replace(/^\/+/, '');
+        }
+
+        async function createDirectory() {
+            if (!state.sessionName || state.historyOnly === true || state.loadingList || state.loadingFile) {
+                return;
+            }
+            const input = window.prompt('请输入新目录名称');
+            const name = String(input || '').trim();
+            if (!name) {
+                return;
+            }
+            const targetPath = joinDirectoryPath(state.currentPath || state.containerPath || '/', name);
+            setStatus('创建目录中');
+            try {
+                await api('/api/sessions/' + encodeURIComponent(state.sessionName) + '/fs/mkdir', {
+                    method: 'POST',
+                    body: JSON.stringify({ path: targetPath })
+                });
+                await loadDirectory(state.currentPath || state.containerPath || '/');
+                setStatus('已创建目录');
+            } catch (e) {
+                setStatus('创建目录失败');
+                onError(e && e.message ? e.message : '创建目录失败');
+            }
+        }
+
         function sync(context) {
             const session = context && context.session;
             const detail = context && context.detail;
@@ -362,12 +527,17 @@
                 state.containerName = nextContainerName;
                 state.containerPath = nextContainerPath;
                 state.currentPath = '';
+                state.pathDraft = nextContainerPath;
                 state.parentPath = '';
                 state.entries = [];
                 state.selectedPath = '';
+                state.selectedEntry = null;
                 renderPreviewEmpty('未选择文件', '请选择左侧文件进行预览。');
             } else if (containerPathChanged) {
                 state.containerPath = nextContainerPath;
+                if (!state.currentPath) {
+                    state.pathDraft = nextContainerPath;
+                }
             }
 
             renderList();
@@ -379,17 +549,38 @@
             }
         }
 
-        if (upBtn) {
-            upBtn.addEventListener('click', function () {
-                if (state.parentPath) {
-                    loadDirectory(state.parentPath);
+        if (pathNode) {
+            pathNode.addEventListener('input', function () {
+                state.pathDraft = pathNode.value;
+                renderList();
+            });
+            pathNode.addEventListener('keydown', function (event) {
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                    loadDirectory(pathNode.value);
                 }
             });
         }
 
-        if (refreshBtn) {
-            refreshBtn.addEventListener('click', function () {
-                loadDirectory(state.currentPath || state.containerPath || '/');
+        if (visitBtn) {
+            visitBtn.addEventListener('click', function () {
+                loadDirectory(state.pathDraft || state.currentPath || state.containerPath || '/');
+            });
+        }
+
+        if (mkdirBtn) {
+            mkdirBtn.addEventListener('click', function () {
+                createDirectory().catch(function (e) {
+                    onError(e && e.message ? e.message : '创建目录失败');
+                });
+            });
+        }
+
+        if (saveBtn) {
+            saveBtn.addEventListener('click', function () {
+                saveCurrentFile().catch(function (e) {
+                    onError(e && e.message ? e.message : '保存文件失败');
+                });
             });
         }