update

src/pages/Challenge.vue

@@ -1 +0,0 @@
-<template>Dashboard Challenge</template>

src/pages/ChallengeEditor.vue

@@ -0,0 +1,182 @@
+<template>
+  <n-grid x-gap="10" :cols="8">
+    <n-gi :span="2" class="col">
+      <n-flex vertical class="list">
+        <n-card
+          v-for="item in list"
+          :key="item.display"
+          @click="show(item.display)"
+          class="card"
+          :header-style="{
+            backgroundColor:
+              item.display === challenge.display
+                ? 'rgba(24, 160, 80, 0.1)'
+                : '',
+          }"
+          :embedded="!item.is_public"
+        >
+          <template #header>
+            <n-flex align="center">
+              <n-button text @click.stop="togglePublic(item.display)">
+                <Icon
+                  width="24"
+                  :icon="
+                    item.is_public
+                      ? 'twemoji:check-mark-button'
+                      : 'twemoji:locked'
+                  "
+                ></Icon>
+              </n-button>
+              <span>【{{ item.display }}】{{ item.title }}</span>
+              <n-tag size="small" type="warning">{{ item.score }}分</n-tag>
+            </n-flex>
+          </template>
+          <template #header-extra>
+            <n-button text type="default" @click="remove(item.display)">
+              <Icon width="20" icon="material-symbols:close-rounded"></Icon>
+            </n-button>
+          </template>
+        </n-card>
+        <n-button @click="createNew">新建</n-button>
+      </n-flex>
+    </n-gi>
+
+    <n-gi :span="6" class="col">
+      <n-flex vertical>
+        <n-form inline>
+          <n-form-item label="序号" label-placement="left">
+            <n-input-number v-model:value="challenge.display" />
+          </n-form-item>
+
+          <n-form-item label="标题" label-placement="left">
+            <n-input v-model:value="challenge.title" />
+          </n-form-item>
+
+          <n-form-item label="分数" label-placement="left">
+            <n-input-number v-model:value="challenge.score" :min="0" />
+          </n-form-item>
+
+          <n-form-item label="公开" label-placement="left">
+            <n-switch v-model:value="challenge.is_public" />
+          </n-form-item>
+          <n-form-item label-placement="left">
+            <n-button type="primary" @click="submit" :disabled="!canSubmit">
+              提交
+            </n-button>
+          </n-form-item>
+        </n-form>
+        <MarkdownEditor
+          style="height: calc(100vh - 90px)"
+          v-model="challenge.content"
+        />
+      </n-flex>
+    </n-gi>
+  </n-grid>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { Icon } from "@iconify/vue"
+import { Challenge } from "../api"
+import type { ChallengeSlim } from "../utils/type"
+import { useDialog, useMessage } from "naive-ui"
+import MarkdownEditor from "../components/dashboard/MarkdownEditor.vue"
+
+const route = useRoute()
+const router = useRouter()
+const message = useMessage()
+const confirm = useDialog()
+
+const list = ref<ChallengeSlim[]>([])
+const challenge = reactive({
+  display: 0,
+  title: "",
+  content: "",
+  score: 0,
+  is_public: false,
+})
+
+const canSubmit = computed(
+  () => challenge.display && challenge.title && challenge.content,
+)
+async function getContent() {
+  list.value = await Challenge.list()
+  show(Number(route.params.display))
+}
+
+function createNew() {
+  challenge.display = list.value[list.value.length - 1]?.display ?? 0 + 1
+  challenge.title = ""
+  challenge.content = ""
+  challenge.score = 0
+  challenge.is_public = false
+}
+
+async function submit() {
+  try {
+    await Challenge.createOrUpdate(challenge)
+    message.success("提交成功")
+    challenge.display = 0
+    challenge.title = ""
+    challenge.content = ""
+    challenge.score = 0
+    challenge.is_public = false
+    await getContent()
+  } catch (error: any) {
+    message.error(error.response.data.detail)
+  }
+}
+
+async function remove(display: number) {
+  confirm.warning({
+    title: "警告",
+    content: "你确定要删除吗？",
+    positiveText: "确定",
+    negativeText: "取消",
+    onPositiveClick: async () => {
+      await Challenge.remove(display)
+      message.success("删除成功")
+      getContent()
+    },
+  })
+}
+
+async function show(display: number) {
+  router.push({ name: "challenge-editor", params: { display } })
+  const item = await Challenge.get(display)
+  challenge.display = item.display
+  challenge.title = item.title
+  challenge.content = item.content
+  challenge.score = item.score
+  challenge.is_public = item.is_public
+}
+
+async function togglePublic(display: number) {
+  const data = await Challenge.togglePublic(display)
+  message.success(data.message)
+  list.value = list.value.map((item) => {
+    if (item.display === display) item.is_public = !item.is_public
+    return item
+  })
+}
+
+onMounted(getContent)
+</script>
+<style scoped>
+.list {
+  overflow: auto;
+  height: calc(100vh - 20px);
+}
+
+.col {
+  padding-top: 10px;
+}
+
+.card {
+  cursor: pointer;
+}
+
+.editor {
+  height: calc(100vh - 200px);
+}
+</style>

