update

2026-03-04 00:04:45 +08:00
parent 564f0b3f21
commit 78a2d84335
17 changed files with 687 additions and 310 deletions
--- a/src/components/Task.vue
+++ b/src/components/Task.vue
@@ -11,7 +11,7 @@
          :width="20"
        ></Icon>
        <n-tabs
-          style="width: 210px"
+          style="width: 150px"
          type="segment"
          animated
          :value="taskTab"
@@ -19,22 +19,31 @@
        >
          <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">
+          <n-button
+            text
+            @click="tutorialRef?.prev()"
+            :disabled="tutorialRef?.prevDisabled()"
+          >
            <Icon :width="24" icon="pepicons-pencil:arrow-left"></Icon>
          </n-button>
-          <n-button text @click="next" :disabled="nextDisabled">
+          <n-button
+            text
+            @click="tutorialRef?.next()"
+            :disabled="tutorialRef?.nextDisabled()"
+          >
            <Icon :width="24" icon="pepicons-pencil:arrow-right"></Icon>
          </n-button>
        </template>
      </n-flex>
      <n-flex>
+        <n-button
+          text
+          @click="$router.push({ name: 'submissions', params: { page: 1 } })"
+        >
+          <Icon :width="16" icon="lucide:list"></Icon>
+        </n-button>
        <n-button text v-if="roleSuper" @click="edit">
          <Icon :width="16" icon="lucide:edit"></Icon>
        </n-button>
@@ -43,187 +52,70 @@
        </n-button>
      </n-flex>
    </n-flex>
-    <div
-      v-if="taskTab === TASK_TYPE.Tutorial"
-      class="markdown-body"
-      v-html="content"
-      ref="$content"
-    />
+    <Tutorial v-if="taskTab === TASK_TYPE.Tutorial" ref="tutorialRef" />
    <Challenge v-else />
  </div>
 </template>
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
-import { computed, onMounted, ref, useTemplateRef, watch } from "vue"
-import { marked } from "marked"
-import copyFn from "copy-text-to-clipboard"
-import { css, html, js, tab } from "../store/editors"
-import { Tutorial } from "../api"
+import { computed, onMounted, ref } from "vue"
 import { step } from "../store/tutorial"
 import { roleSuper } from "../store/user"
-import { taskId, taskTab } from "../store/task"
+import { taskTab, challengeDisplay } 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 Tutorial from "./Tutorial.vue"

 const route = useRoute()
 const router = useRouter()
-const tutorialIds = ref<number[]>([])
-const content = ref("")
-const $content = useTemplateRef<any>("$content")
+const tutorialRef = ref<InstanceType<typeof Tutorial>>()

 defineEmits(["hide"])

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

