From 96deae5fb9b0a2ee5f397cee7793b84ee5410202 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=BE=A3=E6=A9=99?= <68316902+laorange@users.noreply.github.com> Date: Fri, 3 Feb 2023 17:39:06 +0800 Subject: [PATCH 01/32] =?UTF-8?q?perf:=20createWebHashHistory=20=E2=86=92?= =?UTF-8?q?=20createWebHistory?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/router.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/router/router.ts b/src/router/router.ts index 51c0912..0b54887 100644 --- a/src/router/router.ts +++ b/src/router/router.ts @@ -1,4 +1,4 @@ -import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router"; +import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router"; import ArticleCopyTool from "./article-copy-tool/ArticleCopyTool.vue"; @@ -12,6 +12,6 @@ const routes: RouteRecordRaw[] = [ ]; export default createRouter({ - history: createWebHashHistory(), + history: createWebHistory(), routes, }); From a7f19144d160eacedd3d6b250616ce3b54e40423 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=BE=A3=E6=A9=99?= <68316902+laorange@users.noreply.github.com> Date: Fri, 3 Feb 2023 18:14:07 +0800 Subject: [PATCH 02/32] =?UTF-8?q?refactor:=20=E6=95=B4=E5=90=88pinia?= =?UTF-8?q?=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 5 +- .../article-copy-tool/ArticleCopyTool.vue | 52 +++++++++---------- src/store/useStore.ts | 24 ++++++--- 3 files changed, 46 insertions(+), 35 deletions(-) diff --git a/src/App.vue b/src/App.vue index 53c30a8..2b9d39e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -21,10 +21,11 @@ onBeforeMount(() => { let storageNow = storage.getStorageSync(LOCAL_STORAGE_KEY); if (!!storageNow && storageNow?.version !== packageJson.version) { // 1. 本地缓存不为空 2.更新版本时 => 1.清除本地缓存 2.弹出更新日志 - storageNow.handlerOptions = {}; + console.log(`版本更新：${storageNow?.version} → ${packageJson.version}`); + storageNow = store.storage; store.showUpdateLog = true; } - store.storage = {...store.storage, ...storageNow ?? {}, version: packageJson.version}; + store.storage = {...store.storage, ...storageNow, version: packageJson.version}; }); diff --git a/src/router/article-copy-tool/ArticleCopyTool.vue b/src/router/article-copy-tool/ArticleCopyTool.vue index 9d75311..8c06aa4 100644 --- a/src/router/article-copy-tool/ArticleCopyTool.vue +++ b/src/router/article-copy-tool/ArticleCopyTool.vue @@ -23,8 +23,8 @@ function getTextHandlerArray(): TextHandlerWithName[] { return Object.entries(textHandlers).map(([handlerName, handler], index) => { return { handlerName: handlerName, - handler: {...handler, activate: store.storage.handlerOptions[handlerName]?.activate ?? handler.activate}, - order: store.storage.handlerOptions[handlerName]?.order ?? handlerAmount + index, + handler: {...handler, activate: store.storage.copy.handlerOptions[handlerName]?.activate ?? handler.activate}, + order: store.storage.copy.handlerOptions[handlerName]?.order ?? handlerAmount + index, }; }).sort((a, b) => a.order - b.order).map(data => { return {...data.handler, handlerName: data.handlerName}; @@ -32,21 +32,19 @@ function getTextHandlerArray(): TextHandlerWithName[] { } const refTextHandlerArray = ref(getTextHandlerArray()); -const inputText = ref(""); -const outputText = ref(""); function transformText() { - outputText.value = refTextHandlerArray.value + store.copy.outputText = refTextHandlerArray.value .filter(textHandler => textHandler.activate) - .reduce((text, textHandler) => textHandler.executor(text), inputText.value); + .reduce((text, textHandler) => textHandler.executor(text), store.copy.inputText); } -watch(() => inputText.value, transformText); +watch(() => store.copy.inputText, transformText); watch(() => refTextHandlerArray.value, (ths) => { transformText(); - let handlerOptions: typeof store.storage.handlerOptions = {}; + let handlerOptions: typeof store.storage.copy.handlerOptions = {}; ths.map((th, index) => handlerOptions[th.handlerName] = {order: index, activate: th.activate}); - store.storage.handlerOptions = handlerOptions; // 将顺序和激活状态写入localstorage + store.storage.copy.handlerOptions = handlerOptions; // 将顺序和激活状态写入localstorage }, {deep: true, immediate: true}); function setTextHandlerArrayToDefault() { @@ -56,35 +54,35 @@ function setTextHandlerArrayToDefault() { } async function copyInputText(info: string = "复制成功") { - await toClipboard(inputText.value); + await toClipboard(store.copy.inputText); message.success(info); } async function cutInputText() { - let outputTextTemp = outputText.value; + let outputTextTemp = store.copy.outputText; await copyInputText("剪切成功"); - inputText.value = ""; - await nextTick(() => outputText.value = outputTextTemp); + store.copy.inputText = ""; + await nextTick(() => store.copy.outputText = outputTextTemp); } function clearInputText() { - let outputTextTemp = outputText.value; - inputText.value = ""; - nextTick(() => outputText.value = outputTextTemp); + let outputTextTemp = store.copy.outputText; + store.copy.inputText = ""; + nextTick(() => store.copy.outputText = outputTextTemp); } async function copyOutputText(info: string = "复制成功") { - await toClipboard(outputText.value); + await toClipboard(store.copy.outputText); message.success(info); } async function cutOutputText() { await copyOutputText("剪切成功"); - outputText.value = ""; + store.copy.outputText = ""; } const showConfigDrawer = ref(false); -const tooManyInput = computed(() => inputText.value.length > 500); +const tooManyInput = computed(() => store.copy.inputText.length > 500); function introduce() { let steps: { element?: Element | null, title?: string, intro?: string, position?: string }[] = [ @@ -152,14 +150,14 @@ function movePositionOfHandler(type: "up" | "down", index: number) {
- +
- 复制 - 剪切 - 清空 + 复制 + 剪切 + 清空
@@ -168,13 +166,13 @@ function movePositionOfHandler(type: "up" | "down", index: number) {
- +
- 复制 - 剪切 - 清空 + 复制 + 剪切 + 清空
diff --git a/src/store/useStore.ts b/src/store/useStore.ts index 3a4edd5..671a0ba 100644 --- a/src/store/useStore.ts +++ b/src/store/useStore.ts @@ -1,11 +1,13 @@ import {defineStore} from "pinia"; export interface Storage { - handlerOptions: { - [handlerName: string]: { - activate: boolean, - order: number - } + copy: { + handlerOptions: { + [handlerName: string]: { + activate: boolean, + order: number + } + }; }; version: string; } @@ -13,16 +15,26 @@ export interface Storage { export interface State { storage: Storage, showUpdateLog: boolean, + copy: { + inputText: string, + outputText: string, + } } export const useStore = defineStore("store", { state: (): State => { return { storage: { - handlerOptions: {}, + copy: { + handlerOptions: {}, + }, version: "", }, showUpdateLog: false, + copy: { + inputText: "", + outputText: "", + }, }; }, getters: {}, From 5db6ddc8edca5292e78876ce1a4ee3d7da38db0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=BE=A3=E6=A9=99?= <68316902+laorange@users.noreply.github.com> Date: Sat, 4 Feb 2023 11:13:33 +0800 Subject: [PATCH 03/32] =?UTF-8?q?refactor:=20InputArea=20&=20OutputArea=20?= =?UTF-8?q?=E6=8B=86=E5=88=86=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../article-copy-tool/ArticleCopyTool.vue | 74 +++---------------- .../components/InputArea.vue | 16 ++++ .../components/InputFuncButtons.vue | 46 ++++++++++++ .../components/OutputArea.vue | 15 ++++ .../components/OutputFuncButtons.vue | 41 ++++++++++ 5 files changed, 127 insertions(+), 65 deletions(-) create mode 100644 src/router/article-copy-tool/components/InputArea.vue create mode 100644 src/router/article-copy-tool/components/InputFuncButtons.vue create mode 100644 src/router/article-copy-tool/components/OutputArea.vue create mode 100644 src/router/article-copy-tool/components/OutputFuncButtons.vue diff --git a/src/router/article-copy-tool/ArticleCopyTool.vue b/src/router/article-copy-tool/ArticleCopyTool.vue index 8c06aa4..3fcf77f 100644 --- a/src/router/article-copy-tool/ArticleCopyTool.vue +++ b/src/router/article-copy-tool/ArticleCopyTool.vue @@ -1,16 +1,15 @@ + + + + diff --git a/src/router/article-copy-tool/components/InputFuncButtons.vue b/src/router/article-copy-tool/components/InputFuncButtons.vue new file mode 100644 index 0000000..bcd904e --- /dev/null +++ b/src/router/article-copy-tool/components/InputFuncButtons.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/src/router/article-copy-tool/components/OutputArea.vue b/src/router/article-copy-tool/components/OutputArea.vue new file mode 100644 index 0000000..03e543a --- /dev/null +++ b/src/router/article-copy-tool/components/OutputArea.vue @@ -0,0 +1,15 @@ + + + + + diff --git a/src/router/article-copy-tool/components/OutputFuncButtons.vue b/src/router/article-copy-tool/components/OutputFuncButtons.vue new file mode 100644 index 0000000..d5bed97 --- /dev/null +++ b/src/router/article-copy-tool/components/OutputFuncButtons.vue @@ -0,0 +1,41 @@ + + + + + From 0f1589c62efe076eb8e8a2c5028b5d2b3907c986 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=BE=A3=E6=A9=99?= <68316902+laorange@users.noreply.github.com> Date: Sat, 4 Feb 2023 11:28:23 +0800 Subject: [PATCH 04/32] =?UTF-8?q?refactor:=20PreferenceConfig=20=E6=8B=86?= =?UTF-8?q?=E5=88=86=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../article-copy-tool/ArticleCopyTool.vue | 93 ++----------------- .../components/PreferenceConfig.vue | 90 ++++++++++++++++++ 2 files changed, 99 insertions(+), 84 deletions(-) create mode 100644 src/router/article-copy-tool/components/PreferenceConfig.vue diff --git a/src/router/article-copy-tool/ArticleCopyTool.vue b/src/router/article-copy-tool/ArticleCopyTool.vue index 3fcf77f..8faea1a 100644 --- a/src/router/article-copy-tool/ArticleCopyTool.vue +++ b/src/router/article-copy-tool/ArticleCopyTool.vue @@ -1,66 +1,26 @@ From 4ca2409de669823be545526cbeda29e3ad7eb690 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=BE=A3=E6=A9=99?= <68316902+laorange@users.noreply.github.com> Date: Sat, 4 Feb 2023 11:32:41 +0800 Subject: [PATCH 05/32] =?UTF-8?q?refactor:=20useIntroducer=20=E6=8B=86?= =?UTF-8?q?=E5=88=86hook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ts/article-copy-tool/useIntroducer.ts | 44 +++++++++++++++++++ .../article-copy-tool/ArticleCopyTool.vue | 42 +----------------- 2 files changed, 46 insertions(+), 40 deletions(-) create mode 100644 src/assets/ts/article-copy-tool/useIntroducer.ts diff --git a/src/assets/ts/article-copy-tool/useIntroducer.ts b/src/assets/ts/article-copy-tool/useIntroducer.ts new file mode 100644 index 0000000..b9168cf --- /dev/null +++ b/src/assets/ts/article-copy-tool/useIntroducer.ts @@ -0,0 +1,44 @@ +// @ts-ignore +import introJs from "intro.js"; +import {textHandlers} from "./handlers"; + +export default function useIntroducer() { + function introduce() { + let steps: { element?: Element | null, title?: string, intro?: string, position?: string }[] = [ + { + element: document.querySelector(".preference-config"), + title: "偏好设置", + intro: `按需启用功能。目前您可以选择:

${Object.values(textHandlers).map((h, i) => `${i + 1}. ` + h.description).join("
")}

`, + }, + { + element: document.querySelector(".show-update-log-button"), + title: "更新日志", + intro: "查看本网站的版本迭代过程", + }, + { + element: document.querySelector(".input-area"), + title: "输入框", + intro: `请在这里输入内容，程序将根据偏好设置进行文本处理。
此外，如果您:
①输入的是英文
②使用电脑访问
将为您检测语法(基于Grammarly)`, + }, + { + element: document.querySelector(".output-area"), + title: "输出框", + intro: "将在这里输出处理结果", + }, + ]; + + introJs().setOptions({ + showBullets: false, + keyboardNavigation: true, + disableInteraction: true, + exitOnOverlayClick: true, + prevLabel: "上一步", + nextLabel: "下一步", + doneLabel: "完成", + autoPosition: true, + steps, + }).start(); + } + + return {introduce}; +}; diff --git a/src/router/article-copy-tool/ArticleCopyTool.vue b/src/router/article-copy-tool/ArticleCopyTool.vue index 8faea1a..7534581 100644 --- a/src/router/article-copy-tool/ArticleCopyTool.vue +++ b/src/router/article-copy-tool/ArticleCopyTool.vue @@ -7,50 +7,12 @@ import InputFuncButtons from "./components/InputFuncButtons.vue"; import OutputArea from "./components/OutputArea.vue"; import OutputFuncButtons from "./components/OutputFuncButtons.vue"; import PreferenceConfig from "./components/PreferenceConfig.vue"; -import {textHandlers} from "../../assets/ts/article-copy-tool/handlers"; -// @ts-ignore -import introJs from "intro.js"; +import useIntroducer from "../../assets/ts/article-copy-tool/useIntroducer"; const store = useStore(); +const introduce = useIntroducer(); const tooManyInput = computed(() => store.copy.inputText.length > 500); - -function introduce() { - let steps: { element?: Element | null, title?: string, intro?: string, position?: string }[] = [ - { - element: document.querySelector(".preference-config"), - title: "偏好设置", - intro: `按需启用功能。目前您可以选择:

${Object.values(textHandlers).map((h, i) => `${i + 1}. ` + h.description).join("
")}

`, - }, - { - element: document.querySelector(".show-update-log-button"), - title: "更新日志", - intro: "查看本网站的版本迭代过程", - }, - { - element: document.querySelector(".input-area"), - title: "输入框", - intro: `请在这里输入内容，程序将根据偏好设置进行文本处理。
此外，如果您:
①输入的是英文
②使用电脑访问
将为您检测语法(基于Grammarly)`, - }, - { - element: document.querySelector(".output-area"), - title: "输出框", - intro: "将在这里输出处理结果", - }, - ]; - - introJs().setOptions({ - showBullets: false, - keyboardNavigation: true, - disableInteraction: true, - exitOnOverlayClick: true, - prevLabel: "上一步", - nextLabel: "下一步", - doneLabel: "完成", - autoPosition: true, - steps, - }).start(); -}