update

2026-04-07 19:24:09 -06:00
parent 3697078fc3
commit 58f462bb3b
11 changed files with 146 additions and 118 deletions
--- a/src/components/ai/PromptPanel.vue
+++ b/src/components/ai/PromptPanel.vue
@@ -34,11 +34,7 @@
          style="width: 120px"
          :disabled="streaming"
        />
-        <n-button
-          v-if="streaming"
-          type="error"
-          @click="stopPrompt"
-        >
+        <n-button v-if="streaming" type="error" @click="stopPrompt">
          停止
        </n-button>
        <n-button
--- a/src/components/editor/Editors.vue
+++ b/src/components/editor/Editors.vue
@@ -1,80 +1,80 @@
 <template>
  <div class="editors-root">
-  <n-tabs
-    :value="tab"
-    :class="`tab-active-${tab}`"
-    pane-class="pane"
-    style="height: 100%"
-    type="card"
-    @update:value="changeTab"
-  >
-    <n-tab-pane name="html" tab="HTML">
-      <template #tab>
-        <n-flex align="center">
-          <Icon :width="20" icon="skill-icons:html"></Icon>
-          <span>HTML</span>
-        </n-flex>
-      </template>
-      <Editor v-model:value="html" :font-size="size" language="html" />
-    </n-tab-pane>
-    <n-tab-pane name="css" tab="CSS">
-      <template #tab>
-        <n-flex align="center">
-          <Icon :width="20" icon="skill-icons:css"></Icon>
-          <span>CSS</span>
-        </n-flex>
-      </template>
-      <Editor v-model:value="css" :font-size="size" language="css" />
-    </n-tab-pane>
-    <n-tab-pane name="js" tab="JS">
-      <template #tab>
-        <n-flex align="center">
-          <Icon :width="20" icon="skill-icons:javascript"></Icon>
-          <span>JS</span>
-        </n-flex>
-      </template>
-      <Editor v-model:value="js" :font-size="size" language="js" />
-    </n-tab-pane>
-    <n-tab-pane name="actions" tab="选项">
-      <template #tab>
-        <n-flex align="center">
-          <Icon :width="20" icon="skill-icons:actix-dark"></Icon>
-          <span>选项</span>
-        </n-flex>
-      </template>
-      <n-flex class="wrapper" vertical>
-        <n-flex align="center">
-          <span class="label">重置</span>
-          <n-button @click="reset('html')">HTML</n-button>
-          <n-button @click="reset('css')">CSS</n-button>
-          <n-button @click="reset('js')">JS</n-button>
-        </n-flex>
-        <n-flex align="center">
-          <span class="label">字号</span>
+    <n-tabs
+      :value="tab"
+      :class="`tab-active-${tab}`"
+      pane-class="pane"
+      style="height: 100%"
+      type="card"
+      @update:value="changeTab"
+    >
+      <n-tab-pane name="html" tab="HTML">
+        <template #tab>
          <n-flex align="center">
-            <span :style="{ 'font-size': size + 'px' }">{{ size }}</span>
-            <n-button :disabled="size === 20" @click="changeSize(size - 2)">
-              调小
-            </n-button>
-            <n-button :disabled="size === 40" @click="changeSize(size + 2)">
-              调大
-            </n-button>
+            <Icon :width="20" icon="skill-icons:html"></Icon>
+            <span>HTML</span>
+          </n-flex>
+        </template>
+        <Editor v-model:value="html" :font-size="size" language="html" />
+      </n-tab-pane>
+      <n-tab-pane name="css" tab="CSS">
+        <template #tab>
+          <n-flex align="center">
+            <Icon :width="20" icon="skill-icons:css"></Icon>
+            <span>CSS</span>
+          </n-flex>
+        </template>
+        <Editor v-model:value="css" :font-size="size" language="css" />
+      </n-tab-pane>
+      <n-tab-pane name="js" tab="JS">
+        <template #tab>
+          <n-flex align="center">
+            <Icon :width="20" icon="skill-icons:javascript"></Icon>
+            <span>JS</span>
+          </n-flex>
+        </template>
+        <Editor v-model:value="js" :font-size="size" language="js" />
+      </n-tab-pane>
+      <n-tab-pane name="actions" tab="选项">
+        <template #tab>
+          <n-flex align="center">
+            <Icon :width="20" icon="skill-icons:actix-dark"></Icon>
+            <span>选项</span>
+          </n-flex>
+        </template>
+        <n-flex class="wrapper" vertical>
+          <n-flex align="center">
+            <span class="label">重置</span>
+            <n-button @click="reset('html')">HTML</n-button>
+            <n-button @click="reset('css')">CSS</n-button>
+            <n-button @click="reset('js')">JS</n-button>
+          </n-flex>
+          <n-flex align="center">
+            <span class="label">字号</span>
+            <n-flex align="center">
+              <span :style="{ 'font-size': size + 'px' }">{{ size }}</span>
+              <n-button :disabled="size === 20" @click="changeSize(size - 2)">
+                调小
+              </n-button>
+              <n-button :disabled="size === 40" @click="changeSize(size + 2)">
+                调大
+              </n-button>
+            </n-flex>
+          </n-flex>
+          <n-flex align="center">
+            <span class="label">预加载</span>
+            <n-tag type="success">Normalize.css</n-tag>
          </n-flex>
        </n-flex>
