Update: Python Online板卡下支持挂载本地文件夹到pyodide

2024-11-26 23:09:41 +08:00
parent 5411a188f7
commit b984af1998
18 changed files with 660 additions and 84 deletions
--- a/boards/default/python_pyodide/main.bundle.js
+++ b/boards/default/python_pyodide/main.bundle.js
--- a/boards/default_src/python_pyodide/language/en.js
+++ b/boards/default_src/python_pyodide/language/en.js
@@ -1,6 +1,8 @@
 export const EnMsg = {
    'PYTHON_PYODIDE_IMAGE': 'Image',
-    'PYTHON_PYODIDE_LOADING': 'Python3 kernel loading...'
+    'PYTHON_PYODIDE_LOADING': 'Python3 kernel loading...',
+    'PYTHON_PYODIDE_FILE_SYSTEM': 'Local File System',
+    'PYTHON_PYODIDE_LOAD_FILE_SYSTEM': 'Load Local Folder'
 };

 export const EnCatgories = {};
--- a/boards/default_src/python_pyodide/language/zh-hans.js
+++ b/boards/default_src/python_pyodide/language/zh-hans.js
@@ -1,6 +1,8 @@
 export const ZhHansMsg = {
    'PYTHON_PYODIDE_IMAGE': '图像',
-    'PYTHON_PYODIDE_LOADING': 'Python3内核载入中...'
+    'PYTHON_PYODIDE_LOADING': 'Python3内核载入中...',
+    'PYTHON_PYODIDE_FILE_SYSTEM': '本地文件系统',
+    'PYTHON_PYODIDE_LOAD_FILE_SYSTEM': '载入本地文件夹'
 };

 export const ZhHansCatgories = {};
--- a/boards/default_src/python_pyodide/language/zh-hant.js
+++ b/boards/default_src/python_pyodide/language/zh-hant.js
@@ -1,6 +1,8 @@
 export const ZhHantMsg = {
    'PYTHON_PYODIDE_IMAGE': '影像',
-    'PYTHON_PYODIDE_LOADING': 'Python3核心載入...'
+    'PYTHON_PYODIDE_LOADING': 'Python3核心載入...',
+    'PYTHON_PYODIDE_FILE_SYSTEM': '本機檔案系統',
+    'PYTHON_PYODIDE_LOAD_FILE_SYSTEM': '載入本機資料夾'
 };

 export const ZhHantCatgories = {};
--- a/boards/default_src/python_pyodide/others/loader.js
+++ b/boards/default_src/python_pyodide/others/loader.js
@@ -1,3 +1,3 @@
 import NavExt from './nav-ext';

-await NavExt.init();
+NavExt.init();
--- a/boards/default_src/python_pyodide/others/nav-ext.js
+++ b/boards/default_src/python_pyodide/others/nav-ext.js
@@ -1,4 +1,4 @@
-import { app, Nav } from 'mixly';
+import { app, Nav, Debug } from 'mixly';
 import * as Blockly from 'blockly/core';
 import PythonShell from './python-shell';

@@ -16,7 +16,7 @@ NavExt.init = async function () {
            return true;
        },
        callback: () => {
-            PythonShell.run();
+            PythonShell.run().catch(Debug.error);
        },
        scopeType: Nav.Scope.LEFT,
        weight: 4
@@ -31,7 +31,7 @@ NavExt.init = async function () {
            return true;
        },
        callback: () => {
-            PythonShell.stop();
+            PythonShell.stop().catch(Debug.error);
        },
        scopeType: Nav.Scope.LEFT,
        weight: 5
--- a/boards/default_src/python_pyodide/others/python-shell.js
+++ b/boards/default_src/python_pyodide/others/python-shell.js
@@ -3,17 +3,19 @@ import * as path from 'path';
 import $ from 'jquery';
 import {
    Workspace,
-    Debug,
    Env,
    Msg,
    HTMLTemplate,
+    Debug,
    app
 } from 'mixly';
 import { KernelLoader } from '@basthon/kernel-loader';
 import StatusBarImage from './statusbar-image';
