update

src/api.ts

@@ -1,5 +1,5 @@
 import axios from "axios"
-import { Code } from "./types"
+import { Code, Submission } from "./types"
 import { deadResults, languageToId } from "./templates"
 
 function getChromeVersion() {
@@ -42,7 +42,7 @@ export async function submit(code: Code, input: string) {
       redirect_stderr_to_stdout: true,
       compiler_options: compilerOptions,
     }
-    const response = await http.post("/submissions", payload, {
+    const response = await http.post<Submission>("/submissions", payload, {
       params: { base64_encoded: true, wait: true },
     })
     const data = response.data

src/components/CodeEditor.vue

@@ -57,7 +57,10 @@ function onChange(v: string) {
 </script>
 <template>
   <div class="container">
-    <div class="title">{{ label }}</div>
+    <n-flex align="center" class="title">
+      <span>{{ label }}</span>
+      <slot name="actions"></slot>
+    </n-flex>
     <Codemirror
       v-model="code"
       indentWithTab
@@ -76,6 +79,10 @@ function onChange(v: string) {
 }
 .title {
   padding: 12px 20px;
+  height: 60px;
+  box-sizing: border-box;
+}
+.title > span {
   font-size: 16px;
 }
 </style>

src/composables/code.ts

@@ -1,6 +1,6 @@
-import { ref } from "vue"
+import { computed, ref, watch } from "vue"
 import copyTextToClipboard from "copy-text-to-clipboard"
-import { Code, LANGUAGE, Cache } from "../types"
+import { Code, LANGUAGE, Cache, Status } from "../types"
 import { sources } from "../templates"
 import { submit } from "../api"
 import { useStorage } from "@vueuse/core"
@@ -10,11 +10,10 @@ const defaultLanguage = "python"
 const cache: Cache = {
   language: useStorage<LANGUAGE>("code_language", defaultLanguage),
   input: useStorage("code_input", ""),
+  fontsize: useStorage("fontsize", 24),
   code: {
     python: useStorage("code_python", sources["python"]),
     c: useStorage("code_c", sources["c"]),
-    java: useStorage("code_java", sources["java"]),
-    cpp: useStorage("code_cpp", sources["cpp"]),
   },
 }
 
@@ -25,35 +24,58 @@ export const code = ref<Code>({
 export const input = ref(cache.input.value)
 export const output = ref("")
 export const loading = ref(false)
+export const size = ref(24)
+export const status = ref(Status.NotStarted)
+
+export const showStatus = computed(
+  () => ![Status.Accepted, Status.NotStarted].includes(status.value),
+)
+
+watch(size, (value: number) => {
+  cache.fontsize.value = value
+})
+
+watch(
+  () => code.value.language,
+  (value: LANGUAGE) => {
+    cache.language.value = value
+    code.value.value = cache.code[value].value
+    output.value = ""
+  },
+)
+
+watch(
+  () => code.value.value,
+  (value: string) => {
+    cache.code[code.value.language].value = value
+  },
+)
+
+watch(input, (value: string) => {
+  cache.input.value = value
+})
 
 export function init() {
   code.value.language = cache.language.value
   code.value.value = cache.code[code.value.language].value
   input.value = cache.input.value
+  size.value = cache.fontsize.value
+  status.value = Status.NotStarted
 }
 
 export function copy() {
   copyTextToClipboard(code.value.value)
 }
 
+export function clearInput() {
+  input.value = ""
+}
+
 export function reset() {
   code.value.value = sources[code.value.language]
   cache.code[code.value.language].value = sources[code.value.language]
   output.value = ""
-}
-
-export function changeLanguage(language: LANGUAGE) {
-  cache.language.value = language
-  code.value.value = cache.code[language].value
-  output.value = ""
-}
-
-export function changeCode(value: string) {
-  cache.code[code.value.language].value = value
-}
-
-export function changeInput(value: string) {
-  cache.input.value = value
+  status.value = Status.NotStarted
 }
 
 export async function run() {
@@ -66,5 +88,6 @@ export async function run() {
     input.value.trim(),
   )
   output.value = result.output || ""
+  status.value = result.status
   loading.value = false
 }

src/desktop/Content.vue

@@ -1,16 +1,27 @@
 <script lang="ts" setup>
 import {
   code,
+  size,
   init,
   input,
   output,
-  changeCode,
-  changeInput,
+  reset,
+  copy,
+  clearInput,
+  showStatus,
 } from "../composables/code"
 import CodeEditor from "../components/CodeEditor.vue"
 import { onMounted } from "vue"
+import { useMessage } from "naive-ui"
 
 onMounted(init)
+
+const message = useMessage()
+
+function copyAndNotify() {
+  copy()
+  message.success("已经复制好了")
+}
 </script>
 
 <template>
@@ -19,10 +30,17 @@ onMounted(init)
       <template #1>
         <CodeEditor
           label="代码区"
+          :font-size="size"
           v-model="code.value"
-          @update:model-value="changeCode"
           :language="code.language"
-        />
+        >
+          <template #actions>
+            <n-button quaternary type="primary" @click="copyAndNotify">
+              复制
+            </n-button>
+            <n-button quaternary @click="reset">重置</n-button>
+          </template>
+        </CodeEditor>
       </template>
       <template #2>
         <n-split
@@ -32,14 +50,32 @@ onMounted(init)
           :max="3 / 5"
         >
           <template #1>
-            <CodeEditor
-              label="输入框"
-              v-model="input"
-              @update:model-value="changeInput"
-            />
+            <CodeEditor label="输入框" :font-size="size" v-model="input">
+              <template #actions>
+                <n-button quaternary type="primary" @click="clearInput">
+                  清空
+                </n-button>
+              </template>
+            </CodeEditor>
           </template>
           <template #2>
-            <CodeEditor label="输出框" v-model="output" readonly />
+            <CodeEditor
+              label="输出框"
+              v-model="output"
+              readonly
+              :font-size="size"
+            >
+              <template #actions>
+                <n-button
+                  quaternary
+                  type="error"
+                  @click="null"
+                  v-if="showStatus"
+                >
+                  原因推测
+                </n-button>
+              </template>
+            </CodeEditor>
           </template>
         </n-split>
       </template>

src/desktop/Header.vue

@@ -1,17 +1,9 @@
 <script setup lang="ts">
-import { useMessage, type SelectOption } from "naive-ui"
+import { type SelectOption } from "naive-ui"
 import { useDark, useToggle } from "@vueuse/core"
 import Play from "../icons/Play.vue"
-import {
-  code,
-  copy,
-  reset,
-  run,
-  loading,
-  changeLanguage,
-} from "../composables/code"
+import { code, size, run, loading } from "../composables/code"
 
-const message = useMessage()
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
 
@@ -19,11 +11,6 @@ const languages: SelectOption[] = [
   { value: "python", label: "Python" },
   { value: "c", label: "C" },
 ]
-
-function copyAndNotify() {
-  copy()
-  message.success("已经复制好了")
-}
 </script>
 
 <template>
@@ -34,13 +21,21 @@ function copyAndNotify() {
         <n-button @click="toggleDark()">
           {{ isDark ? "浅色" : "深色" }}
         </n-button>
-        <n-button @click="reset">重置</n-button>
-        <n-button @click="copyAndNotify">复制</n-button>
+        <n-input-number
+          v-model:value="size"
+          class="fontSize"
+          placeholder=""
+          :min="20"
+          :max="40"
+          :step="2"
+        >
+          <template #prefix>字号</template>
+        </n-input-number>
         <n-select
           class="select"
+          placeholder=""
           :options="languages"
           v-model:value="code.language"
-          @update:value="changeLanguage"
         />
         <n-button type="primary" @click="run" :loading="loading">
           <template #icon>
@@ -66,4 +61,7 @@ function copyAndNotify() {
 .select {
   width: 100px;
 }
+.fontSize {
+  width: 110px;
+}
 </style>

src/main.ts

@@ -13,6 +13,7 @@ import {
   NFlex,
   NIcon,
   NMessageProvider,
+  NInputNumber,
 } from "naive-ui"
 import App from "./App.vue"
 import "normalize.css"
@@ -31,6 +32,7 @@ const naive = create({
     NSplit,
     NFlex,
     NIcon,
+    NInputNumber
   ],
 })
 

src/types.ts

@@ -1,6 +1,6 @@
 import { RemovableRef } from "@vueuse/core"
 
-export type LANGUAGE = "c" | "cpp" | "python" | "java"
+export type LANGUAGE = "c" | "python"
 
 export interface Code {
   value: string
@@ -11,4 +11,26 @@ export interface Cache {
   language: RemovableRef<LANGUAGE>
   input: RemovableRef<string>
   code: { [key in LANGUAGE]: RemovableRef<string> }
+  fontsize: RemovableRef<number>
+}
+
+export enum Status {
+  NotStarted = 0,
+  Accepted = 3,
+  CompileError = 6,
+  RuntimeError = 11,
+}
+
+export interface Submission {
+  stdout: string
+  time: string
+  memory: number
+  stderr: string
+  token: string
+  compile_output: string
+  message: string
+  status: {
+    id: number
+    description: string
+  }
 }