fix

2026-03-26 08:11:08 -06:00
parent 4b58cee204
commit 597f1f0f93
14 changed files with 408 additions and 532 deletions
--- a/public/tailwindcss.min.js
+++ b/public/tailwindcss.min.js
--- a/src/components/Challenge.vue
+++ b/src/components/Challenge.vue
@@ -1,19 +1,14 @@
 <template>
  <div class="container" v-if="taskTab === TASK_TYPE.Challenge">
-    <template v-if="currentChallenge">
-      <n-flex align="center" style="margin-bottom: 12px">
-        <n-button text @click="back">
-          <Icon :width="20" icon="pepicons-pencil:arrow-left"></Icon>
-        </n-button>
-        <span style="font-weight: bold">返回挑战列表</span>
-      </n-flex>
-      <div class="markdown-body" v-html="content" />
-    </template>
-    <template v-else>
    <n-empty v-if="!challenges.length">暂无挑战，敬请期待</n-empty>
-      <n-grid v-else :cols="3" x-gap="12" y-gap="12">
-        <n-gi v-for="item in challenges" :key="item.display">
-          <n-card hoverable class="challenge-card" @click="select(item)">
+    <n-flex v-else vertical :size="12">
+      <n-card
+        v-for="item in challenges"
+        :key="item.display"
+        hoverable
+        class="challenge-card"
+        @click="select(item)"
+      >
        <template #header>
          {{ item.title }}
        </template>
@@ -21,58 +16,27 @@
          <n-tag type="warning" size="small">{{ item.score }}分</n-tag>
        </template>
      </n-card>
-        </n-gi>
-      </n-grid>
-    </template>
+    </n-flex>
  </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue"
-import { Icon } from "@iconify/vue"
-import { marked } from "marked"
 import { useRouter } from "vue-router"
 import { Challenge } from "../api"
-import { taskTab, taskId, challengeDisplay } from "../store/task"
+import { taskTab } from "../store/task"
 import { TASK_TYPE } from "../utils/const"
 import type { ChallengeSlim } from "../utils/type"

 const router = useRouter()
 const challenges = ref<ChallengeSlim[]>([])
-const currentChallenge = ref<ChallengeSlim | null>(null)
-const content = ref("")

