update

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>