use composables.

src/oj/problem/components/Editor.vue

@@ -1,29 +1,23 @@
 <script lang="ts" setup>
 import { SOURCES } from "utils/constants"
-import { Problem } from "utils/types"
 import { code } from "oj/composables/code"
 import { isDesktop } from "~/shared/composables/breakpoints"
-import Form from "./Form.vue"
+import { problem } from "oj/composables/problem"
 
+const Form = defineAsyncComponent(() => import("./Form.vue"))
 const CodeEditor = defineAsyncComponent(() => import("~/shared/CodeEditor.vue"))
 
-interface Props {
-  problem: Problem
-}
-
-const props = defineProps<Props>()
-
-code.language = props.problem.languages[0] || "C"
-code.value = props.problem.template[code.language] || SOURCES[code.language]
+code.language = problem.value!.languages[0] || "C"
+code.value = problem.value!.template[code.language] || SOURCES[code.language]
 
 const editorHeight = computed(() =>
-  isDesktop.value ? "calc(100vh - 133px)" : "calc(100vh - 180px)"
+  isDesktop.value ? "calc(100vh - 133px)" : "calc(100vh - 172px)"
 )
 </script>
 
 <template>
   <n-space vertical>
-    <Form :problem="props.problem" />
+    <Form />
     <CodeEditor
       v-model="code.value"
       :language="code.language"

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>

src/oj/problem/components/ProblemContent.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import Copy from "~/shared/Copy.vue"
 import { code } from "oj/composables/code"
+import { problem } from "oj/composables/problem"
 import { Problem, ProblemStatus } from "utils/types"
 import { createTestSubmission } from "utils/judge"
 import { useThemeVars } from "naive-ui"
 
