update

src/App.vue

@@ -4,7 +4,11 @@ import { useDark } from "@vueuse/core"
 import Desktop from "./desktop/index.vue"
 import Mobile from "./mobile/index.vue"
 import { isDesktop, isMobile } from "./composables/breakpoints"
+import { onMounted } from "vue"
+import { init } from "./composables/code"
 const isDark = useDark()
+
+onMounted(init)
 </script>
 
 <template>

src/api.ts

@@ -24,7 +24,7 @@ function decode(bytes?: string) {
   )
 }
 
-const http = axios.create({ baseURL: `${protocol}://judge0api.xuyue.cc` })
+const http = axios.create({ baseURL: `${protocol}://judge0api.hyyz.izhai.net` })
 
 export async function submit(code: Code, input: string) {
   const encodedCode = encode(code.value)

src/components/CodeEditor.vue

@@ -10,8 +10,8 @@ import { oneDark } from "../themes/oneDark"
 import { smoothy } from "../themes/smoothy"
 
 interface Props {
-  label: string
   modelValue: string
+  label?: string
   language?: LANGUAGE
   fontSize?: number
   readonly?: boolean
@@ -56,7 +56,7 @@ function onChange(v: string) {
 }
 </script>
 <template>
-  <n-flex align="center" class="header">
+  <n-flex align="center" class="header" v-if="props.label">
     <span class="title">{{ label }}</span>
     <slot name="actions"></slot>
   </n-flex>
@@ -68,7 +68,7 @@ function onChange(v: string) {
     :tabSize="4"
     :placeholder="props.placeholder"
     :style="{
-      height: 'calc(100% - 60px)',
+      height: props.label ? 'calc(100% - 60px)' : '100%',
       fontSize: props.fontSize + 'px',
     }"
     @change="onChange"

src/components/SelectLanguage.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { code } from "../composables/code"
+import type { SelectOption } from "naive-ui"
+
+const languages: SelectOption[] = [
+  { value: "python", label: "Python" },
+  { value: "c", label: "C" },
+]
+</script>
+<template>
+  <n-select
+    class="select"
+    placeholder=""
+    :options="languages"
+    v-model:value="code.language"
+  />
+</template>
+<style scoped>
+.select {
+  width: 100px;
+}
+</style>

src/components/ThemeButton.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { useDark, useToggle } from "@vueuse/core"
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+</script>
+<template>
+  <n-button @click="toggleDark()">
+    {{ isDark ? "浅色" : "深色" }}
+  </n-button>
+</template>

src/composables/analyse.ts

@@ -22,6 +22,8 @@ function findError(line: string, language = "python") {
     "NameError: name '(.*?)' is not defined": (name: string) =>
       `命名错误，${name} 不知道是什么东西`,
     "IndentationError: expected an indented block": "缩进错误：这一行需要缩进",
+    'TypeError: can only concatenate str \\(not "(.*?)"\\) to str':
+      "文字和数字不能相加",
   }
   const c: any = {}
   const regex = { c, python }[language]

src/composables/code.ts

@@ -3,13 +3,14 @@ import { Code, LANGUAGE, Cache, Status } from "../types"
 import { sources } from "../templates"
 import { submit } from "../api"
 import { useStorage } from "@vueuse/core"
+import { isMobile } from "./breakpoints"
 
 const defaultLanguage = "python"
 
 const cache: Cache = {
   language: useStorage<LANGUAGE>("code_language", defaultLanguage),
   input: useStorage("code_input", ""),
-  fontsize: useStorage("fontsize", 24),
+  fontsize: useStorage("fontsize", isMobile.value ? 20 : 24),
   code: {
     python: useStorage("code_python", sources["python"]),
     c: useStorage("code_c", sources["c"]),
@@ -24,7 +25,7 @@ export const input = ref(cache.input.value)
 export const output = ref("")
 export const status = ref(Status.NotStarted)
 export const loading = ref(false)
-export const size = ref(24)
+export const size = ref(cache.fontsize)
 
 watch(size, (value: number) => {
   cache.fontsize.value = value

src/composables/tab.ts

@@ -0,0 +1,4 @@
+import { ref } from "vue"
+import { Tab } from "../types"
+
+export const tab = ref<Tab>("code")

src/desktop/Content.vue

@@ -6,18 +6,15 @@ import {
   input,
   output,
   status,
-  init,
   reset,
   clearInput,
 } from "../composables/code"
 import { showAnalyse, analyzeError, analyse } from "../composables/analyse"
 import CodeEditor from "../components/CodeEditor.vue"
-import { computed, onMounted } from "vue"
+import { computed } from "vue"
 import { useMessage } from "naive-ui"
 import { Status } from "../types"
 
-onMounted(init)
-
 const showInputClearBtn = computed(() => !!input.value)
 const message = useMessage()
 

src/desktop/Header.vue

@@ -1,16 +1,7 @@
 <script setup lang="ts">
-import { type SelectOption } from "naive-ui"
+import { size, run, loading } from "../composables/code"
-import { useDark, useToggle } from "@vueuse/core"
+import ThemeButton from "../components/ThemeButton.vue"
-import Play from "../icons/Play.vue"
+import SelectLanguage from "../components/SelectLanguage.vue"
-import { code, size, run, loading } from "../composables/code"
-
-const isDark = useDark()
-const toggleDark = useToggle(isDark)
-
-const languages: SelectOption[] = [
-  { value: "python", label: "Python" },
-  { value: "c", label: "C" },
-]
 </script>
 
 <template>
@@ -18,9 +9,7 @@ const languages: SelectOption[] = [
     <n-flex justify="space-between" align="center">
       <div class="title">徐越的自测猫</div>
       <n-flex>
-        <n-button @click="toggleDark()">
+        <ThemeButton />
-          {{ isDark ? "浅色" : "深色" }}
-        </n-button>
         <n-input-number
           v-model:value="size"
           class="fontSize"
@@ -31,18 +20,8 @@ const languages: SelectOption[] = [
         >
           <template #prefix>字号</template>
         </n-input-number>
-        <n-select
+        <SelectLanguage />
-          class="select"
+        <n-button type="primary" @click="run" :disabled="loading">
-          placeholder=""
-          :options="languages"
-          v-model:value="code.language"
-        />
-        <n-button type="primary" @click="run" :loading="loading">
-          <template #icon>
-            <n-icon>
-              <Play />
-            </n-icon>
-          </template>
           运行
         </n-button>
       </n-flex>
@@ -54,13 +33,11 @@ const languages: SelectOption[] = [
 .header {
   height: 60px;
   padding: 12px;
+  box-sizing: border-box;
 }
 .title {
   font-size: 20px;
 }
-.select {
-  width: 100px;
-}
 .fontSize {
   width: 110px;
 }

src/desktop/index.vue

@@ -18,10 +18,10 @@ import File from "./File.vue"
 import { useMagicKeys, whenever } from "@vueuse/core"
 import { ref } from "vue"
 
-const { alt_shift_p, ctrl_shift_p, ctrl_shift_z } = useMagicKeys()
-
 const show = ref(false)
 
+const { alt_shift_p, ctrl_shift_p, ctrl_shift_z } = useMagicKeys()
+
 whenever(alt_shift_p, () => {
   show.value = true
 })

src/main.ts

@@ -8,7 +8,6 @@ import {
   NLayoutContent,
   NLayoutHeader,
   NSelect,
-  NSpace,
   NSplit,
   NFlex,
   NIcon,
@@ -17,6 +16,9 @@ import {
   NPopover,
   NTag,
   NModal,
+  NTabs,
+  NTabPane,
+  NDropdown,
 } from "naive-ui"
 import App from "./App.vue"
 import "normalize.css"
@@ -29,7 +31,6 @@ const naive = create({
     NLayout,
     NLayoutHeader,
     NLayoutContent,
-    NSpace,
     NInput,
     NSelect,
     NSplit,
@@ -40,6 +41,9 @@ const naive = create({
     NTag,
     NModal,
     NInput,
+    NTabs,
+    NTabPane,
+    NDropdown,
   ],
 })
 

src/mobile/Content.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import CodeEditor from "../components/CodeEditor.vue"
+import { code, input, output, size } from "../composables/code"
+import { tab } from "../composables/tab"
+import { Tab } from "../types"
+import ThemeButton from "../components/ThemeButton.vue"
+import SelectLanguage from "../components/SelectLanguage.vue"
+
+function onChange(v: Tab) {
+  tab.value = v
+}
+
+function changeSize(v: number) {
+  if (v > 40 || v < 20) return
+  size.value = v
+}
+</script>
+<template>
+  <n-layout-content>
+    <n-tabs
+      pane-style="height: calc(100vh - 111px)"
+      type="segment"
+      :value="tab"
+      @update:value="onChange"
+    >
+      <n-tab-pane name="code" tab="代码">
+        <CodeEditor
+          v-model:model-value="code.value"
+          :language="code.language"
+          :font-size="size"
+        />
+      </n-tab-pane>
+      <n-tab-pane name="input" tab="输入">
+        <CodeEditor v-model:model-value="input" :font-size="size" />
+      </n-tab-pane>
+      <n-tab-pane name="output" tab="输出">
+        <CodeEditor v-model:model-value="output" readonly :font-size="size" />
+      </n-tab-pane>
+      <n-tab-pane name="setting" tab="设置">
+        <n-flex size="large" vertical class="setting">
+          <n-flex align="center">
+            <span>主题</span>
+            <ThemeButton />
+          </n-flex>
+          <n-flex align="center">
+            <span>语言</span>
+            <SelectLanguage />
+          </n-flex>
+          <n-flex align="center">
+            <span>字号</span>
+            <n-flex align="center">
+              <span :style="{ 'font-size': size + 'px' }">{{ size }}</span>
+              <n-button @click="changeSize(size - 2)" :disabled="size === 20">
+                调小
+              </n-button>
+              <n-button @click="changeSize(size + 2)" :disabled="size === 40">
+                调大
+              </n-button>
+            </n-flex>
+          </n-flex>
+        </n-flex>
+      </n-tab-pane>
+    </n-tabs>
+  </n-layout-content>
+</template>
+<style scoped>
+.setting {
+  padding: 0 12px;
+}
+</style>

src/mobile/Header.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { useMessage, type DropdownOption } from "naive-ui"
+import { code, loading, reset, run } from "../composables/code"
+import { tab } from "../composables/tab"
+import copyTextToClipboard from "copy-text-to-clipboard"
+
+const message = useMessage()
+function switchAndRun() {
+  tab.value = "output"
+  run()
+}
+
+function copy() {
+  copyTextToClipboard(code.value)
+  message.success("已经复制好了")
+}
+
+const menu: DropdownOption[] = [
+  { label: "复制", key: "copy", props: { onClick: copy } },
+  { label: "重置", key: "reset", props: { onClick: reset } },
+]
+</script>
+<template>
+  <n-layout-header class="container" bordered>
+    <n-flex justify="space-between" align="center">
+      <div class="title">徐越的自测猫</div>
+      <n-flex align="center">
+        <n-dropdown :options="menu">
+          <n-button size="small">操作</n-button>
+        </n-dropdown>
+        <n-button
+          size="small"
+          type="primary"
+          :disabled="loading"
+          @click="switchAndRun"
+        >
+          运行
+        </n-button>
+      </n-flex>
+    </n-flex>
+  </n-layout-header>
+</template>
+<style scoped>
+.container {
+  height: 60px;
+  padding: 12px;
+  box-sizing: border-box;
+}
+.title {
+  font-size: 18px;
+}
+</style>

src/mobile/index.vue

@@ -1 +1,8 @@
-<template></template>
+<script lang="ts" setup>
+import Content from "./Content.vue"
+import Header from "./Header.vue"
+</script>
+<template>
+  <Header />
+  <Content />
+</template>

src/types.ts

@@ -40,3 +40,5 @@ export interface File {
   out: string
   error: boolean
 }
+
+export type Tab = "code" | "input" | "output" | "setting"