-function changeTab(v: TASK_TYPE & "list") {
-  // 排除 list
-  if (v === "list") return
+function changeTab(v: TASK_TYPE) {
  taskTab.value = v
-  const query = { task: v } as any
-  if (v === TASK_TYPE.Tutorial) query.step = step.value
-  router.push({ query })
-}
-
-const prevDisabled = computed(() => {
-  const i = tutorialIds.value.indexOf(step.value)
-  return i <= 0
-})
-
-const nextDisabled = computed(() => {
-  const i = tutorialIds.value.indexOf(step.value)
-  return i === tutorialIds.value.length - 1
-})
-
-function prev() {
-  const i = tutorialIds.value.indexOf(step.value)
-  step.value = tutorialIds.value[i - 1]
-}
-
-function next() {
-  const i = tutorialIds.value.indexOf(step.value)
-  step.value = tutorialIds.value[i + 1]
+  if (v === TASK_TYPE.Tutorial) {
+    router.push(
+      step.value
+        ? { name: "home-tutorial", params: { display: step.value } }
+        : { name: "home-tutorial-list" },
+    )
+  } else if (v === TASK_TYPE.Challenge) {
+    challengeDisplay.value = 0
+    router.push({ name: "home-challenge-list" })
+  }
 }

 function edit() {
-  router.push({
-    name: taskTab.value,
-    params: taskTab.value === TASK_TYPE.Tutorial ? { display: step.value } : {},
-  })
+  const name =
+    taskTab.value === TASK_TYPE.Tutorial
+      ? "tutorial-editor"
+      : "challenge-editor"
+  const display =
+    taskTab.value === TASK_TYPE.Tutorial ? step.value : challengeDisplay.value
+  router.push({ name, params: { display } })
 }

-async function prepare() {
-  tutorialIds.value = await Tutorial.listDisplay()
-  if (!tutorialIds.value.length) {
-    content.value = "暂无教程"
+function init() {
+  const name = route.name as string
+  if (name.startsWith("home-tutorial")) {
+    taskTab.value = TASK_TYPE.Tutorial
+    if (route.params.display) step.value = Number(route.params.display)
+  } else if (name.startsWith("home-challenge")) {
+    taskTab.value = TASK_TYPE.Challenge
+    if (route.params.display)
+      challengeDisplay.value = Number(route.params.display)
  }
-  if (!tutorialIds.value.includes(step.value)) {
-    step.value = tutorialIds.value[0]
-  }
-}
-
-async function getContent() {
-  const data = await Tutorial.get(step.value)
-  taskId.value = data.task_ptr
-  const merged = `# #${data.display} ${data.title}\n${data.content}`
-  content.value = await marked.parse(merged, { async: true })
-}
-
-function addButton() {
-  const action = document.createElement("div")
-  action.className = "codeblock-action"
-  const pres = $content.value?.querySelectorAll("pre") ?? []
-  for (const pre of pres) {
-    let timer = 0
-    let copyTimer = 0
-    const actions = action.cloneNode() as HTMLDivElement
-    pre.insertBefore(actions, pre.children[0])
-    const $code = pre.childNodes[1] as HTMLPreElement
-    const match = $code.className.match(/-(.*)/)
-    let lang = "html"
-    if (match) lang = match[1].toLowerCase()
-
-    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 = "替换"
-
-    btnGroup.appendChild(copyBtn)
-    btnGroup.appendChild(replaceBtn)
-
-    actions.appendChild(langSpan)
-    actions.appendChild(btnGroup)
-
-    copyBtn.onclick = () => {
-      const content = pre.children[1].textContent
-      copyFn(content ?? "")
-      copyBtn.textContent = "已复制"
-      clearTimeout(copyTimer)
-      copyTimer = setTimeout(() => {
-        copyBtn.textContent = "复制"
-      }, 1000)
-    }
-
-    replaceBtn.onclick = () => {
-      tab.value = lang
-      const content = pre.children[1].textContent
-      if (lang === "html") html.value = content
-      if (lang === "css") css.value = content
-      if (lang === "js") js.value = content
-      replaceBtn.textContent = "已替换"
-      clearTimeout(timer)
-      timer = setTimeout(() => {
-        replaceBtn.textContent = "替换"
-      }, 1000)
-    }
-  }
-}
-
-function modifyLink() {
-  const links = $content.value?.querySelectorAll("a") ?? []
-  for (const link of links) {
-    link.target = "_blank"
-  }
-}
-
-async function render() {
-  await getContent()
-  addButton()
-  modifyLink()
-}
-
-async function init() {
-  if (route.query.task) {
-    taskTab.value = route.query.task as TASK_TYPE
-  }
-  if (route.query.step) {
-    step.value = Number(route.query.step)
-  }
-  const query = { task: taskTab.value } as any
-  if (taskTab.value === TASK_TYPE.Tutorial) query.step = step.value
-  router.push({ query })
-  await prepare()
-  render()
 }

 onMounted(init)
-watch(step, (v) => {
-  router.push({ query: { ...route.query, step: v } })
-  render()
-})
 </script>
 <style scoped>
 .container {
@@ -239,65 +131,4 @@ watch(step, (v) => {
  border-bottom: 1px solid rgb(239, 239, 245);
  box-sizing: border-box;
 }
-
-.markdown-body {
-  padding: 16px;
-  box-sizing: border-box;
-  overflow: auto;
-}
-</style>
-<style>
-.markdown-body pre {
-  position: relative;
-}
-
-.markdown-body pre code {
-  padding: 0;
-  font-size: 1rem;
-  font-family: Monaco;
-}
-
-.codeblock-action {
-  margin-bottom: 1rem;
-  font-family:
-    v-sans,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol";
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.codeblock-action .lang {
-  font-size: 0.9rem;
-  font-weight: bold;
-}
-
-.codeblock-action .btn-group {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.codeblock-action .action-btn {
-  height: 28px;
-  padding: 0 14px;
-  font-size: 14px;
-  border-radius: 3px;
-  border: 1px solid #d9d9d9;
-  background-color: #fff;
-  color: #333;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.codeblock-action .action-btn:hover {
-  border-color: #18a058;
-  color: #18a058;
-}
 </style>