-        <n-flex align="center">
-          <span class="label">预加载</span>
-          <n-tag type="success">Normalize.css</n-tag>
-        </n-flex>
-      </n-flex>
-    </n-tab-pane>
-    <template #suffix>
-      <Toolbar
-        :submit-loading="submitLoading"
-        @format="format"
-        @submit="formatAndSubmit"
-      />
-    </template>
-  </n-tabs>
+      </n-tab-pane>
+      <template #suffix>
+        <Toolbar
+          :submit-loading="submitLoading"
+          @format="format"
+          @submit="formatAndSubmit"
+        />
+      </template>
+    </n-tabs>
  </div>
 </template>
 <script lang="ts" setup>
--- a/src/components/editor/Preview.vue
+++ b/src/components/editor/Preview.vue
@@ -68,14 +68,31 @@ const emits = defineEmits(["afterScore", "showCode", "clear"])

 type Layout = "desktop" | "mobile" | "tablet"
 const layouts: Layout[] = ["desktop", "mobile", "tablet"]
-const layoutConfig: Record<Layout, { icon: string; label: string; width: string }> = {
-  desktop: { icon: "material-symbols:desktop-windows-outline", label: "桌面", width: "100%" },
-  mobile: { icon: "material-symbols:smartphone-outline", label: "移动端 (375px)", width: "375px" },
-  tablet: { icon: "material-symbols:tablet-outline", label: "平板 (768px)", width: "768px" },
+const layoutConfig: Record<
+  Layout,
+  { icon: string; label: string; width: string }
+> = {
+  desktop: {
+    icon: "material-symbols:desktop-windows-outline",
+    label: "桌面",
+    width: "100%",
+  },
+  mobile: {
+    icon: "material-symbols:smartphone-outline",
+    label: "移动端 (375px)",
+    width: "375px",
+  },
+  tablet: {
+    icon: "material-symbols:tablet-outline",
+    label: "平板 (768px)",
+    width: "768px",
+  },
 }
 const layoutIndex = ref(0)
 const layoutIcon = computed(() => layoutConfig[layouts[layoutIndex.value]].icon)
-const layoutLabel = computed(() => layoutConfig[layouts[layoutIndex.value]].label)
+const layoutLabel = computed(
+  () => layoutConfig[layouts[layoutIndex.value]].label,
+)
 const iframeWrapperStyle = computed(() => ({
  maxWidth: layoutConfig[layouts[layoutIndex.value]].width,
 }))
--- a/src/components/editor/Toolbar.vue
+++ b/src/components/editor/Toolbar.vue
@@ -38,7 +38,6 @@ import {
 } from "../../store/user"
 import { loginModal } from "../../store/modal"
 import { show, panelSize } from "../../store/panel"
-import { step } from "../../store/tutorial"
 import { taskId } from "../../store/task"
 import { Account } from "../../api"
 import { Role } from "../../utils/type"
@@ -103,18 +102,9 @@ function showTutorial() {
 function clickMenu(name: string) {
  switch (name) {
    case "dashboard": {
-      if (roleSuper.value) {
-        router.push({
-          name: "tutorial-editor",
-          params: { display: 0 },
-        })
-        break
-      } else if (roleAdmin.value) {
-        router.push({ name: "challenge-editor", params: { display: 0 } })
-        break
-      } else {
-        break
-      }
+      const route = roleAdmin.value ? "challenge-editor" : "tutorial-editor"
+      router.push({ name: route, query: { display: 0 } })
+      break
    }
    case "admin":
      window.open(ADMIN_URL)
--- a/src/components/task/ChallengeList.vue
+++ b/src/components/task/ChallengeList.vue
@@ -12,13 +12,17 @@
        <template #header>
          <n-flex align="center" :size="6">
            <span v-if="item.submitted" class="check-icon">✓</span>
-            <span :class="{ 'submitted-title': item.submitted }">{{ item.title }}</span>
+            <span :class="{ 'submitted-title': item.submitted }">{{
+              item.title
+            }}</span>
          </n-flex>
        </template>
        <template #header-extra>
          <n-flex :size="6">
            <n-tag type="warning" size="small">{{ item.score }} 分</n-tag>
-            <n-tag v-if="item.pass_score != null" size="small">及格 {{ item.pass_score }} 分</n-tag>
+            <n-tag v-if="item.pass_score != null" size="small"
+              >及格 {{ item.pass_score }} 分</n-tag
+            >
          </n-flex>
        </template>
      </n-card>
--- a/src/components/task/TaskPanel.vue
+++ b/src/components/task/TaskPanel.vue
@@ -24,7 +24,9 @@
          <n-button text @click="prev()" :disabled="prevDisabled()">
            <Icon :width="24" icon="pepicons-pencil:arrow-left"></Icon>
          </n-button>
-          <span v-if="progressText" class="progress-text">{{ progressText }}</span>
+          <span v-if="progressText" class="progress-text">{{
+            progressText
+          }}</span>
          <n-button text @click="next()" :disabled="nextDisabled()">
            <Icon :width="24" icon="pepicons-pencil:arrow-right"></Icon>
          </n-button>
@@ -53,7 +55,14 @@
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
 import { computed, watch } from "vue"
-import { step, tutorialIds, prev, next, prevDisabled, nextDisabled } from "../../store/tutorial"
+import {
+  step,
+  tutorialIds,
+  prev,
+  next,
+  prevDisabled,
+  nextDisabled,
+} from "../../store/tutorial"
 import { authed, roleSuper } from "../../store/user"
 import { taskTab, taskId, challengeDisplay } from "../../store/task"
 import { useRoute, useRouter } from "vue-router"
@@ -71,7 +80,8 @@ function syncRoute(routeName: string) {
    if (route.params.display) step.value = Number(route.params.display)
  } else if (routeName.startsWith("home-challenge")) {
    taskTab.value = TASK_TYPE.Challenge
-    if (route.params.display) challengeDisplay.value = Number(route.params.display)
+    if (route.params.display)
+      challengeDisplay.value = Number(route.params.display)
  }
 }
 syncRoute(route.name as string)
@@ -80,8 +90,7 @@ watch(() => route.name as string, syncRoute)
 defineEmits(["hide"])

 const hideNav = computed(
-  () =>
-    taskTab.value !== TASK_TYPE.Tutorial || tutorialIds.value.length <= 1,
+  () => taskTab.value !== TASK_TYPE.Tutorial || tutorialIds.value.length <= 1,
 )

 const progressText = computed(() => {
--- a/src/components/task/TaskStatsModal.vue
+++ b/src/components/task/TaskStatsModal.vue
@@ -363,7 +363,8 @@
                    width: '20px',
                    height: '20px',
                    borderRadius: '50%',
-                    background: i < 3 ? ['#f0a020', '#888', '#a07040'][i] : '#ddd',
+                    background:
+                      i < 3 ? ['#f0a020', '#888', '#a07040'][i] : '#ddd',
                    color: '#fff',
                    fontSize: '11px',
                    fontWeight: '700',
@@ -372,7 +373,8 @@
                    justifyContent: 'center',
                    flexShrink: 0,
                  }"
-                >{{ i + 1 }}</span>
+                  >{{ i + 1 }}</span
+                >
                <span style="flex: 1; font-size: 13px; color: #333">
                  {{ displayName(item.username, item.classname) }}
                </span>
--- a/src/pages/ChallengeDetail.vue
+++ b/src/pages/ChallengeDetail.vue
@@ -9,7 +9,11 @@
        </template>
        <template #suffix>
          <n-flex style="margin: 0 8px">
-            <n-button v-if="roleAdmin || roleSuper" text @click="showStats = true">
+            <n-button
+              v-if="roleAdmin || roleSuper"
+              text
+              @click="showStats = true"
+            >
              <Icon :width="16" icon="lucide:bar-chart-2" />
            </n-button>
            <n-button
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -1,10 +1,7 @@
 <template>
  <n-flex class="container" :wrap="false">
    <div class="sidebar">
-      <div
-        class="back-btn"
-        @click="() => goHome($router, taskTab, step)"
-      >
+      <div class="back-btn" @click="() => goHome($router, taskTab, step)">
        ← 返回
      </div>
      <n-divider style="margin: 8px 0" />
@@ -78,7 +75,9 @@ const menu = computed(() =>
  color: #888;
  cursor: pointer;
  border-radius: 6px;
-  transition: background-color 0.15s, color 0.15s;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
  user-select: none;
 }

@@ -93,7 +92,9 @@ const menu = computed(() =>
  font-size: 14px;
  cursor: pointer;
  color: #444;
-  transition: background-color 0.15s, color 0.15s;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
  user-select: none;
 }

--- a/src/pages/Submissions.vue
+++ b/src/pages/Submissions.vue
@@ -12,7 +12,17 @@
        style="height: 100%; padding-right: 10px; overflow: hidden"
      >
        <n-flex justify="space-between" style="flex-shrink: 0">
-          <n-button secondary @click="() => goHome($router, taskTab, taskTab === TASK_TYPE.Challenge ? challengeDisplay : step)">
+          <n-button
+            secondary
+            @click="
+              () =>
+                goHome(
+                  $router,
+                  taskTab,
+                  taskTab === TASK_TYPE.Challenge ? challengeDisplay : step,
+                )
+            "
+          >
            首页
          </n-button>
          <n-flex align="center">
--- a/src/pages/Workspace.vue
+++ b/src/pages/Workspace.vue
@@ -1,10 +1,5 @@
 <template>
-  <n-split
-    :size="panelSize"
-    @update-size="changeSize"
-    min="400px"
-    max="900px"
-  >
+  <n-split :size="panelSize" @update-size="changeSize" min="400px" max="900px">
    <template #1>
      <TaskPanel @hide="hide" />
    </template>