update

src/components/Editors.vue

@@ -67,7 +67,11 @@
       </n-flex>
     </n-tab-pane>
     <template #suffix>
-      <Corner @format="format" />
+      <Toolbar
+        :submit-loading="submitLoading"
+        @format="format"
+        @submit="formatAndSubmit"
+      />
     </template>
   </n-tabs>
 </template>
@@ -79,12 +83,16 @@ import * as cssParser from "prettier/parser-postcss"
 import * as babelParser from "prettier/parser-babel"
 import * as estreeParser from "prettier/plugins/estree"
 import Editor from "./Editor.vue"
-import Corner from "./Corner.vue"
+import Toolbar from "./Toolbar.vue"
 import { html, css, js, tab, size, reset } from "../store/editors"
-import { NCode, useDialog } from "naive-ui"
-import { h } from "vue"
+import { taskId } from "../store/task"
+import { Submission } from "../api"
+import { NCode, useDialog, useMessage } from "naive-ui"
+import { h, ref } from "vue"
 
 const dialog = useDialog()
+const message = useMessage()
+const submitLoading = ref(false)
 
 function changeTab(name: string) {
   tab.value = name
@@ -94,30 +102,34 @@ function changeSize(num: number) {
   size.value = num
 }
 
+async function formatCode() {
+  const [htmlFormatted, cssFormatted, jsFormatted] = await Promise.all([
+    prettier.format(html.value, {
+      parser: "html",
+      //@ts-ignore
+      plugins: [htmlParser, babelParser, estreeParser, cssParser],
+      tabWidth: 4,
+    }),
+    prettier.format(css.value, {
+      parser: "css",
+      plugins: [cssParser],
+      tabWidth: 4,
+    }),
+    prettier.format(js.value, {
+      parser: "babel",
+      //@ts-ignore
+      plugins: [babelParser, estreeParser],
+      tabWidth: 2,
+    }),
+  ])
+  html.value = htmlFormatted
+  css.value = cssFormatted
+  js.value = jsFormatted
+}
+
 async function format() {
   try {
-    const [htmlFormatted, cssFormatted, jsFormatted] = await Promise.all([
-      prettier.format(html.value, {
-        parser: "html",
-        //@ts-ignore
-        plugins: [htmlParser, babelParser, estreeParser, cssParser],
-        tabWidth: 4,
-      }),
-      prettier.format(css.value, {
-        parser: "css",
-        plugins: [cssParser],
-        tabWidth: 4,
-      }),
-      prettier.format(js.value, {
-        parser: "babel",
-        //@ts-ignore
-        plugins: [babelParser, estreeParser],
-        tabWidth: 2,
-      }),
-    ])
-    html.value = htmlFormatted
-    css.value = cssFormatted
-    js.value = jsFormatted
+    await formatCode()
   } catch (err: any) {
     dialog.error({
       title: "格式化失败",
@@ -126,6 +138,40 @@ async function format() {
     })
   }
 }
+
+async function doSubmit() {
+  try {
+    await Submission.create(taskId.value, {
+      html: html.value,
+      css: css.value,
+      js: js.value,
+    })
+    message.success("提交成功")
+  } catch (err) {
+    message.error("提交失败")
+  }
+}
+
+async function formatAndSubmit() {
+  submitLoading.value = true
+  try {
+    await formatCode()
+    await doSubmit()
+  } catch (err: any) {
+    dialog.warning({
+      title: "代码整理失败",
+      content: () => h(NCode, { code: err.message }),
+      positiveText: "忽略并提交",
+      negativeText: "取消",
+      style: { width: "auto" },
+      onPositiveClick: async () => {
+        await doSubmit()
+      },
+    })
+  } finally {
+    submitLoading.value = false
+  }
+}
 </script>
 <style scoped>
 .pane {