+import StatusBarFileSystem from './statusbar-filesystem';
 import LOADER_TEMPLATE from '../templates/html/loader.html';

-class PythonShell {
+
+export default class PythonShell {
    static {
        HTMLTemplate.add(
            'html/statusbar/loader.html',
@@ -27,13 +29,16 @@ class PythonShell {
                loading: Blockly.Msg.PYTHON_PYODIDE_LOADING
            }
        }));
+        this.statusBarImage = null;
+        this.statusBarFileSystem = null;

        this.init = async function () {
            const footerBar = app.getFooterBar();
            const $content = footerBar.getContent();
            $content.after(this.$loader);

-            StatusBarImage.init();
+            this.statusBarImage = StatusBarImage.init();
+            this.statusBarFileSystem = StatusBarFileSystem.init();
            const projectPath = path.relative(Env.indexDirPath, Env.boardDirPath);
            const loader = new KernelLoader({
                rootPath: path.join(projectPath, 'deps'),
@@ -58,14 +63,20 @@ class PythonShell {
            this.$loader = null;
        }

-        this.run = function () {
+        this.run = async function () {
+            if (!this.kernelLoaded) {
+                return;
+            }
            const mainWorkspace = Workspace.getMain();
            const editor = mainWorkspace.getEditorsManager().getActive();
            const code = editor.getCode();
            return this.pythonShell.run(code);
        }

-        this.stop = function () {
+        this.stop = async function () {
+            if (!this.kernelLoaded) {
+                return;
+            }
            return this.pythonShell.stop();
        }
    }
@@ -130,6 +141,7 @@ class PythonShell {
        this.#kernel_.addEventListener('eval.finished', () => {
            this.#running_ = false;
            this.#statusBarTerminal_.addValue(`\n==${Msg.Lang['shell.finish']}==`);
+            this.syncfs(false).catch(Debug.error);
        });

        this.#kernel_.addEventListener('eval.output', (data) => {
@@ -192,34 +204,26 @@ class PythonShell {
        editor.setReadOnly(true);
    }

-    run(code) {
-        if (!PythonShell.kernelLoaded) {
-            return;
+    async run(code) {
+        await this.stop();
+        await this.syncfs(true);
+        if (code.indexOf('import turtle') !== -1) {
+            code += '\nturtle.done()\n';
        }
-        this.stop()
-            .then(() => {
-                if (code.indexOf('import turtle') !== -1) {
-                    code += '\nturtle.done()\n';
-                }
-                if (code.indexOf('import matplotlib.pyplot') !== -1) {
-                    code += '\nplt.clf()\n';
-                }
-                this.#statusBarsManager_.changeTo('output');
-                this.#statusBarsManager_.show();
-                this.#statusBarTerminal_.setValue(`${Msg.Lang['shell.running']}...\n`);
-                this.#running_ = true;
-                this.#kernel_.dispatchEvent('eval.request', {
-                    code,
-                    interactive: false,
-                });
-            })
-            .catch(Debug.error);
+        if (code.indexOf('import matplotlib.pyplot') !== -1) {
+            code += '\nplt.clf()\n';
+        }
+        this.#statusBarsManager_.changeTo('output');
+        this.#statusBarsManager_.show();
+        this.#statusBarTerminal_.setValue(`${Msg.Lang['shell.running']}...\n`);
+        this.#running_ = true;
+        this.#kernel_.dispatchEvent('eval.request', {
+            code,
+            interactive: false,
+        });
    }

    async stop() {
-        if (!PythonShell.kernelLoaded) {
-            return;
-        }
        if (this.#waittingForInput_) {
            this.#exitInput_();
        }
@@ -239,9 +243,13 @@ class PythonShell {
        }
    }

+    async syncfs(populate = false) {
+        return new Promise((resolve) => {
+            window.pyodide.FS.syncfs(populate, resolve);
+        });
+    }
+
    sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
-}
-
-export default PythonShell;
+}
--- a/boards/default_src/python_pyodide/others/statusbar-filesystem.js
+++ b/boards/default_src/python_pyodide/others/statusbar-filesystem.js
@@ -0,0 +1,453 @@
+import * as Blockly from 'blockly/core';
+import { layer } from 'layui';
+import * as path from 'path';
+import $ from 'jquery';
+import {
+    PageBase,
+    Msg,
+    HTMLTemplate,
+    DragV,
+    StatusBar,
+    ContextMenu,
+    Debug,
+    StatusBarsManager,
+    Workspace,
+    Web
+} from 'mixly';
+import FILE_SYSTEM_TEMPLATE from '../templates/html/statusbar-filesystem.html';
+import FILE_SYSTEM_OPEN_FS_TEMPLATE from '../templates/html/statusbar-filesystem-open-fs.html';
+import FILE_SYSTEM_EDITOR_EMPTY_TEMPLATE from '../templates/html/statusbar-filesystem-editor-empty.html';
+
+const { FileTree } = Web;
+
+
+export default class StatusBarFileSystem extends PageBase {
+    static {
+        HTMLTemplate.add(
+            'html/statusbar/statusbar-filesystem.html',
+            new HTMLTemplate(FILE_SYSTEM_TEMPLATE)
+        );
+
+        HTMLTemplate.add(
+            'html/statusbar/statusbar-filesystem-open-fs.html',
+            new HTMLTemplate(FILE_SYSTEM_OPEN_FS_TEMPLATE)
+        );
+
+        HTMLTemplate.add(
+            'html/statusbar/statusbar-filesystem-editor-empty.html',
+            new HTMLTemplate(FILE_SYSTEM_EDITOR_EMPTY_TEMPLATE)
+        );
+
+        this.init = function () {
+            StatusBarsManager.typesRegistry.register(['file-system'], StatusBarFileSystem);
+            const mainWorkspace = Workspace.getMain();
+            const statusBarsManager = mainWorkspace.getStatusBarsManager();
+            statusBarsManager.add('file-system', 'file-system', Blockly.Msg.PYTHON_PYODIDE_FILE_SYSTEM);
+            statusBarsManager.changeTo('output');
+            return statusBarsManager.get('file-system');
+        }
+    }
+
+    #$close_ = null;
+    #$fileTree_ = null;
+    #$editor_ = null;
+    #$openFS_ = null;
+    #$editorEmpty_ = null;
+    #editor_ = null;
+    #fileTree_ = null;
+    #drag_ = null;
+    #fileTreeShown_ = false;
+    #editorShown_ = false;
+    #changed_ = false;
+    #nativefs_ = null;
+
+    constructor() {
+        super();
+        const $content = $(HTMLTemplate.get('html/statusbar/statusbar-filesystem.html').render());
+        this.setContent($content);
+        this.#fileTree_ = new FileTree();
+        this.#$fileTree_ = $content.children('.file-tree');
+        this.#$openFS_ = $(HTMLTemplate.get('html/statusbar/statusbar-filesystem-open-fs.html').render({
+            msg: {
+                loadFS: Blockly.Msg.PYTHON_PYODIDE_LOAD_FILE_SYSTEM
+            }
+        }));
+        this.#$fileTree_.append(this.#$openFS_);
+        this.#editor_ = new StatusBar();
+        this.#$editor_ = $content.children('.editor');
+        this.#$editorEmpty_ = $(HTMLTemplate.get('html/statusbar/statusbar-filesystem-editor-empty.html').render());
+        this.#$editor_.append(this.#$editorEmpty_);
+    }
+
+    #addEventsListener_() {
+        this.#drag_ = new DragV(this.getContent()[0], {
+            min: '150px',
+            startSize: '15%',
+            full: [false, false]
+        });
+
+        this.#drag_.bind('sizeChanged', () => {
+            this.resize();
+        });
+
+        this.#$openFS_.children('button').click(() => {
+            this.openFS();
+        });
+
+        this.#fileTree_.bind('beforeSelectLeaf', (selected) => {
+            const filePath = selected[0].id;
+            const mode = this.#editor_.getFileMode(path.extname(filePath));
+            if (!mode) {
+                layer.msg(Msg.Lang['statusbar.ampy.cannotEdit'], { time: 1000 });
+                return false;
+            }
+            this.#editor_.setMode(mode);
+            return true;
+        });
+
+        this.#fileTree_.bind('afterSelectLeaf', async (selected) => {
+            const filePath = selected[0].id;
+            this.#fileTree_.showProgress();
+            const fs = this.#fileTree_.getFS();
+            const result = await fs.readFile(filePath);
+            this.showEditor();
+            this.#editor_.setValue(result);
+            this.#editor_.scrollToTop();
+            this.#editor_.focus();
+            this.setStatus(false);
+            this.#fileTree_.hideProgress();
+        });
+
+        this.#fileTree_.bind('afterCreateNode', (folderPath) => {
+            this.#fileTree_.refreshFolder(folderPath);
+        });
+
+        this.#fileTree_.bind('afterDeleteNode', (folderPath) => {
+            this.#fileTree_.refreshFolder(folderPath);
+        });
+
+        this.#fileTree_.bind('afterRenameNode', (folderPath) => {
+            this.#fileTree_.refreshFolder(folderPath);
+        });
+
+        this.#fileTree_.bind('afterRefreshNode', () => {
+            const selectedNodeId = this.#fileTree_.getSelectedNodeId();
+            if (!selectedNodeId) {
+                this.hideEditor();
+            }
+        });
+
+        const fileTreeContextMenu = this.#fileTree_.getContextMenu();
+        const fileTreeMenu = fileTreeContextMenu.getItem('menu');
+
+        fileTreeMenu.add({
+            weight: 14,
+            type: 'sep5',
+            preconditionFn: ($trigger) => {
+                const selectedNodeId = this.#fileTree_.getSelectedNodeId();
+                let type = $trigger.attr('type');
+                let id = $trigger.attr('id');
+                if (type === 'file' && selectedNodeId !== id) {
+                    return false;
+                }
+                return true;
+            },
+            data: '---------'
+        });
+
+        fileTreeMenu.add({
+            weight: 15,
+            type: 'refresh',
+            preconditionFn: ($trigger) => {
+                const selectedNodeId = this.#fileTree_.getSelectedNodeId();
+                let type = $trigger.attr('type');
+                let id = $trigger.attr('id');
+                if (type === 'file' && selectedNodeId !== id) {
+                    return false;
+                }
+                return true;
+            },
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['statusbar.ampy.refresh'], ''),
+                callback: (_, { $trigger }) => {
+                    let type = $trigger.attr('type');
+                    if (type === 'root') {
+                        this.#fileTree_.openRootFolder();
+                        this.#fileTree_.refreshFolder('/');
+                    } else if (type === 'folder') {
+                        let id = $trigger.attr('id');
+                        this.#fileTree_.openNode(id);
+                        this.#fileTree_.refreshFolder(id);
+                    } else {
+                        const nodes = this.#fileTree_.getSelectedNodes();
+                        this.#fileTree_.runEvent('afterSelectLeaf', nodes);
+                    }
+                }
+            }
+        });
+
+        fileTreeMenu.add({
+            weight: 16,
+            type: 'sep6',
+            preconditionFn: ($trigger) => {
+                let type = $trigger.attr('type');
+                return ['root'].includes(type);
+            },
+            data: '---------'
+        });
+
+        fileTreeMenu.add({
+            weight: 17,
+            type: 'exit',
+            preconditionFn: ($trigger) => {
+                let type = $trigger.attr('type');
+                return ['root'].includes(type);
+            },
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['statusbar.ampy.exit'], ''),
+                callback: () => {
+                    this.closeFS();
+                }
+            }
+        });
+
+        fileTreeMenu.remove('copy');
+        fileTreeMenu.remove('cut');
+        fileTreeMenu.remove('paste');
+        fileTreeMenu.remove('sep2');
+
+        const editorContextMenu = this.#editor_.getContextMenu();
+        const editorMenu = editorContextMenu.getItem('code');
+
+        editorMenu.empty();
+
+        editorMenu.add({
+            weight: 0,
+            type: 'cut',
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.cut'], 'Ctrl+X'),
+                callback: () => this.#editor_.cut()
+            }
+        });
+        editorMenu.add({
+            weight: 1,
+            type: 'copy',
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.copy'], 'Ctrl+C'),
+                callback: () => this.#editor_.copy()
+            }
+        });
+        editorMenu.add({
+            weight: 2,
+            type: 'paste',
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.paste'], 'Ctrl+V'),
+                callback: () => this.#editor_.paste()
+            }
+        });
+        editorMenu.add({
+            weight: 3,
+            type: 'sep1',
+            data: '---------'
+        });
+        editorMenu.add({
+            weight: 4,
+            type: 'togglecomment',
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.togglecomment'], 'Ctrl+/'),
+                callback: () => this.#editor_.commentLine()
+            }
+        });
+
+        editorMenu.add({
+            weight: 6,
+            type: 'sep2',
+            preconditionFn: () => {
+                return this.#changed_;
+            },
+            data: '---------'
+        });
+
+        editorMenu.add({
+            weight: 7,
+            type: 'save',
+            preconditionFn: () => {
+                return this.#changed_;
+            },
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['file.save'], 'Ctrl+S'),
+                callback: async () => {
+                    await this.put();
+                }
+            }
+        });
+
+        const { commands } = this.#editor_.getEditor();
+        commands.addCommand({
+            name: "save",
+            bindKey: "Ctrl-S",
+            exec: async () => {
+                if (!this.#changed_) {
+                    return;
+                }
+                await this.put();
+            }
+        });
+    }
+
+    async put() {
+        this.#fileTree_.showProgress();
+        const id = this.#fileTree_.getSelectedNodeId();
+        const fs = this.#fileTree_.getFS();
+        const [error,] = await fs.writeFile(id, this.#editor_.getValue());
+        this.#fileTree_.hideProgress();
+        if (!error) {
+            this.setStatus(false);
+        }
+    }
+
+    showFileTree() {
+        if (this.#fileTreeShown_) {
+            return;
+        }
+        this.#$openFS_.detach();
+        this.#$fileTree_.empty();
+        this.#$fileTree_.append(this.#fileTree_.getContent());
+        this.#fileTreeShown_ = true;
+    }
+
+    hideFileTree() {
+        if (!this.#fileTreeShown_) {
+            return;
+        }
+        this.#fileTree_.getContent().detach();
+        this.#$fileTree_.empty();
+        this.#$fileTree_.append(this.#$openFS_);
+        this.#fileTreeShown_ = false;
+    }
+
+    showEditor() {
+        if (this.#editorShown_) {
+            return;
+        }
+        this.#$editorEmpty_.detach();
+        this.#$editor_.empty();
+        this.#$editor_.append(this.#editor_.getContent());
+        this.#editorShown_ = true;
+    }
+
+    hideEditor() {
+        if (!this.#editorShown_) {
+            return;
+        }
+        this.#editor_.getContent().detach();
+        this.#$editor_.empty();
+        this.#$editor_.append(this.#$editorEmpty_);
+        this.#editorShown_ = false;
+        this.setStatus(false);
+    }
+
+    getDrag() {
+        return this.#drag_;
+    }
+
+    init() {
+        super.init();
+        this.hideCloseBtn();
+        this.#editor_.init();
+        this.#addEventsListener_();
+        const editor = this.#editor_.getEditor();
+        editor.setReadOnly(false);
+        editor.renderer.setShowGutter(true);
+        editor.setOptions({
+            enableBasicAutocompletion: true,
+            enableSnippets: true,
+            enableLiveAutocompletion: true,
+            newLineMode: 'unix'
+        });
+        editor.on('change', () => {
+            this.setStatus(true);
+        });
+    }
+
+    openFS() {
+        const fs = this.#fileTree_.getFS();
+        fs.showDirectoryPicker()
+            .then((directoryHandle) => {
+                if (!directoryHandle.name) {
+                    return;
+                }
+                this.#fileTree_.setFolderPath('/');
+                this.#fileTree_.setRootFolderName(directoryHandle.name);
+                this.#fileTree_.openRootFolder();
+                this.showFileTree();
+                return window.pyodide.mountNativeFS('/' + directoryHandle.name, directoryHandle);
+            })
+            .then((nativefs) => {
+                console.log(nativefs)
+                this.#nativefs_ = nativefs;
+            })
+            .catch(Debug.error);
+    }
+
+    closeFS() {
+        const rootPath = this.#fileTree_.getFolderPath();
+        const lookup = window.pyodide.FS.lookupPath(rootPath, {
+            follow_mount: false
+        });
+        if (window.pyodide.isMountpoint(lookup.node)) {
+            window.pyodide.FS.unmount(rootPath);
+        }
+        this.#fileTree_.deselectAll();
+        this.hideFileTree();
+        this.hideEditor();
+        this.setStatus(false);
+    }
+
+    onMounted() {
+        super.onMounted();
+        this.#editor_.onMounted();
+        this.#fileTree_.onMounted();
+        // this.#fileTree_.refreshFolder('/');
+    }
+
+    onUnmounted() {
+        // this.hideEditor();
+        // this.#fileTree_.deselectAll();
+        super.onUnmounted();
+        this.#editor_.onUnmounted();
+        this.#fileTree_.onUnmounted();
+    }
+
+    resize() {
+        super.resize();
+        this.#editor_.resize();
+        this.#fileTree_.resize();
+    }
+
+    setStatus(isChanged) {
+        if (this.#changed_ === isChanged || !this.#$close_) {
+            return;
+        }
+        this.#changed_ = isChanged;
+    }
+
+    getNativeFS() {
+        return this.#nativefs_;
+    }
+
+    dispose() {
+        this.#editor_.dispose();
+        this.#editor_ = null;
+        this.#fileTree_.dispose();
+        this.#fileTree_ = null;
+        super.dispose();
+    }
+}
--- a/boards/default_src/python_pyodide/others/statusbar-image.js
+++ b/boards/default_src/python_pyodide/others/statusbar-image.js
@@ -10,7 +10,7 @@ import '../language/loader';
 import STATUS_BAR_IMAGE_TEMPLATE from '../templates/html/statusbar-image.html';


