feat: 增加执行成功提示

src/components/SqlEditor.vue

@@ -2,7 +2,15 @@
   <div id="sqlEditor">
     <div ref="editorRef" :style="editorStyle" />
     <a-space :size="16" style="margin-top: 16px">
-      <a-button type="primary" style="width: 180px" @click="doSubmit">
+      <a-button
+        type="primary"
+        style="width: 180px"
+        @click="
+          () => {
+            doSubmit(OperateType.SUBMIT);
+          }
+        "
+      >
         运行
       </a-button>
       <a-button @click="doFormat">格式化</a-button>
@@ -29,6 +37,7 @@ import { QueryExecResult } from "sql.js";
 // eslint-disable-next-line no-undef
 import IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor;
 import { message } from "ant-design-vue";
+import { OperateType } from "../core/result";
 
 (self as any).MonacoEnvironment = {
   getWorker(_: any, label: any) {
@@ -45,7 +54,8 @@ interface SqlEditorProps {
     sql: string,
     result: QueryExecResult[],
     answerResult: QueryExecResult[],
-    errorMsg?: string
+    errorMsg?: string,
+    operateType?: OperateType
   ) => void;
 }
 
@@ -64,7 +74,7 @@ watchEffect(async () => {
   }
   // 初始化 / 更新 DB
   db.value = await initDB(level.value.initSQL);
-  doSubmit();
+  doSubmit(OperateType.DEFAULT);
 });
 
 /**
@@ -86,14 +96,15 @@ const doFormat = () => {
 const doReset = () => {
   if (inputEditor.value) {
     toRaw(inputEditor.value).setValue(level.value.defaultSQL);
-    doSubmit();
+    doSubmit(OperateType.DEFAULT);
   }
 };
 
 /**
  * 提交结果
+ * @param  operateType 点击提交或者默认执行
  */
-const doSubmit = () => {
+const doSubmit = (operateType: OperateType) => {
   if (!inputEditor.value) {
     return;
   }
@@ -103,11 +114,11 @@ const doSubmit = () => {
     const result = runSQL(db.value, inputStr);
     const answerResult = runSQL(db.value, level.value.answer);
     // 向外层传递结果
-    onSubmit?.value(inputStr, result, answerResult);
+    onSubmit?.value(inputStr, result, answerResult, undefined, operateType);
   } catch (error: any) {
     message.error("语句错误，" + error.message);
     // 向外层传递结果
-    onSubmit?.value(inputStr, [], [], error.message);
+    onSubmit?.value(inputStr, [], [], error.message, operateType);
   }
 };
 

src/core/result.ts

@@ -1,3 +1,4 @@
+import { MessageArgsProps } from "ant-design-vue";
 import { QueryExecResult } from "sql.js";
 
 /**
@@ -18,6 +19,20 @@ export const RESULT_STATUS_INFO_MAP = {
   1: "✅ 正确",
 };
 
+/** 提交操作类型枚举 */
+export enum OperateType {
+  DEFAULT = "default",
+  SUBMIT = "submit",
+}
+/** 执行提示映射 */
+export const EXECUTE_TIPS_CONFIG: Record<string, MessageArgsProps> = {
+  /** 执行成功 */
+  1: {
+    type: "success",
+    content: "恭喜你，挑战成功，可挑战下一关",
+  },
+};
+
 /**
  * 判断结果是否正确
  * @param result 用户结果

src/pages/IndexPage.vue

@@ -52,9 +52,10 @@ import SqlResult from "../components/SqlResult.vue";
 import { computed, ref, watch } from "vue";
 import { QueryExecResult } from "sql.js";
 import { allLevels, getLevelByKey } from "../levels";
-import { checkResult } from "../core/result";
+import { EXECUTE_TIPS_CONFIG, checkResult } from "../core/result";
 import CodeEditor from "../components/CodeEditor.vue";
-
+import { message } from "ant-design-vue";
+import { OperateType } from "../core/result";
 interface IndexPageProps {
   levelKey?: string;
 }
@@ -92,12 +93,19 @@ const onSubmit = (
   sql: string,
   res: QueryExecResult[],
   answerRes: QueryExecResult[],
-  errorMsg?: string
+  errorMsg?: string,
+  operateType?: OperateType
 ) => {
   result.value = res;
   answerResult.value = answerRes;
   errorMsgRef.value = errorMsg;
   resultStatus.value = checkResult(res, answerRes);
+  // 当提交之后，默认展示结果
+  activeKeys.value = ["result"];
+  if (operateType === OperateType.DEFAULT) return;
+  const tipsConfig = EXECUTE_TIPS_CONFIG[resultStatus.value];
+  if (!tipsConfig) return;
+  message.open(tipsConfig);
 };
 </script>
 
@@ -106,3 +114,4 @@ const onSubmit = (
   padding: 0 !important;
 }
 </style>
+../types