feat(board): python_pyodide下添加 Teachable Machine (待完善)

boards/default_src/python_pyodide/language/en.js

@@ -1,5 +1,6 @@
 export const EnMsg = {
     'PYTHON_PYODIDE_IMAGE': 'Image',
+    'PYTHON_PYODIDE_TOOL': 'Teachable Machine',
     'PYTHON_PYODIDE_LOADING': 'Python3 kernel loading...',
     'PYTHON_PYODIDE_FILE_SYSTEM': 'Local File System',
     'PYTHON_PYODIDE_LOAD_FILE_SYSTEM': 'Load Local Folder'

boards/default_src/python_pyodide/language/zh-hans.js

@@ -1,5 +1,6 @@
 export const ZhHansMsg = {
     'PYTHON_PYODIDE_IMAGE': '图像',
+    'PYTHON_PYODIDE_TOOL': 'Teachable Machine',
     'PYTHON_PYODIDE_LOADING': 'Python3内核载入中...',
     'PYTHON_PYODIDE_FILE_SYSTEM': '本地文件系统',
     'PYTHON_PYODIDE_LOAD_FILE_SYSTEM': '载入本地文件夹'

boards/default_src/python_pyodide/language/zh-hant.js

@@ -1,5 +1,6 @@
 export const ZhHantMsg = {
     'PYTHON_PYODIDE_IMAGE': '影像',
+    'PYTHON_PYODIDE_TOOL': 'Teachable Machine',
     'PYTHON_PYODIDE_LOADING': 'Python3核心載入...',
     'PYTHON_PYODIDE_FILE_SYSTEM': '本機檔案系統',
     'PYTHON_PYODIDE_LOAD_FILE_SYSTEM': '載入本機資料夾'

boards/default_src/python_pyodide/others/python-shell.js

@@ -13,6 +13,7 @@ import {
 import { KernelLoader } from '@basthon/kernel-loader';
 import StatusBarImage from './statusbar-image';
 import StatusBarFileSystem from './statusbar-filesystem';
+import StatusBarTool from './statusbar-tool';
 import LOADER_TEMPLATE from '../templates/html/loader.html';
 
 
@@ -55,6 +56,7 @@ export default class PythonShell {
             this.kernel = kernel;
             this.statusBarImage = StatusBarImage.init();
             this.statusBarFileSystem = StatusBarFileSystem.init();
+            this.statusBarTool = StatusBarTool.init();
             this.pythonShell = new PythonShell();
             this.pyodide = window.pyodide;
             this.interruptBuffer = new Uint8Array(new ArrayBuffer(1));

boards/default_src/python_pyodide/others/statusbar-tool.js

@@ -0,0 +1,51 @@
+import $ from 'jquery';
+import { Msg } from 'blockly/core';
+import {
+    PageBase,
+    HTMLTemplate,
+    StatusBarsManager,
+    Workspace
+} from 'mixly';
+import '../language/loader';
+import STATUS_BAR_TOOL_TEMPLATE from '../templates/html/statusbar-tool.html';
+
+
+export default class StatusBarTool extends PageBase {
+    static {
+        HTMLTemplate.add(
+            'html/statusbar/statusbar-tool.html',
+            new HTMLTemplate(STATUS_BAR_TOOL_TEMPLATE)
+        );
+
+        this.init = function () {
+            StatusBarsManager.typesRegistry.register(['tool'], StatusBarTool);
+            const mainWorkspace = Workspace.getMain();
+            const statusBarsManager = mainWorkspace.getStatusBarsManager();
+            statusBarsManager.add({
+                type: 'tool',
+                id: 'tool',
+                name: Msg.PYTHON_PYODIDE_TOOL,
+                title: Msg.PYTHON_PYODIDE_TOOL
+            });
+            statusBarsManager.changeTo('output');
+            return statusBarsManager.get('tool');
+        }
+    }
+
+    constructor() {
+        super();
+        const $content = $(HTMLTemplate.get('html/statusbar/statusbar-tool.html').render());
+        this.setContent($content);
+    }
+
+    init() {
+        super.init();
+        this.hideCloseBtn();
+    }
+
+    onMounted() { }
+
+    onUnmounted() { }
+
+    resize() { }
+}

boards/default_src/python_pyodide/templates/html/statusbar-tool.html

@@ -0,0 +1,27 @@
+<style>
+    div[m-id="{{d.mId}}"] {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        align-content: center;
+        overflow: auto;
+    }
+
+    div[m-id="{{d.mId}}"] > text {
+        font-family: 'ravie';
+        font-size: 60px;
+    }
+
+    html[data-bs-theme=light] div[m-id="{{d.mId}}"] {
+        background-color: #ffffff;
+    }
+
+    html[data-bs-theme=dark] div[m-id="{{d.mId}}"] {
+        background-color: #1e1e1e;
+    }
+</style>
+<div m-id="{{d.mId}}" class="page-item">
+    <text>Teachable Machine</text>
+</div>