666

src/views/DebugView.vue

@@ -0,0 +1,123 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import { CodeEditor } from "monaco-editor-vue3";
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+
+const DEFAULT_JS = `__native.log("info", "debug.run", { note: "编辑器内脚本" });
+return { ok: true, echo: params };
+`;
+
+const editorCode = ref(DEFAULT_JS);
+const running = ref(false);
+const resultText = ref("");
+const eventLog = ref("");
+
+let unlisten = null;
+
+onMounted(async () => {
+  try {
+    unlisten = await listen("quickjs:event", (e) => {
+      const line =
+        typeof e.payload === "object"
+          ? JSON.stringify(e.payload)
+          : String(e.payload);
+      eventLog.value += `${line}\n`;
+    });
+  } catch {
+    /* 非 Tauri WebView */
+  }
+});
+
+onUnmounted(() => {
+  if (typeof unlisten === "function") {
+    unlisten();
+  }
+});
+
+async function executeScript() {
+  running.value = true;
+  resultText.value = "";
+  try {
+    const out = await invoke("run_quickjs_script_source", {
+      scriptSource: editorCode.value,
+      params: {},
+    });
+    resultText.value = JSON.stringify(out, null, 2);
+  } catch (err) {
+    resultText.value = String(err);
+  } finally {
+    running.value = false;
+  }
+}
+
+function clearEventLog() {
+  eventLog.value = "";
+}
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col gap-4 p-6">
+    <div>
+      <h1 class="gradient-text text-xl font-semibold">调试 · QuickJS</h1>
+      <p class="mt-1 text-sm text-text-muted">
+        源码按<strong class="text-text-secondary">异步函数体</strong>执行，可使用变量
+        <code class="rounded bg-white/10 px-1 py-0.5 font-mono text-xs">params</code>、
+        <code class="rounded bg-white/10 px-1 py-0.5 font-mono text-xs">await</code>、
+        <code class="rounded bg-white/10 px-1 py-0.5 font-mono text-xs">return</code>
+        及全局
+        <code class="rounded bg-white/10 px-1 py-0.5 font-mono text-xs">__native</code>。
+      </p>
+    </div>
+
+    <div class="flex shrink-0 flex-wrap items-center gap-2">
+      <Button label="执行" :loading="running" :disabled="running" @click="executeScript" />
+      <Button
+        label="清空事件日志"
+        severity="secondary"
+        outlined
+        size="small"
+        @click="clearEventLog"
+      />
+    </div>
+
+    <div
+      class="min-h-[280px] flex-1 overflow-hidden rounded-lg border border-white/10 bg-[#1e1e1e]"
+      style="height: min(58vh, 520px)"
+    >
+      <CodeEditor
+        v-model:value="editorCode"
+        language="javascript"
+        theme="vs-dark"
+        width="100%"
+        height="100%"
+        :options="{
+          automaticLayout: true,
+          minimap: { enabled: true },
+          fontSize: 13,
+          scrollBeyondLastLine: false,
+          tabSize: 2,
+        }"
+      />
+    </div>
+
+    <div class="grid min-h-0 shrink-0 gap-3 md:grid-cols-2">
+      <div class="flex min-h-[140px] flex-col rounded-lg border border-white/10 bg-bg-deep/80">
+        <div class="border-b border-white/10 px-3 py-2 text-xs font-medium text-text-muted">返回值</div>
+        <pre
+          class="min-h-[120px] flex-1 overflow-auto p-3 font-mono text-xs text-emerald-200/90 whitespace-pre-wrap"
+          >{{ resultText || "（尚无）" }}</pre
+        >
+      </div>
+      <div class="flex min-h-[140px] flex-col rounded-lg border border-white/10 bg-bg-deep/80">
+        <div class="border-b border-white/10 px-3 py-2 text-xs font-medium text-text-muted">
+          quickjs:event
+        </div>
+        <pre
+          class="min-h-[120px] flex-1 overflow-auto p-3 font-mono text-[11px] text-text-muted whitespace-pre-wrap"
+          >{{ eventLog || "（尚无）" }}</pre
+        >
+      </div>
+    </div>
+  </div>
+</template>