添加代码格式化

src/components/Corner.vue

@@ -4,12 +4,7 @@
       打开{{ TASK_LABEL[taskTab] }}
     </n-button>
     <template v-if="user.loaded && authed">
-      <n-button
-        quaternary
-        @click="$router.push({ name: 'submissions', params: { page: 1 } })"
-      >
-        所有提交
-      </n-button>
+      <n-button quaternary @click="emit('format')">整理</n-button>
       <n-button
         type="primary"
         secondary
@@ -17,7 +12,7 @@
         :loading="submitLoading"
         @click="submit"
       >
-        提交代码
+        提交
       </n-button>
       <n-dropdown :options="menu" @select="clickMenu">
         <n-button>{{ user.username }}</n-button>
@@ -48,6 +43,7 @@ import { router } from "../router"
 import { ADMIN_URL, TASK_LABEL } from "../utils/const"
 
 const message = useMessage()
+const emit = defineEmits(["format"])
 
 const submitLoading = ref(false)
 

src/components/Editors.vue

@@ -67,15 +67,24 @@
       </n-flex>
     </n-tab-pane>
     <template #suffix>
-      <Corner />
+      <Corner @format="format" />
     </template>
   </n-tabs>
 </template>
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
+import prettier from "prettier/standalone"
+import * as htmlParser from "prettier/parser-html"
+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 { html, css, js, tab, size, reset } from "../store/editors"
+import { NCode, useDialog } from "naive-ui"
+import { h } from "vue"
+
+const dialog = useDialog()
 
 function changeTab(name: string) {
   tab.value = name
@@ -84,6 +93,39 @@ function changeTab(name: string) {
 function changeSize(num: number) {
   size.value = num
 }
+
+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
+  } catch (err: any) {
+    dialog.error({
+      title: "格式化失败",
+      content: () => h(NCode, { code: err.message }),
+      style: { width: "auto" },
+    })
+  }
+}
 </script>
 <style scoped>
 .pane {

src/components/Task.vue

@@ -11,7 +11,7 @@
           :width="20"
         ></Icon>
         <n-tabs
-          style="width: 140px"
+          style="width: 210px"
           type="segment"
           animated
           :value="taskTab"
@@ -19,6 +19,11 @@
         >
           <n-tab name="tutorial" tab="教程"></n-tab>
           <n-tab name="challenge" tab="挑战"></n-tab>
+          <n-tab
+            name="list"
+            tab="列表"
+            @click="$router.push({ name: 'submissions', params: { page: 1 } })"
+          ></n-tab>
         </n-tabs>
         <template v-if="!hideNav">
           <n-button text @click="prev" :disabled="prevDisabled">
@@ -60,7 +65,7 @@ import { taskId, taskTab } from "../store/task"
 import { useRoute, useRouter } from "vue-router"
 import { TASK_TYPE } from "../utils/const"
 import Challenge from "./Challenge.vue"
-import { NButton } from 'naive-ui'
+import { NButton } from "naive-ui"
 
 const route = useRoute()
 const router = useRouter()
@@ -71,10 +76,12 @@ const $content = useTemplateRef<any>("$content")
 defineEmits(["hide"])
 
 const hideNav = computed(
-  () => taskTab.value === TASK_TYPE.Challenge || tutorialIds.value.length <= 1,
+  () => taskTab.value !== TASK_TYPE.Tutorial || tutorialIds.value.length <= 1,
 )
 
-function changeTab(v: TASK_TYPE) {
+function changeTab(v: TASK_TYPE & "list") {
+  // 排除 list
+  if (v === "list") return
   taskTab.value = v
   const query = { task: v } as any
   if (v === TASK_TYPE.Tutorial) query.step = step.value
@@ -138,28 +145,28 @@ function addButton() {
     const match = $code.className.match(/-(.*)/)
     let lang = "html"
     if (match) lang = match[1].toLowerCase()
-    
-    const langSpan = document.createElement('span')
-    langSpan.className = 'lang'
+
+    const langSpan = document.createElement("span")
+    langSpan.className = "lang"
     langSpan.textContent = lang.toUpperCase()
-    
-    const btnGroup = document.createElement('div')
-    btnGroup.className = 'btn-group'
-    
-    const copyBtn = document.createElement('button')
-    copyBtn.className = 'action-btn'
-    copyBtn.textContent = '复制'
-    
-    const replaceBtn = document.createElement('button')
-    replaceBtn.className = 'action-btn'
-    replaceBtn.textContent = '替换'
-    
+
+    const btnGroup = document.createElement("div")
+    btnGroup.className = "btn-group"
+
+    const copyBtn = document.createElement("button")
+    copyBtn.className = "action-btn"
+    copyBtn.textContent = "复制"
+
+    const replaceBtn = document.createElement("button")
+    replaceBtn.className = "action-btn"
+    replaceBtn.textContent = "替换"
+
     btnGroup.appendChild(copyBtn)
     btnGroup.appendChild(replaceBtn)
-    
+
     actions.appendChild(langSpan)
     actions.appendChild(btnGroup)
-    
+
     copyBtn.onclick = () => {
       const content = pre.children[1].textContent
       copyFn(content ?? "")
@@ -169,7 +176,7 @@ function addButton() {
         copyBtn.textContent = "复制"
       }, 1000)
     }
-    
+
     replaceBtn.onclick = () => {
       tab.value = lang
       const content = pre.children[1].textContent