From e41518fced7a9b4dbfdd595dff686fb8f2d2fe5b Mon Sep 17 00:00:00 2001 From: htfc786 <2721672639@qq.com> Date: Mon, 7 Aug 2023 11:02:05 +0800 Subject: [PATCH 1/3] =?UTF-8?q?add:=20=E6=B7=BB=E5=8A=A0=E6=9A=82=E5=AD=98?= =?UTF-8?q?sql=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SqlEditor.vue | 33 ++++++++++++++++++++++++++--- src/core/saveCode.ts | 41 ++++++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 3 deletions(-) create mode 100644 src/core/saveCode.ts diff --git a/src/components/SqlEditor.vue b/src/components/SqlEditor.vue index efb20cc..07b69ec 100644 --- a/src/components/SqlEditor.vue +++ b/src/components/SqlEditor.vue @@ -7,6 +7,7 @@ 格式化 重置 + 暂存代码 @@ -29,6 +30,13 @@ import { QueryExecResult } from "sql.js"; // eslint-disable-next-line no-undef import IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor; import { message } from "ant-design-vue"; +import { + saveCode, + readCode, + deleteCode, + setIsSaveCode, + getIsSaveCode, +} from "../core/saveCode"; (self as any).MonacoEnvironment = { getWorker(_: any, label: any) { @@ -54,13 +62,20 @@ const { level, onSubmit } = toRefs(props); const inputEditor = ref(); const editorRef = ref(); const db = ref(); +const isSaveCode = ref(getIsSaveCode()); // 是否暂存代码 watchEffect(async () => { // 初始化 / 更新默认 SQL if (inputEditor.value) { - toRaw(inputEditor.value).setValue( - "-- 请在此处输入 SQL\n" + level.value.defaultSQL - ); + //尝试去ls中读出暂存的sql代码 #### + var rowCode; + if (isSaveCode.value) { + rowCode = readCode(); + } + if (!rowCode) { + rowCode = "-- 请在此处输入 SQL\n" + level.value.defaultSQL; + } + toRaw(inputEditor.value).setValue(rowCode); } // 初始化 / 更新 DB db.value = await initDB(level.value.initSQL); @@ -99,6 +114,10 @@ const doSubmit = () => { } const inputStr = toRaw(inputEditor.value).getValue(); console.log("inputStr", inputStr); + // 把代码保存到ls #### + if (isSaveCode.value) { + saveCode(inputStr); + } try { const result = runSQL(db.value, inputStr); const answerResult = runSQL(db.value, level.value.answer); @@ -111,6 +130,14 @@ const doSubmit = () => { } }; +const saveCodeChange = () => { + setIsSaveCode(isSaveCode.value); + if (!isSaveCode.value) { + // 清除ls中的代码 #### + deleteCode(); + } +}; + onMounted(async () => { // 初始化代码编辑器 if (editorRef.value) { diff --git a/src/core/saveCode.ts b/src/core/saveCode.ts new file mode 100644 index 0000000..a36e331 --- /dev/null +++ b/src/core/saveCode.ts @@ -0,0 +1,41 @@ +const codeStorage = "saveCode"; +const isSaveCodeStorage = "isSaveCode"; + +export const saveCode = (code: string) => { + // 保存代码 + localStorage.setItem(codeStorage, code); +}; + +export const readCode = () => { + // 读取代码 + return localStorage.getItem(codeStorage); +}; + +export const deleteCode = () => { + // 删除代码 + localStorage.removeItem(codeStorage); +}; + +export const setIsSaveCode = (isSaveCode: boolean) => { + // 设置是否保存代码 + if (isSaveCode) { + localStorage.setItem(isSaveCodeStorage, "true"); + return; + } + localStorage.setItem(isSaveCodeStorage, "false"); +}; + +export const getIsSaveCode = () => { + // 读取是否保存代码 + if (localStorage.getItem(isSaveCodeStorage) == "true") { + return true; + } else if (localStorage.getItem(isSaveCodeStorage) == "false") { + return false; + } + return true; //因为默认是true，localStorage里没有的就是没有执行过更改状态的，所以没有执行过修改的一定是true（默认），所以返回true +}; + +export const deleteIsSaveCode = () => { + // 删除是否保存代码 + localStorage.removeItem(isSaveCodeStorage); +}; From dfea94399bf160879bba06a295049ca8340b1e28 Mon Sep 17 00:00:00 2001 From: htfc786 <2721672639@qq.com> Date: Wed, 9 Aug 2023 14:50:08 +0800 Subject: [PATCH 2/3] =?UTF-8?q?update:=20localStorage=E5=AD=98=E5=82=A8?= =?UTF-8?q?=E6=94=B9=E4=B8=BApinia=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SqlEditor.vue | 37 ++++++++++++++++++++------------ src/core/saveCode.ts | 41 ------------------------------------ src/core/saveCodeStore.ts | 16 ++++++++++++++ 3 files changed, 40 insertions(+), 54 deletions(-) delete mode 100644 src/core/saveCode.ts create mode 100644 src/core/saveCodeStore.ts diff --git a/src/components/SqlEditor.vue b/src/components/SqlEditor.vue index 07b69ec..9b89e9d 100644 --- a/src/components/SqlEditor.vue +++ b/src/components/SqlEditor.vue @@ -30,13 +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 { - saveCode, - readCode, - deleteCode, - setIsSaveCode, - getIsSaveCode, -} from "../core/saveCode"; +import { saveCodeStore } from "../core/saveCodeStore"; +import { storeToRefs } from "pinia"; (self as any).MonacoEnvironment = { getWorker(_: any, label: any) { @@ -62,20 +57,23 @@ const { level, onSubmit } = toRefs(props); const inputEditor = ref(); const editorRef = ref(); const db = ref(); -const isSaveCode = ref(getIsSaveCode()); // 是否暂存代码 +const store = saveCodeStore(); +const isSaveCode = ref(storeToRefs(store).isSaveCode); // 是否暂存代码 +let isIntnCode = false; //是否已经初始化过代码 watchEffect(async () => { // 初始化 / 更新默认 SQL - if (inputEditor.value) { + if (inputEditor.value && !isIntnCode) { //尝试去ls中读出暂存的sql代码 #### var rowCode; if (isSaveCode.value) { - rowCode = readCode(); + rowCode = store.saveCode; } if (!rowCode) { rowCode = "-- 请在此处输入 SQL\n" + level.value.defaultSQL; } toRaw(inputEditor.value).setValue(rowCode); + isIntnCode = true; } // 初始化 / 更新 DB db.value = await initDB(level.value.initSQL); @@ -116,7 +114,7 @@ const doSubmit = () => { console.log("inputStr", inputStr); // 把代码保存到ls #### if (isSaveCode.value) { - saveCode(inputStr); + store.saveCode = inputStr; } try { const result = runSQL(db.value, inputStr); @@ -131,10 +129,14 @@ const doSubmit = () => { }; const saveCodeChange = () => { - setIsSaveCode(isSaveCode.value); + store.isSaveCode = isSaveCode.value; if (!isSaveCode.value) { // 清除ls中的代码 #### - deleteCode(); + store.saveCode = ""; + } else if (isSaveCode.value && inputEditor.value) { + // 开启功能，保存代码 + const inputStr = toRaw(inputEditor.value).getValue(); + store.saveCode = inputStr; } }; @@ -153,6 +155,15 @@ onMounted(async () => { enabled: false, }, }); + + inputEditor.value.onDidChangeModelContent(() => { + // 自动保存代码 + if (inputEditor.value) { + const inputStr = toRaw(inputEditor.value).getValue(); + store.saveCode = inputStr; + } + }); + // 自动保存草稿 // 暂不开启，刷新后恢复当前关卡的默认 SQL // setInterval(() => { diff --git a/src/core/saveCode.ts b/src/core/saveCode.ts deleted file mode 100644 index a36e331..0000000 --- a/src/core/saveCode.ts +++ /dev/null @@ -1,41 +0,0 @@ -const codeStorage = "saveCode"; -const isSaveCodeStorage = "isSaveCode"; - -export const saveCode = (code: string) => { - // 保存代码 - localStorage.setItem(codeStorage, code); -}; - -export const readCode = () => { - // 读取代码 - return localStorage.getItem(codeStorage); -}; - -export const deleteCode = () => { - // 删除代码 - localStorage.removeItem(codeStorage); -}; - -export const setIsSaveCode = (isSaveCode: boolean) => { - // 设置是否保存代码 - if (isSaveCode) { - localStorage.setItem(isSaveCodeStorage, "true"); - return; - } - localStorage.setItem(isSaveCodeStorage, "false"); -}; - -export const getIsSaveCode = () => { - // 读取是否保存代码 - if (localStorage.getItem(isSaveCodeStorage) == "true") { - return true; - } else if (localStorage.getItem(isSaveCodeStorage) == "false") { - return false; - } - return true; //因为默认是true，localStorage里没有的就是没有执行过更改状态的，所以没有执行过修改的一定是true（默认），所以返回true -}; - -export const deleteIsSaveCode = () => { - // 删除是否保存代码 - localStorage.removeItem(isSaveCodeStorage); -}; diff --git a/src/core/saveCodeStore.ts b/src/core/saveCodeStore.ts new file mode 100644 index 0000000..c995c93 --- /dev/null +++ b/src/core/saveCodeStore.ts @@ -0,0 +1,16 @@ +import { defineStore } from "pinia"; + +export const saveCodeStore = defineStore("saveCode", { + state: () => { + //数据 + return { + saveCode: "", + isSaveCode: true, + }; + }, + persist: { + //存储位置 + key: "saveCode", + storage: window.localStorage, + }, +}); From 52217edaaf56db318a976f228430bcca6891554a Mon Sep 17 00:00:00 2001 From: htfc786 <2721672639@qq.com> Date: Thu, 24 Aug 2023 20:22:34 +0800 Subject: [PATCH 3/3] =?UTF-8?q?update=20=E6=B7=BB=E5=8A=A0=E6=89=8B?= =?UTF-8?q?=E5=8A=A8=E5=8A=A0=E8=BD=BD=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SqlEditor.vue | 83 ++++++++++++++++++++++++------------ src/core/saveCodeStore.ts | 1 + src/pages/IndexPage.vue | 43 +++++++++++++++++++ 3 files changed, 99 insertions(+), 28 deletions(-) diff --git a/src/components/SqlEditor.vue b/src/components/SqlEditor.vue index 9b89e9d..c332b6e 100644 --- a/src/components/SqlEditor.vue +++ b/src/components/SqlEditor.vue @@ -7,7 +7,7 @@ 格式化 重置 - 暂存代码 + 加载暂存代码 @@ -20,7 +20,7 @@ import { ref, toRaw, toRefs, - watchEffect, + watch, } from "vue"; import * as monaco from "monaco-editor"; import { format } from "sql-formatter"; @@ -59,26 +59,30 @@ const editorRef = ref(); const db = ref(); const store = saveCodeStore(); const isSaveCode = ref(storeToRefs(store).isSaveCode); // 是否暂存代码 +const autoLoadCode = ref(storeToRefs(store).autoLoadCode); // 是否自动加载代码 +var canSaveCode = true; -let isIntnCode = false; //是否已经初始化过代码 -watchEffect(async () => { +watch(level, () => { + initLevel(); +}); + +const initLevel = async () => { // 初始化 / 更新默认 SQL - if (inputEditor.value && !isIntnCode) { - //尝试去ls中读出暂存的sql代码 #### - var rowCode; - if (isSaveCode.value) { - rowCode = store.saveCode; - } - if (!rowCode) { - rowCode = "-- 请在此处输入 SQL\n" + level.value.defaultSQL; + if (inputEditor.value) { + if (autoLoadCode.value) { + loadSaveCode(); + } else { + canSaveCode = false; + toRaw(inputEditor.value).setValue( + "-- 请在此处输入 SQL\n" + level.value.defaultSQL + ); + canSaveCode = true; } - toRaw(inputEditor.value).setValue(rowCode); - isIntnCode = true; } // 初始化 / 更新 DB db.value = await initDB(level.value.initSQL); - doSubmit(); -}); + runSQLCode(); // 初始化结果 +}; /** * SQL 格式化 @@ -105,17 +109,29 @@ const doReset = () => { /** * 提交结果 + * 只有提交结果才可以保存 */ const doSubmit = () => { if (!inputEditor.value) { return; } const inputStr = toRaw(inputEditor.value).getValue(); - console.log("inputStr", inputStr); // 把代码保存到ls #### if (isSaveCode.value) { store.saveCode = inputStr; } + runSQLCode(); +}; + +/** + * 执行sql代码 + */ +const runSQLCode = () => { + if (!inputEditor.value) { + return; + } + const inputStr = toRaw(inputEditor.value).getValue(); + console.log("inputStr", inputStr); try { const result = runSQL(db.value, inputStr); const answerResult = runSQL(db.value, level.value.answer); @@ -126,19 +142,25 @@ const doSubmit = () => { // 向外层传递结果 onSubmit?.value(inputStr, [], [], error.message); } -}; +} -const saveCodeChange = () => { - store.isSaveCode = isSaveCode.value; +const loadSaveCode = () => { + if (!inputEditor.value) { + return; + } + //尝试去ls中读出暂存的sql代码 #### + var rowCode; if (!isSaveCode.value) { - // 清除ls中的代码 #### - store.saveCode = ""; - } else if (isSaveCode.value && inputEditor.value) { - // 开启功能，保存代码 - const inputStr = toRaw(inputEditor.value).getValue(); - store.saveCode = inputStr; + message.error("当前功能已关闭,请自行开启"); + return; } -}; + rowCode = store.saveCode; + if (!rowCode) { + message.error("暂无暂存代码"); + return; + } + toRaw(inputEditor.value).setValue(rowCode); +} onMounted(async () => { // 初始化代码编辑器 @@ -156,10 +178,14 @@ onMounted(async () => { }, }); + // 加载题目 + initLevel(); + inputEditor.value.onDidChangeModelContent(() => { // 自动保存代码 - if (inputEditor.value) { + if (isSaveCode.value && canSaveCode && inputEditor.value) { const inputStr = toRaw(inputEditor.value).getValue(); + console.log(inputStr) store.saveCode = inputStr; } }); @@ -171,6 +197,7 @@ onMounted(async () => { // localStorage.setItem("draft", toRaw(inputEditor.value).getValue()); // } // }, 3000); + } }); diff --git a/src/core/saveCodeStore.ts b/src/core/saveCodeStore.ts index c995c93..cee1b60 100644 --- a/src/core/saveCodeStore.ts +++ b/src/core/saveCodeStore.ts @@ -6,6 +6,7 @@ export const saveCodeStore = defineStore("saveCode", { return { saveCode: "", isSaveCode: true, + autoLoadCode: false, }; }, persist: { diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue index f764614..5d27684 100644 --- a/src/pages/IndexPage.vue +++ b/src/pages/IndexPage.vue @@ -42,6 +42,11 @@ +
+ 代码保存设置: + 暂存代码 + 自动加载代码 +
@@ -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(); const resultStatus = ref(-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; + } +});