From 2ad2a971c08bb73aa80dd0e7968a5835becd82c5 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 15 Jul 2025 13:08:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BB=A3=E7=A0=81=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json          |  8 +++---
 package.json               |  2 +-
 src/components/Corner.vue  | 10 +++-----
 src/components/Editors.vue | 44 +++++++++++++++++++++++++++++++-
 src/components/Task.vue    | 51 ++++++++++++++++++++++----------------
 5 files changed, 80 insertions(+), 35 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 108b2b9..1dfeac2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,7 @@
         "@rsbuild/core": "^1.3.13",
         "@rsbuild/plugin-vue": "^1.0.7",
         "@vue/tsconfig": "^0.7.0",
-        "prettier": "^3.5.3",
+        "prettier": "^3.6.2",
         "typescript": "^5.8.3",
         "unplugin-vue-components": "^28.5.0"
       }
@@ -2957,9 +2957,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
-      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
diff --git a/package.json b/package.json
index 9cbd25a..92d5140 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@rsbuild/core": "^1.3.13",
     "@rsbuild/plugin-vue": "^1.0.7",
     "@vue/tsconfig": "^0.7.0",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
     "typescript": "^5.8.3",
     "unplugin-vue-components": "^28.5.0"
   }
diff --git a/src/components/Corner.vue b/src/components/Corner.vue
index bcf139d..f94302e 100644
--- a/src/components/Corner.vue
+++ b/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)
 
diff --git a/src/components/Editors.vue b/src/components/Editors.vue
index 9851115..f9872ec 100644
--- a/src/components/Editors.vue
+++ b/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 {
diff --git a/src/components/Task.vue b/src/components/Task.vue
index 3ef4007..b6aa5e6 100644
--- a/src/components/Task.vue
+++ b/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