add admin

src/admin/problemset/edit.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { NForm, NFormItem, NInput, NSelect, NSwitch, NButton, NCard } from "naive-ui"
-import { ProblemSet, CreateProblemSetData, EditProblemSetData } from "utils/types"
+import { CreateProblemSetData, EditProblemSetData } from "utils/types"
 import { getProblemSetDetail, createProblemSet, editProblemSet } from "../api"
 
 const route = useRoute()
@@ -10,12 +9,12 @@ const message = useMessage()
 const problemSetId = computed(() => Number(route.params.problemSetId))
 const isEdit = computed(() => !!problemSetId.value)
 
-const formData = ref<CreateProblemSetData & EditProblemSetData>({
+const formData = ref<CreateProblemSetData & Partial<EditProblemSetData>>({
   title: "",
   description: "",
   difficulty: "Easy",
-  is_public: true,
-  status: "active",
+  status: "draft",
+  visible: false,
 })
 
 const difficultyOptions = [
@@ -43,7 +42,6 @@ async function loadProblemSetDetail() {
       title: data.title,
       description: data.description,
       difficulty: data.difficulty,
-      is_public: data.is_public,
       status: data.status,
       visible: data.visible,
     }
@@ -53,12 +51,12 @@ async function loadProblemSetDetail() {
 }
 
 async function handleSubmit() {
-  if (!formData.value.title.trim()) {
+  if (!formData.value.title?.trim()) {
     message.error("请输入题单标题")
     return
   }
 
-  if (!formData.value.description.trim()) {
+  if (!formData.value.description?.trim()) {
     message.error("请输入题单描述")
     return
   }
@@ -75,7 +73,11 @@ async function handleSubmit() {
     }
     router.push({ name: "admin problemset list" })
   } catch (err: any) {
-    message.error((isEdit.value ? "更新" : "创建") + "题单失败：" + (err.data || "未知错误"))
+    message.error(
+      (isEdit.value ? "更新" : "创建") +
+        "题单失败：" +
+        (err.data || "未知错误"),
+    )
   } finally {
     loading.value = false
   }
@@ -89,25 +91,39 @@ onMounted(() => {
 </script>
 
 <template>
-  <n-card>
-    <template #header>
-      <n-flex align="center">
-        <n-button @click="router.back()" secondary>
-          ← 返回
-        </n-button>
-        <h2 class="title">{{ isEdit ? '编辑题单' : '创建题单' }}</h2>
-      </n-flex>
-    </template>
+  <div>
+    <h2 class="title">{{ isEdit ? "编辑题单" : "创建题单" }}</h2>
 
-    <n-form :model="formData" label-placement="left" label-width="100px">
-      <n-form-item label="题单标题" required>
-        <n-input
-          v-model:value="formData.title"
-          placeholder="请输入题单标题"
-          maxlength="200"
-          show-count
-        />
-      </n-form-item>
+    <n-form :model="formData" label-placement="top">
+      <n-flex>
+        <n-form-item label="题单标题" required>
+          <n-input
+            v-model:value="formData.title"
+            placeholder="请输入题单标题"
+            maxlength="200"
+            show-count
+          />
+        </n-form-item>
+        <n-form-item label="难度">
+          <n-select
+            style="width: 100px"
+            v-model:value="formData.difficulty"
+            :options="difficultyOptions"
+            placeholder="选择难度"
+          />
+        </n-form-item>
+        <n-form-item label="状态">
+          <n-select
+            style="width: 100px"
+            v-model:value="formData.status"
+            :options="statusOptions"
+            placeholder="选择状态"
+          />
+        </n-form-item>
+        <n-form-item v-if="isEdit" label="是否可见">
+          <n-switch v-model:value="formData.visible" />
+        </n-form-item>
+      </n-flex>
 
       <n-form-item label="题单描述" required>
         <n-input
@@ -117,51 +133,17 @@ onMounted(() => {
           :rows="4"
         />
       </n-form-item>
-
-      <n-form-item label="难度">
-        <n-select
-          v-model:value="formData.difficulty"
-          :options="difficultyOptions"
-          placeholder="选择难度"
-        />
-      </n-form-item>
-
-      <n-form-item label="状态">
-        <n-select
-          v-model:value="formData.status"
-          :options="statusOptions"
-          placeholder="选择状态"
-        />
-      </n-form-item>
-
-      <n-form-item label="是否公开">
-        <n-switch v-model:value="formData.is_public" />
-      </n-form-item>
-
-      <n-form-item v-if="isEdit" label="是否可见">
-        <n-switch v-model:value="formData.visible" />
-      </n-form-item>
-
       <n-form-item>
-        <n-flex gap="medium">
-          <n-button
-            type="primary"
-            :loading="loading"
-            @click="handleSubmit"
-          >
-            {{ isEdit ? '更新' : '创建' }}
-          </n-button>
-          <n-button @click="router.back()">
-            取消
-          </n-button>
-        </n-flex>
+        <n-button type="primary" :loading="loading" @click="handleSubmit">
+          {{ isEdit ? "更新" : "创建" }}
+        </n-button>
       </n-form-item>
     </n-form>
-  </n-card>
+  </div>
 </template>
 
 <style scoped>
 .title {
-  margin: 0;
+  margin: 0 0 16px 0;
 }
 </style>