add asset

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">{{
-            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>
         </template>
       </n-flex>
       <n-flex>
-        <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">
-          <Icon :width="16" icon="lucide:edit"></Icon>
-        </n-button>
-        <n-button text @click="$emit('hide')">
-          <Icon :width="24" icon="material-symbols:close-rounded"></Icon>
-        </n-button>
+        <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
+              text
+              @click="$router.push({ name: 'submissions', params: { page: 1 } })"
+            >
+              <Icon :width="16" icon="lucide:list"></Icon>
+            </n-button>
+          </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 })
 }