diff --git a/src/components/SqlEditor.vue b/src/components/SqlEditor.vue index efb20cc..0dec030 100644 --- a/src/components/SqlEditor.vue +++ b/src/components/SqlEditor.vue @@ -2,7 +2,15 @@
- + 运行 格式化 @@ -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); } }; diff --git a/src/core/result.ts b/src/core/result.ts index 3efa5ed..5440e96 100644 --- a/src/core/result.ts +++ b/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 = { + /** 执行成功 */ + 1: { + type: "success", + content: "恭喜你,挑战成功,可挑战下一关", + }, +}; + /** * 判断结果是否正确 * @param result 用户结果 diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue index f764614..ac82cd7 100644 --- a/src/pages/IndexPage.vue +++ b/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); }; @@ -106,3 +114,4 @@ const onSubmit = ( padding: 0 !important; } +../types