use composables.

src/oj/problem/components/Form.vue

@@ -1,16 +1,11 @@
 <script setup lang="ts">
 import { LANGUAGE_SHOW_VALUE, SOURCES } from "utils/constants"
-import { Problem } from "utils/types"
 import { code } from "oj/composables/code"
+import { problem } from "oj/composables/problem"
 import { isDesktop, isMobile } from "~/shared/composables/breakpoints"
-import Submit from "./Submit.vue"
 import { useUserStore } from "~/shared/store/user"
+import Submit from "./Submit.vue"
 
-interface Props {
-  problem: Problem
-}
-
-const props = defineProps<Props>()
 const route = useRoute()
 const router = useRouter()
 const userStore = useUserStore()
@@ -18,12 +13,12 @@ const userStore = useUserStore()
 watch(() => code.language, reset)
 
 function reset() {
-  code.value = props.problem.template[code.language] || SOURCES[code.language]
+  code.value = problem.value!.template[code.language] || SOURCES[code.language]
 }
 
 function goSubmissions() {
   const name = !!route.params.contestID ? "contest submissions" : "submissions"
-  router.push({ name, query: { problem: props.problem._id } })
+  router.push({ name, query: { problem: problem.value!._id } })
 }
 
 function goTestCat() {
@@ -32,17 +27,16 @@ function goTestCat() {
 }
 
 function goEdit() {
-  const data = router.resolve("/admin/problem/edit/" + props.problem.id)
+  const data = router.resolve("/admin/problem/edit/" + problem.value!.id)
   window.open(data.href, "_blank")
 }
 
 const menu: DropdownOption[] = [
-  { label: "重置", key: "reset" },
   { label: "提交信息", key: "submissions" },
   { label: "自测猫", key: "testcat" },
 ]
 
-const options: DropdownOption[] = props.problem.languages.map((it) => ({
+const options: DropdownOption[] = problem.value!.languages.map((it) => ({
   label: () => [
     h("img", {
       src: `/${it}.svg`,
@@ -60,9 +54,6 @@ const options: DropdownOption[] = props.problem.languages.map((it) => ({
 
 function select(key: string) {
   switch (key) {
-    case "reset":
-      reset()
-      break
     case "submissions":
       goSubmissions()
       break
@@ -77,17 +68,21 @@ function select(key: string) {
   <n-space>
     <n-select
       class="language"
+      :size="isDesktop ? 'medium' : 'small'"
       v-model:value="code.language"
       :options="options"
     />
     <Submit />
+    <n-button :size="isDesktop ? 'medium' : 'small'" @click="reset">
+      重置
+    </n-button>
     <n-dropdown
       v-if="isMobile"
       trigger="click"
       :options="menu"
       @select="select"
     >
-      <n-button>
+      <n-button :size="isDesktop ? 'medium' : 'small'">
         <template #icon>
           <n-icon>
             <i-ep-more-filled />
@@ -95,11 +90,16 @@ function select(key: string) {
         </template>
       </n-button>
     </n-dropdown>
-    <n-button v-if="isDesktop" @click="reset">重置</n-button>
-    <n-button v-if="isDesktop" @click="goSubmissions">提交信息</n-button>
-    <n-button v-if="isDesktop" type="info" @click="goTestCat">自测猫</n-button>
+    <n-button
+      :size="isDesktop ? 'medium' : 'small'"
+      v-if="isDesktop"
+      @click="goSubmissions"
+    >
+      提交信息
+    </n-button>
     <n-button
       type="warning"
+      :size="isDesktop ? 'medium' : 'small'"
       v-if="isDesktop && userStore.isSuperAdmin"
       @click="goEdit"
     >
@@ -110,6 +110,6 @@ function select(key: string) {
 
 <style scoped>
 .language {
-  width: 140px;
+  width: 120px;
 }
 </style>