From 8dbd1370dbb83042b475889ce7209e927c32616b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E7=AB=8B=E5=B8=AE?= <3294713004@qq.com>
Date: Thu, 18 Sep 2025 16:30:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(board):=20python=5Fpyodide=E4=B8=8B?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20`Teachable=20Machine`=20(=E5=BE=85?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../default_src/python_pyodide/language/en.js |  1 +
 .../python_pyodide/language/zh-hans.js        |  1 +
 .../python_pyodide/language/zh-hant.js        |  1 +
 .../python_pyodide/others/python-shell.js     |  2 +
 .../python_pyodide/others/statusbar-tool.js   | 51 +++++++++++++++++++
 .../templates/html/statusbar-tool.html        | 27 ++++++++++
 6 files changed, 83 insertions(+)
 create mode 100644 boards/default_src/python_pyodide/others/statusbar-tool.js
 create mode 100644 boards/default_src/python_pyodide/templates/html/statusbar-tool.html

diff --git a/boards/default_src/python_pyodide/language/en.js b/boards/default_src/python_pyodide/language/en.js
index c2be410d..b54514c5 100644
--- a/boards/default_src/python_pyodide/language/en.js
+++ b/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'
diff --git a/boards/default_src/python_pyodide/language/zh-hans.js b/boards/default_src/python_pyodide/language/zh-hans.js
index 7d2417e1..60f813b7 100644
--- a/boards/default_src/python_pyodide/language/zh-hans.js
+++ b/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': '载入本地文件夹'
diff --git a/boards/default_src/python_pyodide/language/zh-hant.js b/boards/default_src/python_pyodide/language/zh-hant.js
index cb13c2e5..918fb4ef 100644
--- a/boards/default_src/python_pyodide/language/zh-hant.js
+++ b/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': '載入本機資料夾'
diff --git a/boards/default_src/python_pyodide/others/python-shell.js b/boards/default_src/python_pyodide/others/python-shell.js
index 809cd266..9dddb17a 100644
--- a/boards/default_src/python_pyodide/others/python-shell.js
+++ b/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));
diff --git a/boards/default_src/python_pyodide/others/statusbar-tool.js b/boards/default_src/python_pyodide/others/statusbar-tool.js
new file mode 100644
index 00000000..cfde24a2
--- /dev/null
+++ b/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() { }
+}
\ No newline at end of file
diff --git a/boards/default_src/python_pyodide/templates/html/statusbar-tool.html b/boards/default_src/python_pyodide/templates/html/statusbar-tool.html
new file mode 100644
index 00000000..4edf6951
--- /dev/null
+++ b/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>
\ No newline at end of file