fix editor

src/oj/problem/components/EditorForTest.vue

@@ -3,10 +3,13 @@ import { code, input, output } from "oj/composables/code"
 import { problem } from "oj/composables/problem"
 import { SOURCES } from "utils/constants"
 import CodeEditor from "shared/components/CodeEditor.vue"
-import { isDesktop } from "shared/composables/breakpoints"
 import storage from "utils/storage"
-import Form from "./Form.vue"
+import { createTestSubmission } from "utils/judge"
+import { LANGUAGE_SHOW_VALUE } from "utils/constants"
+import type { DropdownOption } from "naive-ui"
+import { copyToClipboard } from "utils/functions"
 
+const message = useMessage()
 const route = useRoute()
 const contestID = !!route.params.contestID ? route.params.contestID : null
 
@@ -24,10 +27,6 @@ onMounted(() => {
   }
 })
 
-const editorHeight = computed(() =>
-  isDesktop.value ? "calc(100vh - 133px)" : "calc(100vh - 172px)",
-)
-
 function changeCode(v: string) {
   storage.set(storageKey.value, v)
 }
@@ -43,23 +42,64 @@ function changeLanguage(v: string) {
       problem.value!.template[code.language] || SOURCES[code.language]
   }
 }
+
+const copy = async () => {
+  const success = await copyToClipboard(code.value)
+  message[success ? "success" : "error"](`代码复制${success ? "成功" : "失败"}`)
+}
+
+const reset = () => {
+  code.value = problem.value!.template[code.language] || SOURCES[code.language]
+  storage.remove(storageKey.value)
+  message.success("代码重置成功")
+}
+
+const runCode = async () => {
+  const res = await createTestSubmission(code, input.value)
+  output.value = res.output
+}
+
+const languageOptions: DropdownOption[] = problem.value!.languages.map(
+  (it) => ({
+    label: () =>
+      h("div", { style: "display: flex; align-items: center;" }, [
+        h("img", {
+          src: `/${it}.svg`,
+          style: { width: "16px", height: "16px", marginRight: "8px" },
+        }),
+        LANGUAGE_SHOW_VALUE[it],
+      ]),
+    value: it,
+  }),
+)
 </script>
 
 <template>
-  <n-flex vertical>
-    <Form
-      :storage-key="storageKey"
-      @change-language="changeLanguage"
-      with-test
-    />
+  <n-flex vertical style="height: calc(100vh - 92px)">
     <n-split direction="horizontal" :min="1 / 3" :max="4 / 5">
       <template #1>
+        <n-flex vertical>
+          <n-flex align="center">
+            <n-select
+              v-model:value="code.language"
+              style="width: 120px"
+              :options="languageOptions"
+              @update:value="changeLanguage"
+            />
+            <n-button @click="copy">
+              复制代码
+            </n-button>
+            <n-button @click="reset">重置代码</n-button>
+            <n-button type="primary" secondary @click="runCode">
+              运行代码
+            </n-button>
+          </n-flex>
           <CodeEditor
             v-model:value="code.value"
             @update:model-value="changeCode"
             :language="code.language"
-          :height="editorHeight"
           />
+        </n-flex>
       </template>
       <template #2>
         <n-split

src/oj/problem/components/Form.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { copyToClipboard } from "utils/functions"
-import { code, input, output } from "oj/composables/code"
+import { code } from "oj/composables/code"
 import { problem } from "oj/composables/problem"
 import { injectSyncStatus } from "oj/composables/syncStatus"
 import { SYNC_MESSAGES } from "shared/composables/sync"
 import { LANGUAGE_SHOW_VALUE, SOURCES, STORAGE_KEY } from "utils/constants"
 import { isDesktop, isMobile } from "shared/composables/breakpoints"
 import { useUserStore } from "shared/store/user"
-import { createTestSubmission } from "utils/judge"
 import storage from "utils/storage"
 import { LANGUAGE } from "utils/types"
 import Submit from "./Submit.vue"
@@ -16,12 +15,10 @@ import IconButton from "shared/components/IconButton.vue"
 
 interface Props {
   storageKey: string
-  withTest?: boolean
   isConnected?: boolean // WebSocket 实际的连接状态（已建立/未建立）
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  withTest: false,
   isConnected: false,
 })
 
@@ -68,7 +65,6 @@ const languageOptions: DropdownOption[] = problem.value!.languages.map(
   }),
 )
 
-// 代码操作相关
 const copy = async () => {
   const success = await copyToClipboard(code.value)
   message[success ? "success" : "error"](`代码复制${success ? "成功" : "失败"}`)
@@ -85,12 +81,6 @@ const changeLanguage = (v: LANGUAGE) => {
   emit("changeLanguage", v)
 }
 
-const runCode = async () => {
-  const res = await createTestSubmission(code, input.value)
-  output.value = res.output
-}
-
-// 导航相关
 const goTestCat = () => {
   window.open(import.meta.env.PUBLIC_CODE_URL, "_blank")
 }
@@ -107,7 +97,6 @@ const goEdit = () => {
   window.open(router.resolve(url).href, "_blank")
 }
 
-// 菜单处理
 const handleMenuSelect = (key: string) => {
   const actions: Record<string, () => void> = {
     reset,
@@ -117,7 +106,6 @@ const handleMenuSelect = (key: string) => {
   actions[key]?.()
 }
 
-// 协同编辑相关
 const toggleSync = () => {
   syncEnabled.value = !syncEnabled.value
   emit("toggleSync", syncEnabled.value)
@@ -132,21 +120,14 @@ defineExpose({
 
 <template>
   <n-flex align="center">
-    <!-- 语言选择器 -->
     <n-select
       v-model:value="code.language"
-      class="language"
+      style="width: 120px"
       :size="buttonSize"
       :options="languageOptions"
       @update:value="changeLanguage"
     />
 
-    <template v-if="withTest">
-      <n-button @click="reset">重置代码</n-button>
-      <n-button type="primary" secondary @click="runCode">运行代码</n-button>
-    </template>
-
-    <n-flex v-else align="center">
     <Submit />
 
     <n-button
@@ -178,7 +159,6 @@ defineExpose({
       @click="goEdit"
     />
 
-      <!-- 协同编辑功能（仅在非比赛模式） -->
     <template v-if="showSyncFeature">
       <IconButton
         :icon="
@@ -209,7 +189,6 @@ defineExpose({
       </template>
     </template>
   </n-flex>
-  </n-flex>
 
   <n-modal
     v-if="userStore.isSuperAdmin"
@@ -222,9 +201,3 @@ defineExpose({
     <StatisticsPanel :problem="problem!._id" username="" />
   </n-modal>
 </template>
-
-<style scoped>
-.language {
-  width: 120px;
-}
-</style>

src/oj/problem/detail.vue

@@ -15,8 +15,8 @@ const ProblemEditor = defineAsyncComponent(
 const ContestEditor = defineAsyncComponent(
   () => import("./components/ContestEditor.vue"),
 )
-const EditorWithTest = defineAsyncComponent(
-  () => import("./components/EditorWithTest.vue"),
+const EditorForTest = defineAsyncComponent(
+  () => import("./components/EditorForTest.vue"),
 )
 const ProblemContent = defineAsyncComponent(
   () => import("./components/ProblemContent.vue"),
@@ -151,7 +151,7 @@ watch(isMobile, (value) => {
       <ContestEditor v-else />
     </n-gi>
     <n-gi v-if="isDesktop && screenMode === ScreenMode.code">
-      <EditorWithTest />
+      <EditorForTest />
     </n-gi>
   </n-grid>
   <n-empty v-else :description="errMsg"></n-empty>