-interface Props {
-  problem: Problem
-}
 type Sample = Problem["samples"][number] & {
   id: number
   msg: string
@@ -15,12 +13,11 @@ type Sample = Problem["samples"][number] & {
   loading: boolean
 }
 
-const props = defineProps<Props>()
 const theme = useThemeVars()
 const style = computed(() => "color: " + theme.value.primaryColor)
 
 const samples = ref<Sample[]>(
-  props.problem.samples.map((sample, index) => ({
+  problem.value!.samples.map((sample, index) => ({
     ...sample,
     id: index,
     msg: "",
@@ -90,74 +87,76 @@ function type(status: ProblemStatus) {
 </script>
 
 <template>
-  <n-alert
-    class="success"
-    v-if="problem.my_status === 0"
-    type="success"
-    title="🎉 本 题 已 经 被 你 解 决 啦"
-  />
+  <div v-if="problem">
+    <n-alert
+      class="success"
+      v-if="problem.my_status === 0"
+      type="success"
+      title="🎉 本 题 已 经 被 你 解 决 啦"
+    />
 
-  <n-space align="center">
-    <n-tag>{{ problem._id }}</n-tag>
-    <h1 class="problemTitle">{{ problem.title }}</h1>
-  </n-space>
-  <p class="title" :style="style">描述</p>
-  <div class="content" v-html="problem.description"></div>
-
-  <p class="title" :style="style">输入</p>
-  <div class="content" v-html="problem.input_description"></div>
-
-  <p class="title" :style="style">输出</p>
-  <div class="content" v-html="problem.output_description"></div>
-
-  <div v-if="problem.hint">
-    <p class="title" :style="style">提示</p>
-    <div class="content" v-html="problem.hint"></div>
-  </div>
-
-  <div v-for="(sample, index) of samples" :key="index">
     <n-space align="center">
-      <p class="title testcaseTitle" :style="style">测试用例 {{ index + 1 }}</p>
-      <n-button
-        size="small"
-        :type="type(sample.status)"
-        @click="test(sample, index)"
-      >
-        {{ label(sample.status, sample.loading) }}
-      </n-button>
+      <n-tag>{{ problem._id }}</n-tag>
+      <h2 class="problemTitle">{{ problem.title }}</h2>
     </n-space>
-    <n-descriptions
-      bordered
-      :column="2"
-      label-style="width: 50%; min-width: 100px"
-    >
-      <n-descriptions-item>
-        <template #label>
-          <n-space>
-            <span>输入</span>
-            <Copy :value="sample.input" />
-          </n-space>
-        </template>
-        <div class="testcase">{{ sample.input }}</div>
-      </n-descriptions-item>
-      <n-descriptions-item>
-        <template #label>
-          <n-space>
-            <span>输出</span>
-            <Copy :value="sample.output" />
-          </n-space>
-        </template>
-        <div class="testcase">{{ sample.output }}</div>
-      </n-descriptions-item>
-      <n-descriptions-item label="运行结果" v-if="sample.msg">
-        <div class="testcase">{{ sample.msg }}</div>
-      </n-descriptions-item>
-    </n-descriptions>
-  </div>
+    <p class="title" :style="style">描述</p>
+    <div class="content" v-html="problem.description"></div>
 
-  <div v-if="problem.source">
-    <p class="title" :style="style">来源</p>
-    <div class="content" v-html="problem.source"></div>
+    <p class="title" :style="style">输入</p>
+    <div class="content" v-html="problem.input_description"></div>
+
+    <p class="title" :style="style">输出</p>
+    <div class="content" v-html="problem.output_description"></div>
+
+    <div v-if="problem.hint">
+      <p class="title" :style="style">提示</p>
+      <div class="content" v-html="problem.hint"></div>
+    </div>
+
+    <div v-for="(sample, index) of samples" :key="index">
+      <n-space align="center">
+        <p class="title" :style="style">测试用例 {{ index + 1 }}</p>
+        <n-button
+          size="small"
+          :type="type(sample.status)"
+          @click="test(sample, index)"
+        >
+          {{ label(sample.status, sample.loading) }}
+        </n-button>
+      </n-space>
+      <n-descriptions
+        bordered
+        :column="2"
+        label-style="width: 50%; min-width: 100px"
+      >
+        <n-descriptions-item>
+          <template #label>
+            <n-space>
+              <span>输入</span>
+              <Copy :value="sample.input" />
+            </n-space>
+          </template>
+          <div class="testcase">{{ sample.input }}</div>
+        </n-descriptions-item>
+        <n-descriptions-item>
+          <template #label>
+            <n-space>
+              <span>输出</span>
+              <Copy :value="sample.output" />
+            </n-space>
+          </template>
+          <div class="testcase">{{ sample.output }}</div>
+        </n-descriptions-item>
+        <n-descriptions-item label="运行结果" v-if="sample.msg">
+          <div class="testcase">{{ sample.msg }}</div>
+        </n-descriptions-item>
+      </n-descriptions>
+    </div>
+
+    <div v-if="problem.source">
+      <p class="title" :style="style">来源</p>
+      <div class="content" v-html="problem.source"></div>
+    </div>
   </div>
 </template>
 
@@ -167,14 +166,10 @@ function type(status: ProblemStatus) {
 }
 
 .title {
-  font-size: 20px;
+  font-size: 16px;
   margin: 12px 0;
 }
 
-.testcaseTitle {
-  margin-bottom: 24px;
-}
-
 .content {
   font-size: 16px;
   line-height: 2;

src/oj/problem/components/ProblemInfo.vue

@@ -2,16 +2,11 @@
 import { Pie } from "vue-chartjs"
 import { DIFFICULTY, JUDGE_STATUS } from "utils/constants"
 import { getACRate, getTagColor, parseTime } from "utils/functions"
+import { problem } from "oj/composables/problem"
 import { isDesktop } from "~/shared/composables/breakpoints"
-import { Problem } from "utils/types"
-
-interface Props {
-  problem: Problem
-}
-const props = defineProps<Props>()
 
 const data = computed(() => {
-  const status = props.problem.statistic_info
+  const status = problem.value!.statistic_info
   const labels = []
   for (let i in status) {
     if (status[i] !== 0) {
@@ -33,7 +28,12 @@ const options = {
 </script>
 
 <template>
-  <n-descriptions bordered label-placement="left" :column="isDesktop ? 3 : 1">
+  <n-descriptions
+    bordered
+    label-placement="left"
+    :column="isDesktop ? 3 : 1"
+    v-if="problem"
+  >
     <n-descriptions-item label="编号">
       {{ problem._id }}
     </n-descriptions-item>
@@ -71,7 +71,7 @@ const options = {
       </n-space>
     </n-descriptions-item>
   </n-descriptions>
-  <div class="pie" v-if="problem.submission_number > 0">
+  <div class="pie" v-if="problem && problem.submission_number > 0">
     <Pie :data="data" :options="options" />
   </div>
 </template>

src/oj/problem/components/Submit.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { code } from "oj/composables/code"
 import party from "party-js"
-import { Ref } from "vue"
+import { code } from "oj/composables/code"
+import { problem } from "oj/composables/problem"
+import { isDesktop } from "~/shared/composables/breakpoints"
 import { JUDGE_STATUS, SubmissionStatus } from "utils/constants"
 import { submissionMemoryFormat, submissionTimeFormat } from "utils/functions"
-import { Problem, Submission, SubmitCodePayload } from "utils/types"
+import { Submission, SubmitCodePayload } from "utils/types"
 import { getSubmission, submitCode } from "oj/api"
 import SubmissionResultTag from "~/shared/SubmissionResultTag.vue"
 import { useUserStore } from "~/shared/store/user"
@@ -12,7 +13,6 @@ import { useUserStore } from "~/shared/store/user"
 const userStore = useUserStore()
 const route = useRoute()
 
-const problem = inject<Ref<Problem>>("problem")
 const contestID = <string>route.params.contestID ?? ""
 
 const submissionId = ref("")
@@ -92,7 +92,7 @@ const submitLabel = computed(() => {
   if (isPending.value) {
     return "运行结果"
   }
-  return "点击提交"
+  return "提交评测"
 })
 
 const msg = computed(() => {
@@ -160,7 +160,7 @@ async function submit() {
     return
   }
   const data: SubmitCodePayload = {
-    problem_id: problem!.value.id,
+    problem_id: problem.value!.id,
     language: code.language,
     code: code.value,
   }
@@ -199,7 +199,12 @@ watch(
     style="max-height: 600px"
   >
     <template #trigger>
-      <n-button type="primary" :disabled="submitDisabled" @click="submit">
+      <n-button
+        :size="isDesktop ? 'medium' : 'small'"
+        type="primary"
+        :disabled="submitDisabled"
+        @click="submit"
+      >
         <template #icon>
           <n-icon>
             <i-ep-loading v-if="judging || pending || submitting" />

src/oj/problem/detail.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { getProblem } from "oj/api"
 import { isDesktop } from "~/shared/composables/breakpoints"
-import { Problem } from "utils/types"
+import { problem } from "../composables/problem"
 
 const Editor = defineAsyncComponent(() => import("./components/Editor.vue"))
 const ProblemContent = defineAsyncComponent(
@@ -19,7 +19,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   contestID: "",
 })
-const problem = ref<Problem | null>(null)
+
 const errMsg = ref("无数据")
 
 async function init() {
@@ -34,7 +34,6 @@ async function init() {
   }
 }
 onMounted(init)
-provide("problem", readonly(problem))
 </script>
 
 <template>
@@ -43,27 +42,27 @@ provide("problem", readonly(problem))
       <n-scrollbar v-if="isDesktop" style="max-height: calc(100vh - 92px)">
         <n-tabs default-value="content" type="segment">
           <n-tab-pane name="content" tab="题目描述">
-            <ProblemContent :problem="problem" />
+            <ProblemContent />
           </n-tab-pane>
-          <n-tab-pane name="info" tab="题目信息">
-            <ProblemInfo :problem="problem" />
+          <n-tab-pane name="info" tab="题目统计">
+            <ProblemInfo />
           </n-tab-pane>
         </n-tabs>
       </n-scrollbar>
       <n-tabs v-else default-value="content" type="segment">
         <n-tab-pane name="content" tab="题目描述">
-          <ProblemContent :problem="problem" />
+          <ProblemContent />
         </n-tab-pane>
         <n-tab-pane name="editor" tab="代码编辑">
-          <Editor :problem="problem" />
+          <Editor />
         </n-tab-pane>
-        <n-tab-pane name="info" tab="题目信息">
-          <ProblemInfo :problem="problem" />
+        <n-tab-pane name="info" tab="题目统计">
+          <ProblemInfo />
         </n-tab-pane>
       </n-tabs>
     </n-gi>
     <n-gi v-if="isDesktop">
-      <Editor :problem="problem" />
+      <Editor />
     </n-gi>
   </n-grid>
   <n-empty v-else :description="errMsg"></n-empty>