feat: add format code button to editor toolbar

src/desktop/CodeSection.vue

@@ -4,7 +4,7 @@ import copyTextToClipboard from "copy-text-to-clipboard"
 import { useMessage } from "naive-ui"
 import CodeEditor from "../components/CodeEditor.vue"
 import DebugPanel from "../components/DebugPanel.vue"
-import { code, input, reset, size } from "../composables/code"
+import { code, format, input, reset, size } from "../composables/code"
 import { debug } from "../api"
 
 const message = useMessage()
@@ -22,6 +22,17 @@ function copy() {
   message.success("已经复制好了")
 }
 
+async function handleFormat() {
+  try {
+    await format()
+    message.success("代码已整理")
+  } catch (err: any) {
+    message.error(
+      `整理失败: ${err?.response?.data?.detail ?? err?.message ?? "未知错误"}`,
+    )
+  }
+}
+
 /**
  * trace 末尾停在 raw_input 即说明输入不足
  * （pg_logger 在缺输入时会立刻 done=True，trace 中至多只有 1 个 raw_input 事件，
@@ -67,6 +78,7 @@ async function handleDebug() {
   >
     <template #actions>
       <n-button quaternary type="primary" @click="copy">复制</n-button>
+      <n-button quaternary @click="handleFormat">整理代码</n-button>
       <n-button quaternary @click="reset">清空</n-button>
       <n-button
         v-if="code.language === 'python'"