-class StatusBarImage extends PageBase {
+export default class StatusBarImage extends PageBase {
    static {
        HTMLTemplate.add(
            'html/statusbar/statusbar-image.html',
@@ -23,6 +23,7 @@ class StatusBarImage extends PageBase {
            const statusBarsManager = mainWorkspace.getStatusBarsManager();
            statusBarsManager.add('images', 'images', Blockly.Msg.PYTHON_PYODIDE_IMAGE);
            statusBarsManager.changeTo('output');
+            return statusBarsManager.get('images');
        }
    }

@@ -164,6 +165,4 @@ class StatusBarImage extends PageBase {
                );
        }
    }
-}
-
-export default StatusBarImage;
+}
--- a/boards/default_src/python_pyodide/package-lock.json
+++ b/boards/default_src/python_pyodide/package-lock.json
@@ -9,7 +9,8 @@
            "version": "1.0.0",
            "license": "Apache 2.0",
            "dependencies": {
-                "@basthon/kernel-loader": "^0.62.21"
+                "@basthon/kernel-loader": "^0.62.21",
+                "idb-keyval": "^6.2.1"
            },
            "devDependencies": {
                "buffer": "^6.0.3",
@@ -432,6 +433,11 @@
                "minimalistic-crypto-utils": "^1.0.1"
            }
        },
