Greasy Fork is available in English.
The main user interface for the TriX Executor, with multi-engine Python support.
当前为
此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.greasyfork.icu/scripts/541462/1622861/TriX%20UI%20Library.js
// ==UserScript==
// @name TriX UI Library
// @namespace https://github.com/YourUsername/TriX-Executor
// @version 4.1.0
// @description The main user interface for the TriX Executor, with multi-engine Python support.
// @author You
// @license MIT
// ==/UserScript==
const TriX_UI=(function(){"use strict";let _GM;const UI={isMinimized:!1,currentScriptName:"",init(gmFunctions){_GM=gmFunctions,this.injectCSS(),this.injectHTML(),this.attachEventListeners(),TriX_Core.ScriptManager.populateScriptList(),this.updateTabCountUI(1),this.log("TriX UI Library v4.1.0 initialized."),this.showTab("js"),"undefined"!=typeof TriX_Addons&&TriX_Addons.init(_GM)},updateTabCountUI(e){const t=document.getElementById("trix-open-btn-badge"),i=document.getElementById("trix-header-tab-counter");t&&(t.textContent=e),i&&(i.textContent=e)},
injectCSS:function(){/* ... existing CSS ... */ _GM.GM_addStyle(`#python-engine-selector{background-color:var(--trix-bg-tertiary);border:1px solid var(--trix-border-color);color:var(--trix-text-primary);padding:4px 8px;border-radius:5px;margin-left:auto;}`)},
injectHTML:function(){
const e=`
<div id="trix-container" class="hidden">
<div id="trix-header"><!-- ... header ... --></div>
<div id="trix-body">
<div id="trix-left-panel"><!-- ... left panel ... --></div>
<div id="trix-right-panel">
<div id="trix-editor-tabs">
<button class="trix-editor-tab-btn" data-tab="js">JavaScript</button>
<button class="trix-editor-tab-btn" data-tab="python">Python</button>
</div>
<div id="js-pane" class="trix-editor-pane"><!-- ... js pane ... --></div>
<div id="python-pane" class="trix-editor-pane">
<div style="padding: 5px 10px; display:flex; gap:10px; align-items:center; background:var(--trix-bg-primary);">
<label for="trix-python-packages" style="font-size:12px;color:var(--trix-text-secondary);">Packages:</label>
<input type="text" id="trix-python-packages" class="trix-python-deps" placeholder="numpy, pandas (Pyodide only)">
<select id="python-engine-selector">
<option value="skulpt">Engine: Skulpt (Fast)</option>
<option value="pyodide">Engine: Pyodide (Powerful)</option>
<option value="pyscript">Engine: PyScript (Modern)</option>
</select>
</div>
<!-- PyScript needs these tags present in the DOM -->
<py-config id="trix-py-config" style="display:none;"></py-config>
<py-script id="trix-py-script-target" style="display:none;"></py-script>
<textarea id="trix-python-editor" class="trix-editor" placeholder="-- Select your Python engine and start coding! --"></textarea>
</div>
<div id="trix-console"></div>
</div>
</div>
<div id="trix-footer"><!-- ... footer ... --></div>
</div>
<button id="trix-open-btn"><span>Open TriX</span><span id="trix-open-btn-badge" class="trix-tab-badge">1</span></button>`;
document.body.insertAdjacentHTML("beforeend",e)
},
attachEventListeners:function(){
// ... all previous listeners ...
document.getElementById("trix-execute-btn").addEventListener("click",()=>{
const activeTab = document.querySelector(".trix-editor-tab-btn.active").dataset.tab;
if (activeTab === "js") {
TriX_Core.Executor.executeJS(document.getElementById("trix-editor").value);
} else if (activeTab === "python") {
this.runPython();
}
});
document.getElementById('python-engine-selector').addEventListener('change', (e) => this.handleEngineChange(e.target.value));
},
runPython() {
const engine = document.getElementById('python-engine-selector').value;
const code = document.getElementById('trix-python-editor').value;
const packages = document.getElementById('trix-python-packages').value;
switch(engine) {
case 'pyodide': TriX_Core.PythonRunners.runPyodide(code, packages); break;
case 'pyscript': TriX_Core.PythonRunners.runPyScript(code, packages); break;
case 'skulpt': default: TriX_Core.PythonRunners.runSkulpt(code); break;
}
},
handleEngineChange(engine) {
const pkgInput = document.getElementById('trix-python-packages');
if (engine === 'skulpt') {
pkgInput.disabled = true;
pkgInput.placeholder = 'N/A for Skulpt';
this.setPythonStatus('ready', 'Skulpt');
} else {
pkgInput.disabled = false;
pkgInput.placeholder = 'e.g., numpy, pandas';
if(engine === 'pyodide' && !TriX_Core.PythonRunners.pyodide) TriX_Core.PythonRunners.initPyodide();
if(engine === 'pyscript' && !TriX_Core.PythonRunners.pyscriptReady) TriX_Core.PythonRunners.initPyScript();
}
},
setPythonStatus(status, engine = 'Skulpt') {
// ... updated to handle status text for each engine ...
},
// ... all other UI methods ...
}; return UI; })();