-async function loadList() {
-  challenges.value = await Challenge.listDisplay()
-  // 从 URL 恢复选中状态
-  if (challengeDisplay.value) {
-    const item = challenges.value.find(
-      (c) => c.display === challengeDisplay.value,
-    )
-    if (item) await select(item, false)
-  }
-}
-
-async function select(item: ChallengeSlim, updateUrl = true) {
-  currentChallenge.value = item
-  challengeDisplay.value = item.display
-  if (updateUrl) {
+function select(item: ChallengeSlim) {
  router.push({ name: "home-challenge", params: { display: item.display } })
 }
-  const data = await Challenge.get(item.display)
-  taskId.value = data.task_ptr
-  const merged = `# #${data.display} ${data.title}\n${data.content}`
-  content.value = await marked.parse(merged, { async: true })
-}

-function back() {
-  currentChallenge.value = null
-  challengeDisplay.value = 0
-  taskId.value = 0
-  content.value = ""
-  router.push({ name: "home-challenge-list" })
-}
-
-onMounted(loadList)
+onMounted(async () => {
+  challenges.value = await Challenge.listDisplay()
+})
 </script>
 <style scoped>
 .container {
--- a/src/components/Editors.vue
+++ b/src/components/Editors.vue
@@ -62,7 +62,6 @@
        <n-flex align="center">
          <span class="label">预加载</span>
          <n-tag type="success">Normalize.css</n-tag>
-          <n-tag type="success">Tailwind CSS</n-tag>
        </n-flex>
      </n-flex>
    </n-tab-pane>
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -64,7 +64,6 @@ function getContent() {
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>${props.css}</style>
    <link rel="stylesheet" href="/normalize.min.css" />
-    <script src="/tailwindcss.min.js"><\/script>
  </head>
  <body>
    ${props.html}
--- a/src/components/PromptPanel.vue
+++ b/src/components/PromptPanel.vue
@@ -83,11 +83,11 @@ renderer.code = function ({ lang }: { text: string; lang?: string }) {
    { bg: string; fg: string; dot: string; border: string; shimmer: string }
  > = {
    html: {
-      bg: "#fff5f0",
-      fg: "#e05020",
-      dot: "#e05020",
-      border: "#f0d0c0",
-      shimmer: "#fff5f0, #ffeee5, #fff5f0",
+      bg: "#f0fff4",
+      fg: "#18a058",
+      dot: "#18a058",
+      border: "#b8e8cc",
+      shimmer: "#f0fff4, #e0f7ea, #f0fff4",
    },
    css: {
      bg: "#f0f0ff",
@@ -118,7 +118,7 @@ renderer.code = function ({ lang }: { text: string; lang?: string }) {
    border: "#e0eaf5",
    shimmer: "#f0f7ff, #e8f4f8, #f0f7ff",
  }
-  return `<div class="code-placeholder" style="background: linear-gradient(90deg, ${c.shimmer}); background-size: 200% 100%; border-color: ${c.border}"><span class="code-placeholder-dot" style="background: ${c.dot}"></span><span class="code-placeholder-label" style="color: ${c.fg}; background: ${c.fg}18">${label}</span><span class="code-placeholder-text">代码已自动应用到预览区</span></div>`
+  return `<div class="code-placeholder" style="background: linear-gradient(90deg, ${c.shimmer}); background-size: 200% 100%; border-color: ${c.border}"><span class="code-placeholder-dot" style="background: ${c.dot}"></span><span class="code-placeholder-label" style="color: ${c.fg}; background: ${c.fg}18">${label}</span><span class="code-placeholder-text">代码正在生成中，结束后会自动应用到预览区</span></div>`
 }

 function renderMarkdown(text: string): string {
@@ -149,6 +149,7 @@ watch([() => messages.value.length, streamingContent], () => {

 .messages {
  flex: 1;
+  min-height: 0;
  overflow-y: auto;
  padding: 12px;
 }
--- a/src/components/TaskStatsModal.vue
+++ b/src/components/TaskStatsModal.vue
@@ -110,7 +110,9 @@
              </n-flex>
              <Icon
                :icon="
-                showUnsubmitted ? 'lucide:chevron-down' : 'lucide:chevron-right'
+                  showUnsubmitted
+                    ? 'lucide:chevron-down'
+                    : 'lucide:chevron-right'
                "
                :width="14"
                style="color: #aaa"
@@ -329,7 +331,8 @@
                    {{ displayName(sub.username, sub.classname) }}
                  </div>
                  <div style="color: #aaa; font-size: 11px">
-                  {{ sub.score.toFixed(1) }} 分 · {{ sub.rating_count }} 人打分
+                    {{ sub.score.toFixed(1) }} 分 ·
+                    {{ sub.rating_count }} 人打分
                  </div>
                </div>
                <div style="color: #2080f0; font-size: 12px">查看 →</div>
@@ -434,11 +437,17 @@ function viewSubmission(id: string) {
 }

 function rankColor(i: number) {
-  return (["#f0a020", "#909090", "#cd7f32", "#8899aa", "#7a8fa0"] as const)[i] ?? "#aaa"
+  return (
+    (["#f0a020", "#909090", "#cd7f32", "#8899aa", "#7a8fa0"] as const)[i] ??
+    "#aaa"
+  )
 }

 function rankBg(i: number) {
-  return (["#fffbef", "#f8f8f8", "#fdf5ee", "#f2f5f8", "#eef2f5"] as const)[i] ?? "#f8f8f8"
+  return (
+    (["#fffbef", "#f8f8f8", "#fdf5ee", "#f2f5f8", "#eef2f5"] as const)[i] ??
+    "#f8f8f8"
+  )
 }

 function bucketPct(value: number) {
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -1,8 +1,6 @@
 <template>
  <n-flex align="center" class="corner">
-    <n-button quaternary v-if="!show" @click="showTutorial">
-      打开{{ TASK_LABEL[taskTab] }}
-    </n-button>
+    <n-button quaternary v-if="!show" @click="showTutorial"> 教程 </n-button>
    <template v-if="user.loaded && authed">
      <n-button quaternary @click="emit('format')">整理</n-button>
      <n-button
@@ -38,7 +36,7 @@ import { taskId, taskTab } from "../store/task"
 import { Account } from "../api"
 import { Role } from "../utils/type"
 import { router } from "../router"
-import { ADMIN_URL, TASK_LABEL } from "../utils/const"
+import { ADMIN_URL } from "../utils/const"

 const props = defineProps<{
  submitLoading: boolean
--- a/src/components/Tutorial.vue
+++ b/src/components/Tutorial.vue
@@ -63,6 +63,7 @@ async function prepare() {
  tutorialIds.value = await Tutorial.listDisplay()
  if (!tutorialIds.value.length) {
    content.value = "暂无教程"
+    return
  }
  if (!tutorialIds.value.includes(step.value)) {
    step.value = tutorialIds.value[0] as number
--- a/src/pages/ChallengeEditor.vue
+++ b/src/pages/ChallengeEditor.vue
@@ -101,7 +101,13 @@ const canSubmit = computed(
 )
 async function getContent() {
  list.value = await Challenge.list()
-  show(Number(route.params.display))
+  const display = Number(route.params.display)
+  const target = list.value.find((item) => item.display === display)
+  if (target) {
+    show(display)
+  } else if (list.value.length > 0) {
+    show(list.value[0].display)
+  }
 }

 function createNew() {
--- a/src/pages/ChallengeHome.vue
+++ b/src/pages/ChallengeHome.vue
@@ -1,7 +1,6 @@
 <template>
-  <n-split :size="leftSize" min="350px" max="700px">
-    <template #1>
-      <div class="left-panel">
+  <n-layout has-sider style="height: 100vh">
+    <n-layout-sider width="40%" bordered content-style="height: 100%; overflow: hidden;">
      <n-tabs v-model:value="activeTab" type="line" class="left-tabs">
        <template #prefix>
          <n-button text @click="back" style="margin: 0 8px">
@@ -19,10 +18,8 @@
          <PromptPanel />
        </n-tab-pane>
      </n-tabs>
-      </div>
-    </template>
-    <template #2>
-      <div class="right-panel">
+    </n-layout-sider>
+    <n-layout-content content-style="height: 100%; overflow: hidden;">
      <Preview
        :html="html"
        :css="css"
@@ -32,9 +29,8 @@
        @showCode="showCode = true"
        @clear="clearAll"
      />
-      </div>
-    </template>
-  </n-split>
+    </n-layout-content>
+  </n-layout>
  <n-modal
    v-model:show="showCode"
    preset="card"
@@ -66,6 +62,7 @@ import Preview from "../components/Preview.vue"
 import { Challenge, Submission } from "../api"
 import { html, css, js } from "../store/editors"
 import { taskId } from "../store/task"
+import { authed } from "../store/user"
 import {
  connectPrompt,
  disconnectPrompt,
@@ -79,9 +76,7 @@ const route = useRoute()
 const router = useRouter()
 const message = useMessage()

-const leftSize = ref(0.4)
 const activeTab = ref("desc")
-const challengeTitle = ref("")
 const challengeContent = ref("")
 const showCode = ref(false)

@@ -93,8 +88,8 @@ async function loadChallenge() {
  const display = Number(route.params.display)
  const data = await Challenge.get(display)
  taskId.value = data.task_ptr
-  challengeTitle.value = `#${data.display} ${data.title}`
  challengeContent.value = await marked.parse(data.content, { async: true })
+  if (!authed.value) return
  loadHistory(data.task_ptr) // HTTP preload — async, non-blocking
  connectPrompt(data.task_ptr) // WebSocket — synchronous open
  setOnCodeComplete(async (code) => {
@@ -129,11 +124,6 @@ onUnmounted(disconnectPrompt)
 </script>

 <style scoped>
-.left-panel {
-  height: 100%;
-  overflow: hidden;
-}
-
 .left-tabs {
  height: 100%;
  display: flex;
@@ -150,9 +140,4 @@ onUnmounted(disconnectPrompt)
  padding: 0;
 }

-.right-panel {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
 </style>
--- a/src/pages/Submission.vue
+++ b/src/pages/Submission.vue
@@ -25,7 +25,6 @@ async function init() {
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>${submission.css}</style>
    <link rel="stylesheet" href="/normalize.min.css" />
-    <script src="/tailwindcss.min.js"><\/script>
  </head>
  <body>
    ${submission.html}
--- a/src/pages/TutorialEditor.vue
+++ b/src/pages/TutorialEditor.vue
@@ -93,7 +93,13 @@ const canSubmit = computed(
 )
 async function getContent() {
  list.value = await Tutorial.list()
-  show(Number(route.params.display))
+  const display = Number(route.params.display)
+  const target = list.value.find((item) => item.display === display)
+  if (target) {
+    show(display)
+  } else if (list.value.length > 0) {
+    show(list.value[0].display)
+  }
 }

 function createNew() {
--- a/src/store/editors.ts
+++ b/src/store/editors.ts
@@ -1,11 +1,8 @@
 import { useStorage } from "@vueuse/core"
 import { STORAGE_KEY } from "../utils/const"

-const defaultHTML = `<div class="welcome">黄岩一职</div>`
-const defaultCSS = `.welcome {
-    color: red;
-    font-size: 24px;
-}`
+const defaultHTML = ``
+const defaultCSS = ``

 export const html = useStorage(STORAGE_KEY.HTML, defaultHTML)
 export const css = useStorage(STORAGE_KEY.CSS, defaultCSS)
--- a/src/utils/const.ts
+++ b/src/utils/const.ts
@@ -47,8 +47,3 @@ export enum TASK_TYPE {
  Tutorial = "tutorial",
  Challenge = "challenge",
 }
-
-export const TASK_LABEL = {
-  [TASK_TYPE.Tutorial]: "教程",
-  [TASK_TYPE.Challenge]: "挑战",
-} as const