add: 添加暂存sql功能

src/components/SqlEditor.vue

@@ -7,6 +7,7 @@
       </a-button>
       <a-button @click="doFormat">格式化</a-button>
       <a-button @click="doReset">重置</a-button>
+      <a-button @click="loadSaveCode" v-if="!autoLoadCode">加载暂存代码</a-button>
     </a-space>
   </div>
 </template>
@@ -19,7 +20,7 @@ import {
   ref,
   toRaw,
   toRefs,
-  watchEffect,
+  watch,
 } from "vue";
 import * as monaco from "monaco-editor";
 import { format } from "sql-formatter";
@@ -29,6 +30,8 @@ import { QueryExecResult } from "sql.js";
 // eslint-disable-next-line no-undef
 import IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor;
 import { message } from "ant-design-vue";
+import { saveCodeStore } from "../core/saveCodeStore";
+import { storeToRefs } from "pinia";
 
 (self as any).MonacoEnvironment = {
   getWorker(_: any, label: any) {
@@ -54,18 +57,32 @@ const { level, onSubmit } = toRefs(props);
 const inputEditor = ref<IStandaloneCodeEditor>();
 const editorRef = ref<HTMLElement>();
 const db = ref();
+const store = saveCodeStore();
+const isSaveCode = ref(storeToRefs(store).isSaveCode); // 是否暂存代码
+const autoLoadCode = ref(storeToRefs(store).autoLoadCode); // 是否自动加载代码
+var canSaveCode = true;
 
-watchEffect(async () => {
+watch(level, () => {
+  initLevel();
+});
+
+const initLevel = async () => {
   // 初始化 / 更新默认 SQL
   if (inputEditor.value) {
-    toRaw(inputEditor.value).setValue(
-      "-- 请在此处输入 SQL\n" + level.value.defaultSQL
-    );
+    if (autoLoadCode.value) {
+      loadSaveCode();
+    } else {
+      canSaveCode = false;
+      toRaw(inputEditor.value).setValue(
+        "-- 请在此处输入 SQL\n" + level.value.defaultSQL
+      );
+      canSaveCode = true;
+    }
   }
   // 初始化 / 更新 DB
   db.value = await initDB(level.value.initSQL);
-  doSubmit();
-});
+  runSQLCode(); // 初始化结果
+};
 
 /**
  * SQL 格式化
@@ -92,8 +109,24 @@ const doReset = () => {
 
 /**
  * 提交结果
+ * 只有提交结果才可以保存
  */
 const doSubmit = () => {
+  if (!inputEditor.value) {
+    return;
+  }
+  const inputStr = toRaw(inputEditor.value).getValue();
+  // 把代码保存到ls ####
+  if (isSaveCode.value) {
+    store.saveCode = inputStr;
+  }
+  runSQLCode();
+};
+
+/**
+ * 执行sql代码
+ */
+const runSQLCode = () => {
   if (!inputEditor.value) {
     return;
   }
@@ -109,7 +142,25 @@ const doSubmit = () => {
     // 向外层传递结果
     onSubmit?.value(inputStr, [], [], error.message);
   }
-};
+}
+
+const loadSaveCode = () => {
+  if (!inputEditor.value) {
+    return;
+  }
+  //尝试去ls中读出暂存的sql代码 ####
+  var rowCode;
+  if (!isSaveCode.value) {
+    message.error("当前功能已关闭,请自行开启");
+    return;
+  }
+  rowCode = store.saveCode;
+  if (!rowCode) {
+    message.error("暂无暂存代码");
+    return;
+  }
+  toRaw(inputEditor.value).setValue(rowCode);
+}
 
 onMounted(async () => {
   // 初始化代码编辑器
@@ -126,13 +177,27 @@ onMounted(async () => {
         enabled: false,
       },
     });
+
+    // 加载题目
+    initLevel();
+
+    inputEditor.value.onDidChangeModelContent(() => {
+      // 自动保存代码
+      if (isSaveCode.value && canSaveCode && inputEditor.value) {
+        const inputStr = toRaw(inputEditor.value).getValue();
+        console.log(inputStr)
+        store.saveCode = inputStr;
+      }
+    });
+
     // 自动保存草稿
     // 暂不开启，刷新后恢复当前关卡的默认 SQL
     // setInterval(() => {
     //   if (inputEditor.value) {
     //     localStorage.setItem("draft", toRaw(inputEditor.value).getValue());
     //   }
     // }, 3000);
+
   }
 });
 

src/core/saveCodeStore.ts

@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+
+export const saveCodeStore = defineStore("saveCode", {
+  state: () => {
+    //数据
+    return {
+      saveCode: "",
+      isSaveCode: true,
+      autoLoadCode: false,
+    };
+  },
+  persist: {
+    //存储位置
+    key: "saveCode",
+    storage: window.localStorage,
+  },
+});

src/pages/IndexPage.vue

@@ -42,6 +42,11 @@
         </a-collapse>
       </a-col>
     </a-row>
+    <div class="saveCodeSettings">
+      代码保存设置:
+      <a-switch v-model:checked="isSaveCode" @change="saveCodeChange" />暂存代码
+      <a-switch v-model:checked="autoLoadCode" />自动加载代码
+    </div>
   </div>
 </template>
 
@@ -54,6 +59,8 @@ import { QueryExecResult } from "sql.js";
 import { allLevels, getLevelByKey } from "../levels";
 import { checkResult } from "../core/result";
 import CodeEditor from "../components/CodeEditor.vue";
+import { saveCodeStore } from "../core/saveCodeStore";
+import { storeToRefs } from "pinia";
 
 interface IndexPageProps {
   levelKey?: string;
@@ -73,6 +80,9 @@ const errorMsgRef = ref<string>();
 const resultStatus = ref<number>(-1);
 const defaultActiveKeys = ["result"];
 const activeKeys = ref([...defaultActiveKeys]);
+const store = saveCodeStore();
+const isSaveCode = ref(storeToRefs(store).isSaveCode); // 是否暂存代码
+const autoLoadCode = ref(storeToRefs(store).autoLoadCode); // 是否自动加载代码
 
 /**
  * 切换关卡时，重置状态
@@ -99,10 +109,43 @@ const onSubmit = (
   errorMsgRef.value = errorMsg;
   resultStatus.value = checkResult(res, answerRes);
 };
+
+const saveCodeChange = () => {
+  store.isSaveCode = isSaveCode.value;
+  if (!isSaveCode.value) {
+    // 清除ls中的代码 ####
+    store.saveCode = "";
+  } 
+  // else if (isSaveCode.value && inputEditor.value) {
+  //   //this.$refs.sqlEditor
+  //   // 开启功能，保存代码
+  //   const inputStr = toRaw(inputEditor.value).getValue();
+  //   store.saveCode = inputStr;
+  // }
+};
+
+// 开启自动加载代码必须先开启暂存代码
+// 关闭暂存代码必须先关闭自动加载代码
+watch(isSaveCode, (newValue, oldValue) => {
+  if (!newValue) {
+    autoLoadCode.value = false;
+  }
+});
+watch(autoLoadCode, (newValue, oldValue) => {
+  if (newValue) {
+    isSaveCode.value = true;
+  }
+});
 </script>
 
 <style>
 .result-collapse-panel .ant-collapse-content-box {
   padding: 0 !important;
 }
+.saveCodeSettings {
+  margin-top: 8px;
+}
+.saveCodeSettings .ant-switch {
+  margin-left: 8px;
+}
 </style>