update

src/composables/analyse.ts

@@ -0,0 +1,49 @@
+import { reactive } from "vue"
+import { code, output } from "./code"
+
+export const analyse = reactive({
+  line: -1,
+  message: "",
+})
+
+function findError(line: string) {
+  const regex: any = {
+    "EOFError: EOF when reading a line": "需要在输入框填写输入信息",
+    "SyntaxError: invalid character in identifier":
+      "可能是单词拼写错误，可能是括号、引号写成中文的了",
+    "SyntaxError: invalid syntax": "语法错误，不合法的语法",
+    "SyntaxError: EOL while scanning string literal":
+      "可能是这一行最后一个符号是中文的，或者引号、括号不匹配",
+    "NameError: name '(.*?)' is not defined": (name: string) =>
+      `命名错误，${name} 不知道是什么东西`,
+    "IndentationError: expected an indented block": "缩进错误：这一行需要缩进",
+  }
+  let message = ""
+  for (let r in regex) {
+    const err = line.match(r)
+    if (err) {
+      if (typeof regex[r] === "function") {
+        message = regex[r](err[1])
+      } else {
+        message = regex[r]
+      }
+      break
+    }
+  }
+  return message
+}
+
+export function showAnalyse() {
+  if (code.language === "python") {
+    const line = output.value.match(/File "script.py", line (\d+)/)
+    if (line) {
+      analyse.line = parseInt(line[1])
+    }
+    const lines = output.value.split("\n")
+    const lastLine = lines[lines.length - 1]
+    analyse.message = findError(lastLine)
+  }
+  if (code.language === "c") {
+    analyse.message = "C语言的正在制作中..."
+  }
+}

src/composables/code.ts

@@ -1,5 +1,4 @@
-import { computed, ref, watch } from "vue"
-import copyTextToClipboard from "copy-text-to-clipboard"
+import { computed, reactive, ref, watch } from "vue"
 import { Code, LANGUAGE, Cache, Status } from "../types"
 import { sources } from "../templates"
 import { submit } from "../api"
@@ -17,7 +16,7 @@ const cache: Cache = {
   },
 }
 
-export const code = ref<Code>({
+export const code = reactive<Code>({
   value: cache.code[defaultLanguage].value,
   language: cache.language.value,
 })
@@ -36,18 +35,19 @@ watch(size, (value: number) => {
 })
 
 watch(
-  () => code.value.language,
+  () => code.language,
   (value: LANGUAGE) => {
     cache.language.value = value
-    code.value.value = cache.code[value].value
+    code.value = cache.code[value].value
     output.value = ""
+    status.value = Status.NotStarted
   },
 )
 
 watch(
-  () => code.value.value,
+  () => code.value,
   (value: string) => {
-    cache.code[code.value.language].value = value
+    cache.code[code.language].value = value
   },
 )
 
@@ -56,35 +56,32 @@ watch(input, (value: string) => {
 })
 
 export function init() {
-  code.value.language = cache.language.value
-  code.value.value = cache.code[code.value.language].value
+  code.language = cache.language.value
+  code.value = cache.code[code.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]
+  code.value = sources[code.language]
+  cache.code[code.language].value = sources[code.language]
   output.value = ""
   status.value = Status.NotStarted
 }
 
 export async function run() {
   loading.value = true
-  const cleanCode = code.value.value.trim()
+  const cleanCode = code.value.trim()
   if (!cleanCode) return
   output.value = ""
+  status.value = Status.NotStarted
   const result = await submit(
-    { value: cleanCode, language: code.value.language },
+    { value: cleanCode, language: code.language },
     input.value.trim(),
   )
   output.value = result.output || ""

src/desktop/Content.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import copyTextToClipboard from "copy-text-to-clipboard"
 import {
   code,
   size,
@@ -6,20 +7,21 @@ import {
   input,
   output,
   reset,
-  copy,
   clearInput,
   showStatus,
 } from "../composables/code"
+import { showAnalyse, analyse } from "../composables/analyse"
 import CodeEditor from "../components/CodeEditor.vue"
-import { onMounted } from "vue"
+import { computed, onMounted } from "vue"
 import { useMessage } from "naive-ui"
 
 onMounted(init)
 
+const showInputClearBtn = computed(() => !!input.value)
 const message = useMessage()
 
-function copyAndNotify() {
-  copy()
+function copy() {
+  copyTextToClipboard(code.value)
   message.success("已经复制好了")
 }
 </script>
@@ -35,9 +37,7 @@ function copyAndNotify() {
           :language="code.language"
         >
           <template #actions>
-            <n-button quaternary type="primary" @click="copyAndNotify">
-              复制
-            </n-button>
+            <n-button quaternary type="primary" @click="copy">复制</n-button>
             <n-button quaternary @click="reset">重置</n-button>
           </template>
         </CodeEditor>
@@ -52,7 +52,12 @@ function copyAndNotify() {
           <template #1>
             <CodeEditor label="输入框" :font-size="size" v-model="input">
               <template #actions>
-                <n-button quaternary type="primary" @click="clearInput">
+                <n-button
+                  quaternary
+                  type="primary"
+                  @click="clearInput"
+                  v-if="showInputClearBtn"
+                >
                   清空
                 </n-button>
               </template>
@@ -66,14 +71,23 @@ function copyAndNotify() {
               :font-size="size"
             >
               <template #actions>
-                <n-button
-                  quaternary
-                  type="error"
-                  @click="null"
-                  v-if="showStatus"
-                >
-                  原因推测
-                </n-button>
+                <n-popover v-if="showStatus" trigger="click">
+                  <template #trigger>
+                    <n-button quaternary type="error" @click="showAnalyse">
+                      推测原因
+                    </n-button>
+                  </template>
+                  <template #header v-if="analyse.line > 0">
+                    错误在第
+                    <n-tag type="error">
+                      <b>{{ analyse.line }}</b>
+                    </n-tag>
+                    行
+                  </template>
+                  <span v-if="analyse.message">
+                    {{ analyse.message }}
+                  </span>
+                </n-popover>
               </template>
             </CodeEditor>
           </template>

src/main.ts

@@ -14,6 +14,8 @@ import {
   NIcon,
   NMessageProvider,
   NInputNumber,
+  NPopover,
+  NTag,
 } from "naive-ui"
 import App from "./App.vue"
 import "normalize.css"
@@ -32,7 +34,9 @@ const naive = create({
     NSplit,
     NFlex,
     NIcon,
-    NInputNumber
+    NInputNumber,
+    NPopover,
+    NTag,
   ],
 })