add asset

src/api.ts

@@ -7,6 +7,7 @@ import type {
   SubmissionOut,
   PromptMessage,
   TaskStatsOut,
+  TaskAsset,
 } from "./utils/type"
 import { BASE_URL, STORAGE_KEY } from "./utils/const"
 
@@ -271,3 +272,46 @@ export const Helper = {
     return !!res.data.url ? res.data.url : ""
   },
 }
+
+export const TaskAssets = {
+  async listChallenge(display: number): Promise<TaskAsset[]> {
+    return (await http.get<TaskAsset[]>(`/assets/challenge/${display}`)).data
+  },
+  async uploadChallenge(
+    display: number,
+    name: string,
+    file: File,
+  ): Promise<TaskAsset> {
+    const form = new window.FormData()
+    form.append("name", name)
+    form.append("file", file)
+    return (
+      await http.post<TaskAsset>(`/assets/challenge/${display}`, form, {
+        headers: { "content-type": "multipart/form-data" },
+      })
+    ).data
+  },
+  async deleteChallenge(display: number, name: string) {
+    return (await http.delete(`/assets/challenge/${display}/${name}`)).data
+  },
+  async listTutorial(display: number): Promise<TaskAsset[]> {
+    return (await http.get<TaskAsset[]>(`/assets/tutorial/${display}`)).data
+  },
+  async uploadTutorial(
+    display: number,
+    name: string,
+    file: File,
+  ): Promise<TaskAsset> {
+    const form = new window.FormData()
+    form.append("name", name)
+    form.append("file", file)
+    return (
+      await http.post<TaskAsset>(`/assets/tutorial/${display}`, form, {
+        headers: { "content-type": "multipart/form-data" },
+      })
+    ).data
+  },
+  async deleteTutorial(display: number, name: string) {
+    return (await http.delete(`/assets/tutorial/${display}/${name}`)).data
+  },
+}

src/components/editor/Preview.vue

@@ -2,9 +2,9 @@
   <n-flex align="center" justify="space-between" class="title">
     <div>
       <n-text class="titleText">预览</n-text>
-      <n-text v-if="!!submission.id" depth="3"
+      <n-text v-if="!!submission.id" depth="3">
-        >({{ submission.view_count || 0 }})</n-text
+        ({{ submission.view_count || 0 }})
-      >
+      </n-text>
     </div>
     <n-flex>
       <n-tooltip>
@@ -24,8 +24,9 @@
         quaternary
         v-if="props.showCodeButton"
         @click="emits('showCode')"
-        >代码</n-button
       >
+        代码
+      </n-button>
       <n-button quaternary v-if="props.submissionId" @click="copyLink">
         链接
       </n-button>