src/pages/Dashboard.vue

@@ -26,9 +26,12 @@ import { goHome } from "../utils/helper"
 const menu = [
   {
     label: "教程",
-    route: { name: "tutorial", params: { display: step.value } },
+    route: { name: "tutorial-editor", params: { display: step.value } },
+  },
+  {
+    label: "挑战",
+    route: { name: "challenge-editor", params: { display: 0 } },
   },
-  { label: "挑战", route: { name: "challenge" } },
   { label: "用户", route: { name: "user-manage", params: { page: 1 } } },
   { label: "提交", route: { name: "submissions", params: { page: 1 } } },
 ]

src/pages/Submissions.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-grid class="container" x-gap="10" :cols="2">
+  <n-grid class="container" x-gap="10" :cols="3">
     <n-gi :span="1">
       <n-flex vertical>
         <n-flex justify="space-between">
@@ -23,10 +23,16 @@
             </n-pagination>
           </n-flex>
         </n-flex>
-        <n-data-table striped :columns="columns" :data="data"></n-data-table>
+        <n-data-table
+          striped
+          :columns="columns"
+          :data="data"
+          :row-props="rowProps"
+          :row-class-name="rowClassName"
+        ></n-data-table>
       </n-flex>
     </n-gi>
-    <n-gi :span="1">
+    <n-gi :span="2">
       <Preview
         v-if="submission.id"
         :html="html"
@@ -59,7 +65,7 @@
   </n-modal>
 </template>
 <script setup lang="ts">
-import { NButton, type DataTableColumn } from "naive-ui"
+import { type DataTableColumn } from "naive-ui"
 import { computed, h, onMounted, onUnmounted, reactive, ref, watch } from "vue"
 import { Submission } from "../api"
 import type { SubmissionOut } from "../utils/type"
@@ -125,22 +131,19 @@ const columns: DataTableColumn<SubmissionOut>[] = [
       else return "-"
     },
   },
-  {
-    title: "效果",
-    key: "code",
-    render: (row) =>
-      h(
-        NButton,
-        {
-          quaternary: submission.value.id !== row.id,
-          type: submission.value.id === row.id ? "primary" : "default",
-          onClick: () => getSubmissionByID(row.id),
-        },
-        () => "查看",
-      ),
-  },
 ]
 
+function rowProps(row: SubmissionOut) {
+  return {
+    style: { cursor: "pointer" },
+    onClick: () => getSubmissionByID(row.id),
+  }
+}
+
+function rowClassName(row: SubmissionOut) {
+  return submission.value.id === row.id ? "row-active" : ""
+}
+
 async function init() {
   const res = await Submission.list(query)
   data.value = res.items
@@ -208,4 +211,8 @@ onUnmounted(() => {
   box-sizing: border-box;
   height: calc(100% - 43px);
 }
+
+:deep(.row-active td) {
+  background-color: rgba(24, 160, 80, 0.1) !important;
+}
 </style>

src/pages/TutorialEditor.vue

@@ -135,7 +135,7 @@ async function remove(display: number) {
 }
 
 async function show(display: number) {
-  router.push({ name: "tutorial", params: { display } })
+  router.push({ name: "tutorial-editor", params: { display } })
   const item = await Tutorial.get(display)
   tutorial.display = item.display
   tutorial.title = item.title