refactor editor and panel.

src/oj/problem/components/Editor.vue

@@ -3,12 +3,17 @@ import { SOURCES } from "utils/constants"
 import { Problem } from "utils/types"
 import Monaco from "~/shared/Monaco.vue"
 import { code } from "oj/composables/code"
+import { isDesktop, isMobile } from "~/shared/composables/breakpoints"
+import { DropdownOption } from "naive-ui"
+
+const Submit = defineAsyncComponent(() => import("./Submit.vue"))
 
 interface Props {
   problem: Problem
 }
 
 const props = defineProps<Props>()
+const router = useRouter()
 
 code.language = props.problem.languages[0] || "C"
 code.value = props.problem.template[code.language] || SOURCES[code.language]
@@ -22,8 +27,10 @@ function reset() {
 function change(value: string) {
   code.value = value
 }
-
-const options = props.problem.languages.map((it) => ({
+function goSubmissions() {
+  router.push(`/submission?problem=${props.problem._id}`)
+}
+const options: DropdownOption[] = props.problem.languages.map((it) => ({
   label: () => [
     h("img", {
       src: `/${it}.svg`,
@@ -38,11 +45,27 @@ const options = props.problem.languages.map((it) => ({
   ],
   value: it,
 }))
+
+const menu: DropdownOption[] = [
+  { label: "重置", key: "reset" },
+  { label: "提交信息", key: "submissions" },
+]
+
+function select(key: string) {
+  switch (key) {
+    case "reset":
+      reset()
+      break
+    case "submissions":
+      goSubmissions()
+      break
+  }
+}
 </script>
 
 <template>
   <n-form inline label-placement="left">
-    <n-form-item label="语言">
+    <n-form-item :label="isDesktop ? '语言' : ''">
       <n-select
         class="language"
         v-model:value="code.language"
@@ -50,11 +73,26 @@ const options = props.problem.languages.map((it) => ({
       />
     </n-form-item>
     <n-form-item>
+      <Submit />
+    </n-form-item>
+    <n-dropdown
+      v-if="isMobile"
+      trigger="click"
+      :options="menu"
+      @select="select"
+    >
+      <n-button>
+        <template #icon>
+          <n-icon>
+            <i-ep-more-filled />
+          </n-icon>
+        </template>
+      </n-button>
+    </n-dropdown>
+    <n-form-item v-if="isDesktop">
       <n-space>
         <n-button @click="reset">重置</n-button>
-        <n-button @click="$router.push(`/submission?problem=${problem._id}`)">
-          提交信息
-        </n-button>
+        <n-button @click="goSubmissions">提交信息</n-button>
       </n-space>
     </n-form-item>
   </n-form>
@@ -63,7 +101,7 @@ const options = props.problem.languages.map((it) => ({
     :language="code.language"
     :value="code.value"
     @change="change"
-    height="calc(100vh - 594px)"
+    height="calc(100vh - 200px)"
   />
 </template>