@@ -58,6 +59,7 @@ interface Props {
   html: string
   css: string
   js: string
+  assetBaseUrl?: string
   submissionId?: string
   showCodeButton?: boolean
   clearable?: boolean
@@ -113,6 +115,7 @@ function getContent() {
     <meta charset="UTF-8" />
     <title>预览</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    ${props.assetBaseUrl ? `<base href="${props.assetBaseUrl}">` : ""}
     <style>${props.css}</style>
     <link rel="stylesheet" href="/normalize.min.css" />
   </head>

src/components/task/TaskAssetManager.vue

@@ -0,0 +1,153 @@
+<template>
+  <n-flex vertical>
+    <n-flex align="center">
+      <n-text strong>素材</n-text>
+      <n-button size="small" @click="showUpload = true">上传图片</n-button>
+    </n-flex>
+    <n-empty v-if="!assets.length" description="暂无素材" size="small" />
+    <n-flex v-else wrap>
+      <n-card
+        v-for="asset in assets"
+        :key="asset.name"
+        size="small"
+        style="width: 120px"
+      >
+        <template #cover>
+          <n-image
+            :src="asset.url"
+            style="width: 100%; height: 80px; object-fit: cover"
+          />
+        </template>
+        <n-flex align="center" justify="space-between">
+          <n-text style="font-size: 12px; word-break: break-all">{{
+            asset.name
+          }}</n-text>
+          <n-button
+            size="tiny"
+            quaternary
+            type="error"
+            @click="remove(asset.name)"
+          >
+            <template #icon>
+              <Icon icon="material-symbols:close-rounded" />
+            </template>
+          </n-button>
+        </n-flex>
+      </n-card>
+    </n-flex>
+
+    <n-modal
+      v-model:show="showUpload"
+      preset="card"
+      title="上传素材"
+      style="width: 400px"
+    >
+      <n-form>
+        <n-form-item label="文件名（如 1.png）">
+          <n-input v-model:value="uploadName" placeholder="1.png" />
+        </n-form-item>
+        <n-form-item label="选择文件">
+          <n-upload :max="1" @change="onFileChange" :default-upload="false">
+            <n-button>选择文件</n-button>
+          </n-upload>
+        </n-form-item>
+      </n-form>
+      <template #footer>
+        <n-flex justify="end">
+          <n-button @click="showUpload = false">取消</n-button>
+          <n-button
+            type="primary"
+            :disabled="!uploadName || !uploadFile"
+            :loading="uploading"
+            @click="upload"
+          >
+            上传
+          </n-button>
+        </n-flex>
+      </template>
+    </n-modal>
+  </n-flex>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from "vue"
+import { Icon } from "@iconify/vue"
+import { useMessage } from "naive-ui"
+import type { UploadFileInfo } from "naive-ui"
+import { TaskAssets } from "../../api"
+import type { TaskAsset } from "../../utils/type"
+
+const props = defineProps<{
+  taskType: "challenge" | "tutorial"
+  display: number
+}>()
+
+const message = useMessage()
+const assets = ref<TaskAsset[]>([])
+const showUpload = ref(false)
+const uploadName = ref("")
+const uploadFile = ref<File | null>(null)
+const uploading = ref(false)
+
+async function load() {
+  if (!props.display) return
+  try {
+    assets.value =
+      props.taskType === "challenge"
+        ? await TaskAssets.listChallenge(props.display)
+        : await TaskAssets.listTutorial(props.display)
+  } catch {
+    assets.value = []
+  }
+}
+
+function onFileChange({ file }: { file: UploadFileInfo }) {
+  if (file.status === "pending") {
+    uploadFile.value = file.file ?? null
+  }
+}
+
+async function upload() {
+  if (!uploadName.value || !uploadFile.value) return
+  uploading.value = true
+  try {
+    const asset =
+      props.taskType === "challenge"
+        ? await TaskAssets.uploadChallenge(
+            props.display,
+            uploadName.value,
+            uploadFile.value,
+          )
+        : await TaskAssets.uploadTutorial(
+            props.display,
+            uploadName.value,
+            uploadFile.value,
+          )
+    const idx = assets.value.findIndex((a) => a.name === asset.name)
+    if (idx >= 0) assets.value[idx] = asset
+    else assets.value.push(asset)
+    message.success(`${asset.name} 上传成功`)
+    showUpload.value = false
+    uploadName.value = ""
+    uploadFile.value = null
+  } catch (err: any) {
+    message.error(err?.response?.data?.detail ?? "上传失败")
+  } finally {
+    uploading.value = false
+  }
+}
+
+async function remove(name: string) {
+  try {
+    props.taskType === "challenge"
+      ? await TaskAssets.deleteChallenge(props.display, name)
+      : await TaskAssets.deleteTutorial(props.display, name)
+    assets.value = assets.value.filter((a) => a.name !== name)
+    message.success("删除成功")
+  } catch (err: any) {
+    message.error(err?.response?.data?.detail ?? "删除失败")
+  }
+}
+
+watch(() => props.display, load, { immediate: true })
+</script>

src/components/task/TaskPanel.vue

@@ -24,37 +24,76 @@
           <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">{{
+          <span v-if="progressText" class="progress-text">
-            progressText
+            {{ progressText }}
-          }}</span>
+          </span>
           <n-button text @click="next()" :disabled="nextDisabled()">
             <Icon :width="24" icon="pepicons-pencil:arrow-right"></Icon>
           </n-button>
         </template>
       </n-flex>
       <n-flex>
+        <n-tooltip v-if="tutorialAssets.length && taskTab === TASK_TYPE.Tutorial" trigger="hover">
+          <template #trigger>
+            <n-button text @click="showAssets = true">
+              <Icon :width="16" icon="lucide:image"></Icon>
+            </n-button>
+          </template>
+          素材
+        </n-tooltip>
+        <n-tooltip v-if="authed" trigger="hover">
+          <template #trigger>
             <n-button
-          v-if="authed"
               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">
+          </template>
+          提交记录
+        </n-tooltip>
+        <n-tooltip v-if="roleSuper" trigger="hover">
+          <template #trigger>
+            <n-button text @click="edit">
               <Icon :width="16" icon="lucide:edit"></Icon>
             </n-button>
