update

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>