+        "node_modules/idb-keyval": {
+            "version": "6.2.1",
+            "resolved": "https://registry.npmmirror.com/idb-keyval/-/idb-keyval-6.2.1.tgz",
+            "integrity": "sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg=="
+        },
        "node_modules/ieee754": {
            "version": "1.2.1",
            "resolved": "https://registry.npmmirror.com/ieee754/-/ieee754-1.2.1.tgz",
@@ -1111,6 +1117,11 @@
                "minimalistic-crypto-utils": "^1.0.1"
            }
        },
+        "idb-keyval": {
+            "version": "6.2.1",
+            "resolved": "https://registry.npmmirror.com/idb-keyval/-/idb-keyval-6.2.1.tgz",
+            "integrity": "sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg=="
+        },
        "ieee754": {
            "version": "1.2.1",
            "resolved": "https://registry.npmmirror.com/ieee754/-/ieee754-1.2.1.tgz",
--- a/boards/default_src/python_pyodide/package.json
+++ b/boards/default_src/python_pyodide/package.json
@@ -17,7 +17,8 @@
        "vm-browserify": "^1.1.2"
    },
    "dependencies": {
-        "@basthon/kernel-loader": "^0.62.21"
+        "@basthon/kernel-loader": "^0.62.21",
+        "idb-keyval": "^6.2.1"
    },
    "main": "./export.js",
    "author": "Mixly Team",