+          </template>
+          编辑
+        </n-tooltip>
+        <n-tooltip trigger="hover">
+          <template #trigger>
             <n-button text @click="$emit('hide')">
               <Icon :width="24" icon="material-symbols:close-rounded"></Icon>
             </n-button>
+          </template>
+          关闭
+        </n-tooltip>
       </n-flex>
     </n-flex>
     <TutorialContent v-if="taskTab === TASK_TYPE.Tutorial" />
     <ChallengeList v-else />
   </div>
+  <n-modal
+    v-model:show="showAssets"
+    preset="card"
+    title="素材"
+    style="width: 500px"
+  >
+    <n-grid :cols="3" :x-gap="12" :y-gap="12">
+      <n-gi v-for="asset in tutorialAssets" :key="asset.name">
+        <n-card size="small" :title="asset.name">
+          <n-image
+            :src="asset.url"
+            style="width: 100%; height: 100px; object-fit: contain"
+          />
+        </n-card>
+      </n-gi>
+    </n-grid>
+  </n-modal>
 </template>
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
-import { computed, watch } from "vue"
+import { computed, ref, watch } from "vue"
 import {
   step,
   tutorialIds,
@@ -67,9 +106,28 @@ import { authed, roleSuper } from "../../store/user"
 import { taskTab, taskId, challengeDisplay } from "../../store/task"
 import { useRoute, useRouter } from "vue-router"
 import { TASK_TYPE } from "../../utils/const"
+import { TaskAssets } from "../../api"
+import type { TaskAsset } from "../../utils/type"
 import ChallengeList from "./ChallengeList.vue"
 import TutorialContent from "./TutorialContent.vue"
 
+const tutorialAssets = ref<TaskAsset[]>([])
+const showAssets = ref(false)
+
+async function loadTutorialAssets(display: number) {
+  if (!display) {
+    tutorialAssets.value = []
+    return
+  }
+  try {
+    tutorialAssets.value = await TaskAssets.listTutorial(display)
+  } catch {
+    tutorialAssets.value = []
+  }
+}
+
+watch(step, loadTutorialAssets, { immediate: true })
+
 const route = useRoute()
 const router = useRouter()
 

src/components/task/TutorialContent.vue

@@ -8,7 +8,7 @@ import copyFn from "copy-text-to-clipboard"
 import { css, html, js, tab } from "../../store/editors"
 import { Tutorial } from "../../api"
 import { step, tutorialIds, loadTutorials } from "../../store/tutorial"
-import { taskId } from "../../store/task"
+import { taskId, assetBaseUrl } from "../../store/task"
 import { useRouter } from "vue-router"
 
 marked.use({
@@ -39,6 +39,7 @@ const $content = useTemplateRef<any>("$content")
 async function render() {
   const data = await Tutorial.get(step.value)
   taskId.value = data.task_ptr
+  assetBaseUrl.value = `/media/tasks/tutorial/${step.value}/`
   const merged = `# ${data.display}. ${data.title}\n${data.content}`
   content.value = await marked.parse(merged, { async: true })
 }

src/pages/ChallengeDetail.vue

@@ -9,6 +9,9 @@
         </template>
         <template #suffix>
           <n-flex style="margin: 0 8px">
+            <n-button v-if="assets.length" text @click="showAssets = true">
+              <Icon :width="16" icon="lucide:image" />
+            </n-button>
             <n-button
               v-if="roleAdmin || roleSuper"
               text
@@ -46,6 +49,7 @@
         :html="html"
         :css="css"
         :js="js"
+        :asset-base-url="assetBaseUrl"
         show-code-button
         clearable
         @showCode="showCode = true"
@@ -54,6 +58,23 @@
     </div>
   </div>
   <TaskStatsModal v-model:show="showStats" :task-id="taskId" />
+  <n-modal
+    v-model:show="showAssets"
+    preset="card"
+    title="素材"
+    style="width: 500px"
+  >
+    <n-grid :cols="3" :x-gap="12" :y-gap="12">
+      <n-gi v-for="asset in assets" :key="asset.name">
+        <n-card size="small" :title="asset.name">
+          <n-image
+            :src="asset.url"
+            style="width: 100%; height: 100px; object-fit: contain"
+          />
+        </n-card>
+      </n-gi>
+    </n-grid>
+  </n-modal>
   <n-modal
     v-model:show="showCode"
     preset="card"
@@ -75,7 +96,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted } from "vue"
+import { ref, watch, onMounted, onUnmounted, computed } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useMessage } from "naive-ui"
 import { Icon } from "@iconify/vue"
@@ -84,7 +105,8 @@ import PromptPanel from "../components/ai/PromptPanel.vue"
 import ExternalAIPanel from "../components/ai/ExternalAIPanel.vue"
 import Preview from "../components/editor/Preview.vue"
 import TaskStatsModal from "../components/task/TaskStatsModal.vue"
-import { Challenge, Submission } from "../api"
+import { Challenge, Submission, TaskAssets } from "../api"
+import type { TaskAsset } from "../utils/type"
 import { html, css, js } from "../store/editors"
 import { taskId, taskTab, challengeDisplay } from "../store/task"
 import { TASK_TYPE } from "../utils/const"
@@ -104,6 +126,12 @@ const activeTab = ref("desc")
 const challengeContent = ref("")
 const showCode = ref(false)
 const showStats = ref(false)
+const showAssets = ref(false)
+const assets = ref<TaskAsset[]>([])
+
+const assetBaseUrl = computed(
+  () => `/media/tasks/challenge/${challengeDisplay.value}/`,
+)
 
 watch(streaming, (val) => {
   if (val) activeTab.value = "chat"
@@ -116,6 +144,7 @@ async function loadChallenge() {
   const data = await Challenge.get(display)
   taskId.value = data.task_ptr
   challengeContent.value = await marked.parse(data.content, { async: true })
+  assets.value = await TaskAssets.listChallenge(display)
   if (!authed.value) return
   connectPrompt(data.task_ptr)
   setOnCodeComplete(async (code) => {

src/pages/ChallengeEditor.vue

@@ -72,8 +72,13 @@
             </n-button>
           </n-form-item>
         </n-form>
+        <TaskAssetManager
+          v-if="challenge.display"
+          task-type="challenge"
+          :display="challenge.display"
+        />
         <MarkdownEditor
-          style="height: calc(100vh - 90px)"
+          style="height: calc(100vh - 220px)"
           v-model="challenge.content"
         />
       </n-flex>
@@ -88,6 +93,7 @@ import { Challenge } from "../api"
 import type { ChallengeSlim } from "../utils/type"
 import { useDialog, useMessage } from "naive-ui"
 import MarkdownEditor from "../components/dashboard/MarkdownEditor.vue"
+import TaskAssetManager from "../components/task/TaskAssetManager.vue"
 
 const route = useRoute()
 const router = useRouter()

src/pages/TutorialEditor.vue

@@ -58,8 +58,13 @@
             </n-button>
           </n-form-item>
         </n-form>
+        <TaskAssetManager
+          v-if="tutorial.display"
+          task-type="tutorial"
+          :display="tutorial.display"
+        />
         <MarkdownEditor
-          style="height: calc(100vh - 90px)"
+          style="height: calc(100vh - 220px)"
           v-model="tutorial.content"
         />
       </n-flex>
@@ -74,6 +79,7 @@ import { Tutorial } from "../api"
 import type { TutorialSlim } from "../utils/type"
 import { useDialog, useMessage } from "naive-ui"
 import MarkdownEditor from "../components/dashboard/MarkdownEditor.vue"
+import TaskAssetManager from "../components/task/TaskAssetManager.vue"
 
 const route = useRoute()
 const router = useRouter()

src/pages/Workspace.vue

@@ -9,7 +9,12 @@
           <Editors />
         </template>
         <template #2>
-          <Preview :html="html" :css="css" :js="js" />
+          <Preview
+            :html="html"
+            :css="css"
+            :js="js"
+            :asset-base-url="assetBaseUrl"
+          />
         </template>
       </n-split>
     </template>
@@ -22,6 +27,7 @@ import Preview from "../components/editor/Preview.vue"
 import TaskPanel from "../components/task/TaskPanel.vue"
 import { show, panelSize } from "../store/panel"
 import { html, css, js } from "../store/editors"
+import { assetBaseUrl } from "../store/task"
 
 const { ctrl_s } = useMagicKeys({
   passive: false,

src/store/task.ts

@@ -9,3 +9,4 @@ const currentTask = window.location.pathname.startsWith("/challenge")
 export const taskTab = ref(currentTask)
 export const taskId = ref(0)
 export const challengeDisplay = useStorage("challenge-display", 0)
+export const assetBaseUrl = ref("")

src/utils/type.ts

@@ -27,6 +27,11 @@ export function getRole(role: Role) {
 
 export type FlagType = "red" | "blue" | "green" | "yellow" | null
 
+export interface TaskAsset {
+  name: string
+  url: string
+}
+
 export interface TutorialSlim {
   display: number
   title: string