--- a/boards/default_src/python_pyodide/templates/html/statusbar-filesystem-editor-empty.html
+++ b/boards/default_src/python_pyodide/templates/html/statusbar-filesystem-editor-empty.html
@@ -0,0 +1,26 @@
+<style>
+    div[m-id="{{d.mId}}"] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    div[m-id="{{d.mId}}"] > div {
+        width: 150px;
+        height: 150px;
+    }
+
+    html[data-bs-theme=light] div[m-id="{{d.mId}}"] > div {
+        background: url('../common/css/svg/empty/empty-light.svg');
+        background-size: 100% auto;
+    }
+
+    html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > div {
+        background: url('../common/css/svg/empty/empty-dark.svg');
+        background-size: 100% auto;
+    }
+</style>
+<div m-id="{{d.mId}}" class="page-item">
+    <div></div>
+</div>
--- a/boards/default_src/python_pyodide/templates/html/statusbar-filesystem-open-fs.html
+++ b/boards/default_src/python_pyodide/templates/html/statusbar-filesystem-open-fs.html
@@ -0,0 +1,25 @@
+<style>
+    div[m-id="{{d.mId}}"] {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+    }
+
+    div[m-id="{{d.mId}}"] > button {
+        margin: 15px;
+        max-width: 200px;
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #fff !important;
+        height: 25px;
+        border-radius: 3px;
+    }
+</style>
+<div m-id="{{d.mId}}">
+    <button class="layui-btn layui-btn-xs m-btn self-adaption-btn">{{ d.msg.loadFS }}</button>
+</div>
--- a/boards/default_src/python_pyodide/templates/html/statusbar-filesystem.html
+++ b/boards/default_src/python_pyodide/templates/html/statusbar-filesystem.html
@@ -0,0 +1,31 @@
+<style>
+    div[m-id="{{d.mId}}"] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    div[m-id="{{d.mId}}"] > .file-tree {
+        width: 15%;
+        height: 100%;
+        border-right-width: 1px;
+        border-right-style: solid;
+    }
+
+    html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .file-tree {
+        border-right-color: #c9c9c9;
+    }
+
+    html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .file-tree {
+        border-right-color: rgba(128, 128, 128, 0.35);
+    }
+
+    div[m-id="{{d.mId}}"] > .editor {
+        width: 85%;
+        height: 100%;
+    }
+</style>
+<div m-id="{{d.mId}}" class="page-item">
+    <div class="file-tree"></div>
+    <div class="editor"></div>
+</div>
--- a/common/modules/mixly-modules/common/file-tree.js
+++ b/common/modules/mixly-modules/common/file-tree.js
@@ -56,6 +56,7 @@ class FileTree extends Component {
    #mprogress_ = null;
    #rootFolderOpened_ = false;
    #rootPath_ = '';
+    #rootName_ = '';
    #fs_ = null;
    #contextMenu_ = null;
    #selected_ = null;
@@ -483,9 +484,14 @@ class FileTree extends Component {
    }

    setRootFolderName(name) {
+        this.#rootName_ = name;
        this.#$name_.text(name);
    }

+    getRootFolderName() {
+        return this.#rootName_;
+    }
+
    refreshFolder(folderPath) {
        // 延迟刷新节点，防止过于频繁的IO操作
        let eventId = this.delayRefreshRegistry.getItem(folderPath);
--- a/common/modules/mixly-modules/web/file-tree.js
+++ b/common/modules/mixly-modules/web/file-tree.js
@@ -9,8 +9,8 @@ const { FileTree, Web } = Mixly;
 const { FS } = Web;

 class FileTreeExt extends FileTree {
-    constructor(element, mprogress) {
-        super(element, mprogress, FS);
+    constructor() {
+        super(FS);
    }

    async readFolder(inPath) {
--- a/common/modules/mixly-modules/web/fs.js
+++ b/common/modules/mixly-modules/web/fs.js
@@ -20,20 +20,13 @@ FS.showOpenFilePicker = async () => {
 }

 FS.showDirectoryPicker = async () => {
-    return new Promise((resolve, reject) => {
-        window.showDirectoryPicker({
-            mode: 'readwrite'
-        })
-        .then((filesystem) => {
-            return FS.pool.exec('addFileSystemHandler', [filesystem]);
-        })
-        .then((folderPath) => {
-            resolve(folderPath);
-        })
-        .catch((error) => {
-            reject(error);
-        });
-    });
+    const directoryHandle = await window.showDirectoryPicker({ mode: 'readwrite' });
+    const permissionStatus = await directoryHandle.requestPermission({ mode: 'readwrite' });
+    if (permissionStatus !== 'granted') {
+        throw new Error('readwrite access to directory not granted');
+    }
+    await FS.pool.exec('addFileSystemHandler', [directoryHandle]);
+    return directoryHandle;
 }

 FS.showSaveFilePicker = async () => {
@@ -75,6 +68,43 @@ FS.isFile = (path) => {
    });
 }

+FS.renameFile = (oldFilePath, newFilePath) => {
+    return new Promise(async (resolve, reject) => {
+        const [error] = await FS.pool.exec('rename', [oldFilePath, newFilePath]);
+        if (error) {
+            reject(error);
+        } else {
+            resolve();
+        }
+    });
+}
+
+FS.moveFile = (oldFilePath, newFilePath) => {
+    return FS.renameFile(oldFilePath, newFilePath);
+}
+
+FS.deleteFile = (filePath) => {
+    return new Promise(async (resolve, reject) => {
+        const [error] = await FS.pool.exec('unlink', [filePath]);
+        if (error) {
+            reject(error);
+        } else {
+            resolve();
+        }
+    });
+}
+
+FS.createDirectory = (folderPath) => {
+    return new Promise(async (resolve, reject) => {
+        const [error] = await FS.pool.exec('mkdir', [folderPath, 0o777]);
+        if (error) {
+            reject(error);
+        } else {
+            resolve();
+        }
+    });
+}
+
 FS.readDirectory = (path) => {
    return new Promise(async (resolve, reject) => {
        const [error, entries] = await FS.pool.exec('readdir', [path]);
--- a/common/modules/mixly-modules/workers/web/file-system-access.js
+++ b/common/modules/mixly-modules/workers/web/file-system-access.js
@@ -22,7 +22,7 @@ const addFileSystemHandler = function(filesystem) {
                return;
            }
            fs = BrowserFS.fs;
-            resolve('/' + filesystem.name);
+            resolve();
        });
    });
 }