From 6dd18d155946fa2cea52e5ed2c4a70e997d696fb Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Wed, 6 Dec 2023 19:06:10 +0800
Subject: [PATCH] no message

---
 app.vue           |  80 +++---
 index.css         |   9 +
 index.less        |  13 +-
 package-lock.json | 603 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   4 +-
 5 files changed, 673 insertions(+), 36 deletions(-)

diff --git a/app.vue b/app.vue
index 01ea053..d89b0a8 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,5 @@
 <!-- 
-
+    新增的回答款需要输入图片
 -->
 <template>
     <div>
@@ -25,9 +25,7 @@
                                     历史搜索
                                 </div>
                                 <div class="history-list">
-                                    <div class="history-item ellipsis" v-for="(item, index) in historicalSearchList" :key="index" @click.stop="handleClickHistoricalItem(item)">
-                                        {{ item }}
-                                    </div>
+                                    <div class="history-item ellipsis" v-for="(item, index) in historicalSearchList" :key="index" @click.stop="handleClickHistoricalItem(item)">{{ item }}</div>
                                 </div>
                             </div>
                         </div>
@@ -145,25 +143,15 @@
                                         转发
                                         <div class="transmit-box flexflex" v-if="questionsTransmitState" @click.stop="" style="z-index: 10;">
                                             <div class="transmit-left transmit-web">
-                                                <div class="transmit-title">
-                                                    转发网页版
-                                                </div>
+                                                <div class="transmit-title">转发网页版</div>
                                                 <div class="transmit-content">
-                                                    <div class="transmit-headline">
-                                                        {{ detailsInfo["title"] }}
-                                                    </div>
-                                                    <div class="transmit-url">
-                                                        {{ getCurrentUrl() }}
-                                                    </div>
-                                                </div>
-                                                <div class="transmit-web-btn flexcenter" @click="copyText(detailsInfo['title'] + getCurrentUrl())">
-                                                    复制链接
+                                                    <div class="transmit-headline">{{ detailsInfo["title"] }}</div>
+                                                    <div class="transmit-url">{{ getCurrentUrl() }}</div>
                                                 </div>
+                                                <div class="transmit-web-btn flexcenter" @click="copyText(detailsInfo['title'] + getCurrentUrl())">复制链接</div>
                                             </div>
                                             <div class="transmit-right transmit-mini">
-                                                <div class="transmit-title">
-                                                    转发小程序版
-                                                </div>
+                                                <div class="transmit-title">转发小程序版</div>
                                                 <div class="transmit-content flexcenter">
                                                     <img class="transmit-mini-img" :src="detailShare['qrcode']" />
                                                     <div class="flexcenter">
@@ -177,6 +165,7 @@
                                 </div>
                             </div>
                         </div>
+
                         <!-- 一共多少 -->
                         <div class="answer-total-amount">共 {{ detailsInfo["answers"] }} 个回答</div>
 
@@ -220,7 +209,6 @@
                                         <img class="operate-icon operate-transmit-icon" src="./img/transmit-icon.png" />
                                         转发
                                         <div class="transmit-box flexflex" v-if="item['transmitState']" @click.stop="">
-                                            <!-- <div class="transmit-mask" @click="handleAnswerTransmitList(index)"></div> -->
                                             <div class="transmit-left transmit-web">
                                                 <div class="transmit-title">转发网页版</div>
                                                 <div class="transmit-content">
@@ -353,7 +341,9 @@
                         <!-- 你的答案 -->
                         <div class="your-answer-box">
                             <div class="your-answer-header flexacenter">您的答案</div>
-                            <textarea class="your-answer-textarea" v-model="yourAnswer['text']" placeholder="输入图文内容回答提问"></textarea>
+
+                            <div class="your-answer-textarea" :class="{placeholder: yourAnswerPlaceholderState}" contenteditable="true" @paste="handlePaste($event, 'you')" v-html="yourAnswer['text']" @input="handleInputYou"></div>
+
                             <div class="flexacenter your-answer-bottom">
                                 <div class="option-box flexacenter" @click="cutYourAnswerAnonymous()">
                                     <img class="option-icon" v-if="yourAnswer['anonymous'] == 0" src="./img/tick-no.svg" />
@@ -545,7 +535,7 @@
                 <div class="edit-answers">
                     <img class="close-icon" src="./img/cross-icon.png" @click="closeIAnswer" />
                     <div class="title">编辑回答</div>
-                    <div class="question-textarea" :class="{placeholder: questionPlaceholderState}" contenteditable="true" @paste="handlePaste" v-html="IAnswerInfo['text']" @input="handleInput"></div>
+                    <div class="question-textarea" :class="{placeholder: questionPlaceholderState}" contenteditable="true" @paste="handlePaste($event)" v-html="IAnswerInfo['text']" @input="handleInput"></div>
                     <div class="issue-bottom flexacenter">
                         <div class="option-box flexacenter" @click="amendIAnswer">
                             <img class="option-icon" v-if="IAnswerInfo['anonymous'] == 0" src="./img/tick-no.svg" />
@@ -570,7 +560,7 @@
                     </div>
                     <div class="question-middle flexflex">
                         <div class="question-icon flexcenter">A</div>
-                        <div class="question-textarea" :class="{placeholder: questionPlaceholderState}" contenteditable="true" @paste="handlePaste" v-html="IAnswerInfo['text']" @input="handleInput"></div>
+                        <div class="question-textarea" :class="{placeholder: questionPlaceholderState}" contenteditable="true" @paste="handlePaste($event)" v-html="IAnswerInfo['text']" @input="handleInput"></div>
                     </div>
 
                     <div class="issue-bottom flexacenter">
@@ -1061,8 +1051,12 @@ export default {
         }
 
         // 提交回答
-        const submitAnswer = () => {
-            const questionTextarea = document.querySelector(".question-textarea")
+        const submitAnswer = type => {
+            let questionTextarea = null
+
+            if (type == "you") questionTextarea = document.querySelector(".your-answer-textarea")
+            else questionTextarea = document.querySelector(".question-textarea")
+
             if (questionTextarea) IAnswerInfo.value["text"] = questionTextarea.innerHTML
 
             $ajax("/api/publish/answerSubmit", {
@@ -1082,6 +1076,8 @@ export default {
                     closeIAnswer()
 
                     if (!IAnswerInfo.value["token"]) myCount.value["answer"]++
+
+                    if (type == "you") questionTextarea.innerHTML = ""
                 }
                 handleMsg("success", res["message"] || "操作成功")
             })
@@ -1702,8 +1698,8 @@ export default {
             getList()
         }
 
-        // 处理 回答弹窗的复制图片
-        const handlePaste = event => {
+        // 处理 回答弹窗的复制图片  type:you 为 您的答案
+        const handlePaste = (event, type) => {
             const items = (event.clipboardData || event.originalEvent.clipboardData).items
             for (const item of items) {
                 if (item.type.indexOf("image") === 0) {
@@ -1716,13 +1712,19 @@ export default {
                     reader.onload = e => {
                         const base64 = e.target.result
                         uploadImg(base64).then(res => {
-                            const questionTextarea = document.querySelector(".question-textarea")
+                            let questionTextarea = null
+                            if (type == "you") questionTextarea = document.querySelector(".your-answer-textarea")
+                            else questionTextarea = document.querySelector(".question-textarea")
+
                             let imgNode = document.createElement("img")
                             imgNode.setAttribute("src", res.url)
                             imgNode.setAttribute("data-aid", res.aid)
                             questionTextarea.appendChild(imgNode)
-                            handleInput()
-                            handleMsg("warning", "上传成功")
+
+                            if (type == "you") handleInputYou()
+                            else handleInput()
+
+                            handleMsg("success", "上传成功")
                         })
                     }
                     reader.readAsDataURL(file)
@@ -1744,16 +1746,23 @@ export default {
 
         // 回答 的 placeholder 状态
         let questionPlaceholderState = ref(false)
+        let yourAnswerPlaceholderState = ref(true) // 您的答案的 placeholder 状态
 
         // 回答的输入事件 判断是否显示 placeholder 用
-        const handleInput = event => {
-            // IAnswerInfo.value['text'] = event.target.innerHTML;
+        const handleInput = () => {
             const questionTextarea = document.querySelector(".question-textarea")
             const html = questionTextarea.innerHTML
             if (html) questionPlaceholderState.value = false
             else questionPlaceholderState.value = true
         }
 
+        const handleInputYou = () => {
+            const questionTextarea = document.querySelector(".your-answer-textarea")
+            const html = questionTextarea.innerHTML
+            if (html) yourAnswerPlaceholderState.value = false
+            else yourAnswerPlaceholderState.value = true
+        }
+
         let msg = ref({}) // 提示文本的对象 state 类型 type  success warning error 显示状态 text 内容
 
         // 调用 提示框方法
@@ -1910,6 +1919,9 @@ export default {
         })
         let seo = ref({})
         try {
+            // 这是一个 等待的方法 如果复制后 会 多次等待
+            // await new Promise(resolve => setTimeout(resolve, 2000))
+
             const params = route.query
             if (params["keyword"]) keyword.value = params["keyword"]
             if (params["tid"]) typePitch.value = params["tid"]
@@ -1993,9 +2005,10 @@ export default {
             yourAnswer.value["anonymous"] = yourAnswer.value["anonymous"] ? 0 : 1
         }
 
+        // 处理 您的答案的点击提交
         const handleYourAnswer = () => {
             IAnswerInfo.value = {...yourAnswer.value}
-            submitAnswer()
+            submitAnswer("you")
 
             yourAnswer.value = {
                 text: "",
@@ -2046,6 +2059,7 @@ export default {
             copyText,
             boxClass,
             questionPlaceholderState,
+            yourAnswerPlaceholderState,
             handleInput,
             handlePaste,
             itemStyle,
diff --git a/index.css b/index.css
index cb0a649..05d6e67 100644
--- a/index.css
+++ b/index.css
@@ -599,6 +599,15 @@ body::-webkit-scrollbar {
   border: none;
   outline: none;
   resize: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+#answer-app .main .details-area-box .details-box .your-answer-box .your-answer-textarea.placeholder::after {
+  content: "输入图文内容回答提问";
+  color: #999;
+}
+#answer-app .main .details-area-box .details-box .your-answer-box .your-answer-textarea img {
+  max-width: 100%;
 }
 #answer-app .main .details-area-box .details-box .your-answer-box .your-answer-bottom {
   height: 50px;
diff --git a/index.less b/index.less
index 172e003..019a387 100644
--- a/index.less
+++ b/index.less
@@ -171,7 +171,6 @@ body {
                         top: 36px;
                         left: 0;
                         width: 320px;
-                        // height: 267px;
                         background-color: rgba(255, 255, 255, 1);
                         border: 1px solid rgba(235, 235, 235, 1);
                         border-radius: 10px;
@@ -773,6 +772,17 @@ body {
                         border: none;
                         outline: none;
                         resize: none;
+                        overflow-x: hidden;
+                        overflow-y: auto;
+
+                        &.placeholder::after {
+                            content: "输入图文内容回答提问";
+                            color: #999;
+                        }
+
+                        img {
+                            max-width: 100%;
+                        }
                     }
 
                     .your-answer-bottom {
@@ -1918,7 +1928,6 @@ body {
             flex: 1;
             overflow: auto;
 
-
             &.placeholder::after {
                 content: "输入图文内容回答提问";
                 color: #999;
diff --git a/package-lock.json b/package-lock.json
index 16d99be..a0cafd6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,9 @@
       },
       "devDependencies": {
         "@nuxt/devtools": "latest",
+        "@nuxt/test-utils": "^3.8.1",
         "nuxt": "^3.8.2",
+        "vitest": "^0.33.0",
         "vue": "^3.3.8",
         "vue-router": "^4.2.5"
       }
@@ -1164,6 +1166,18 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/@jest/schemas": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
+      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+      "dev": true,
+      "dependencies": {
+        "@sinclair/typebox": "^0.27.8"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -1730,6 +1744,180 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@nuxt/test-utils": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/test-utils/-/test-utils-3.8.1.tgz",
+      "integrity": "sha512-8ZQ+OZ7z5Sc5KG2aCvk0piheYSpGb2UQJMCWr8ORwEyZIw4awrkkwGzUY06e344E4StvJB8zxN122MEcFNOkow==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "3.8.1",
+        "@nuxt/schema": "3.8.1",
+        "consola": "^3.2.3",
+        "defu": "^6.1.3",
+        "execa": "^8.0.1",
+        "get-port-please": "^3.1.1",
+        "ofetch": "^1.3.3",
+        "pathe": "^1.1.1",
+        "ufo": "^1.3.1"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      },
+      "peerDependencies": {
+        "@jest/globals": "^29.5.0",
+        "playwright-core": "^1.34.3",
+        "vitest": "^0.30.0 || ^0.31.0 || ^0.32.0 || ^0.33.0",
+        "vue": "^3.3.4"
+      },
+      "peerDependenciesMeta": {
+        "@jest/globals": {
+          "optional": true
+        },
+        "playwright-core": {
+          "optional": true
+        },
+        "vitest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nuxt/test-utils/node_modules/@nuxt/kit": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.8.1.tgz",
+      "integrity": "sha512-DrhG1Z85iH68QOTkgfb0HVfM2g7+CfcMWrFWMDwck9ofyM2RXQUZyfmvMedwBnui1AjjpgpLO9078yZM+RqNUg==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/schema": "3.8.1",
+        "c12": "^1.5.1",
+        "consola": "^3.2.3",
+        "defu": "^6.1.3",
+        "globby": "^13.2.2",
+        "hash-sum": "^2.0.0",
+        "ignore": "^5.2.4",
+        "jiti": "^1.21.0",
+        "knitwork": "^1.0.0",
+        "mlly": "^1.4.2",
+        "pathe": "^1.1.1",
+        "pkg-types": "^1.0.3",
+        "scule": "^1.0.0",
+        "semver": "^7.5.4",
+        "ufo": "^1.3.1",
+        "unctx": "^2.3.1",
+        "unimport": "^3.4.0",
+        "untyped": "^1.4.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
+    "node_modules/@nuxt/test-utils/node_modules/@nuxt/schema": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.8.1.tgz",
+      "integrity": "sha512-fSaWRcI/2mUskfTZTGSnH6Ny0x05CRzylbVn6WFV0d6UEKIVy42Qd6n+h7yoFfp4cq4nji6u16PT4SqS1DEhsw==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/ui-templates": "^1.3.1",
+        "consola": "^3.2.3",
+        "defu": "^6.1.3",
+        "hookable": "^5.5.3",
+        "pathe": "^1.1.1",
+        "pkg-types": "^1.0.3",
+        "std-env": "^3.4.3",
+        "ufo": "^1.3.1",
+        "unimport": "^3.4.0",
+        "untyped": "^1.4.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
+    "node_modules/@nuxt/test-utils/node_modules/execa": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/@nuxt/test-utils/node_modules/get-stream": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@nuxt/test-utils/node_modules/globby": {
+      "version": "13.2.2",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
+      "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
+      "dev": true,
+      "dependencies": {
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.3.0",
+        "ignore": "^5.2.4",
+        "merge2": "^1.4.1",
+        "slash": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@nuxt/test-utils/node_modules/human-signals": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.17.0"
+      }
+    },
+    "node_modules/@nuxt/test-utils/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@nuxt/test-utils/node_modules/slash": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@nuxt/ui-templates": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@nuxt/ui-templates/-/ui-templates-1.3.1.tgz",
@@ -2543,6 +2731,12 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/@sinclair/typebox": {
+      "version": "0.27.8",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
+      "dev": true
+    },
     "node_modules/@sindresorhus/merge-streams": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-1.0.0.tgz",
@@ -2601,6 +2795,21 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "4.3.11",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.11.tgz",
+      "integrity": "sha512-qQR1dr2rGIHYlJulmr8Ioq3De0Le9E4MJ5AiaeAETJJpndT1uUNHsGFK3L/UIu+rbkQSdj8J/w2bCsBZc/Y5fQ==",
+      "dev": true
+    },
+    "node_modules/@types/chai-subset": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/chai-subset/-/chai-subset-1.3.5.tgz",
+      "integrity": "sha512-c2mPnw+xHtXDoHmdtcCXGwyLMiauiAyxWMzhGpqHC4nqI/Y5G2XhTampslK2rb59kpcuHon03UH8W6iYUzw88A==",
+      "dev": true,
+      "dependencies": {
+        "@types/chai": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -2817,6 +3026,74 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.33.0.tgz",
+      "integrity": "sha512-sVNf+Gla3mhTCxNJx+wJLDPp/WcstOe0Ksqz4Vec51MmgMth/ia0MGFEkIZmVGeTL5HtjYR4Wl/ZxBxBXZJTzQ==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/spy": "0.33.0",
+        "@vitest/utils": "0.33.0",
+        "chai": "^4.3.7"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.33.0.tgz",
+      "integrity": "sha512-UPfACnmCB6HKRHTlcgCoBh6ppl6fDn+J/xR8dTufWiKt/74Y9bHci5CKB8tESSV82zKYtkBJo9whU3mNvfaisg==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/utils": "0.33.0",
+        "p-limit": "^4.0.0",
+        "pathe": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-0.33.0.tgz",
+      "integrity": "sha512-tJjrl//qAHbyHajpFvr8Wsk8DIOODEebTu7pgBrP07iOepR5jYkLFiqLq2Ltxv+r0uptUb4izv1J8XBOwKkVYA==",
+      "dev": true,
+      "dependencies": {
+        "magic-string": "^0.30.1",
+        "pathe": "^1.1.1",
+        "pretty-format": "^29.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.33.0.tgz",
+      "integrity": "sha512-Kv+yZ4hnH1WdiAkPUQTpRxW8kGtH8VRTnus7ZTGovFYM1ZezJpvGtb9nPIjPnptHbsyIAxYZsEpVPYgtpjGnrg==",
+      "dev": true,
+      "dependencies": {
+        "tinyspy": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.33.0.tgz",
+      "integrity": "sha512-pF1w22ic965sv+EN6uoePkAOTkAPWM03Ri/jXNyMIKBb/XHLDPfhLvf/Fa9g0YECevAIz56oVYXhodLvLQ/awA==",
+      "dev": true,
+      "dependencies": {
+        "diff-sequences": "^29.4.3",
+        "loupe": "^2.3.6",
+        "pretty-format": "^29.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/@vue-macros/common": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-1.9.0.tgz",
@@ -3022,6 +3299,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-walk": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz",
+      "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
@@ -3200,6 +3486,15 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/assertion-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ast-kit": {
       "version": "0.11.2",
       "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-0.11.2.tgz",
@@ -3616,6 +3911,24 @@
         }
       ]
     },
+    "node_modules/chai": {
+      "version": "4.3.10",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.10.tgz",
+      "integrity": "sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==",
+      "dev": true,
+      "dependencies": {
+        "assertion-error": "^1.1.0",
+        "check-error": "^1.0.3",
+        "deep-eql": "^4.1.3",
+        "get-func-name": "^2.0.2",
+        "loupe": "^2.3.6",
+        "pathval": "^1.1.1",
+        "type-detect": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/chalk": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
@@ -3628,6 +3941,18 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/check-error": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz",
+      "integrity": "sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==",
+      "dev": true,
+      "dependencies": {
+        "get-func-name": "^2.0.2"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -4210,6 +4535,18 @@
         }
       }
     },
+    "node_modules/deep-eql": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
+      "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==",
+      "dev": true,
+      "dependencies": {
+        "type-detect": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -4340,6 +4677,36 @@
         "node": ">=0.3.1"
       }
     },
+    "node_modules/diff-sequences": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
+      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
+      "dev": true,
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dir-glob/node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -4882,6 +5249,15 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
+    "node_modules/get-func-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
+      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/get-port-please": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/get-port-please/-/get-port-please-3.1.1.tgz",
@@ -5858,6 +6234,15 @@
       "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
       "dev": true
     },
+    "node_modules/loupe": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz",
+      "integrity": "sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==",
+      "dev": true,
+      "dependencies": {
+        "get-func-name": "^2.0.1"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -7015,6 +7400,21 @@
         "openapi-typescript": "bin/cli.js"
       }
     },
+    "node_modules/p-limit": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
+      "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^1.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/p-map": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
@@ -7175,6 +7575,15 @@
       "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
       "dev": true
     },
+    "node_modules/pathval": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
+      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/perfect-debounce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
@@ -7694,6 +8103,32 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pretty-format": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/proc-log": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-3.0.0.tgz",
@@ -7813,6 +8248,12 @@
         "flat": "^5.0.2"
       }
     },
+    "node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "dev": true
+    },
     "node_modules/read-package-json": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/read-package-json/-/read-package-json-7.0.0.tgz",
@@ -8424,6 +8865,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true
+    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -8617,6 +9064,12 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true
+    },
     "node_modules/standard-as-callback": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz",
@@ -8912,6 +9365,30 @@
       "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
       "dev": true
     },
+    "node_modules/tinybench": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.1.tgz",
+      "integrity": "sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==",
+      "dev": true
+    },
+    "node_modules/tinypool": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.6.0.tgz",
+      "integrity": "sha512-FdswUUo5SxRizcBc6b1GSuLpLjisa8N8qMyYoP3rl+bym+QauhtJP5bvZY1ytt8krKGmMLYIRl36HBZfeAoqhQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.0.tgz",
+      "integrity": "sha512-d2eda04AN/cPOR89F7Xv5bK/jrQEhmcLFe6HFldoeO9AJtps+fqEnh486vnT/8y4bw38pSyxDcTCAq+Ks2aJTg==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/titleize": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",
@@ -8983,6 +9460,15 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/type-fest": {
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
@@ -10065,6 +10551,95 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/vitest": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.33.0.tgz",
+      "integrity": "sha512-1CxaugJ50xskkQ0e969R/hW47za4YXDUfWJDxip1hwbnhUjYolpfUn2AMOulqG/Dtd9WYAtkHmM/m3yKVrEejQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/chai": "^4.3.5",
+        "@types/chai-subset": "^1.3.3",
+        "@types/node": "*",
+        "@vitest/expect": "0.33.0",
+        "@vitest/runner": "0.33.0",
+        "@vitest/snapshot": "0.33.0",
+        "@vitest/spy": "0.33.0",
+        "@vitest/utils": "0.33.0",
+        "acorn": "^8.9.0",
+        "acorn-walk": "^8.2.0",
+        "cac": "^6.7.14",
+        "chai": "^4.3.7",
+        "debug": "^4.3.4",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.1",
+        "pathe": "^1.1.1",
+        "picocolors": "^1.0.0",
+        "std-env": "^3.3.3",
+        "strip-literal": "^1.0.1",
+        "tinybench": "^2.5.0",
+        "tinypool": "^0.6.0",
+        "vite": "^3.0.0 || ^4.0.0",
+        "vite-node": "0.33.0",
+        "why-is-node-running": "^2.2.2"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": ">=v14.18.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@vitest/browser": "*",
+        "@vitest/ui": "*",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "playwright": "*",
+        "safaridriver": "*",
+        "webdriverio": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@vitest/browser": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "playwright": {
+          "optional": true
+        },
+        "safaridriver": {
+          "optional": true
+        },
+        "webdriverio": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest/node_modules/local-pkg": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
+      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/vscode-jsonrpc": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-6.0.0.tgz",
@@ -10247,6 +10822,22 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz",
+      "integrity": "sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==",
+      "dev": true,
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/wide-align": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
@@ -10369,6 +10960,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/yocto-queue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
+      "integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/zhead": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.2.4.tgz",
diff --git a/package.json b/package.json
index bbe1fa5..099443a 100644
--- a/package.json
+++ b/package.json
@@ -4,14 +4,16 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev --port 3000",
+    "dev": "nuxt dev --port 3001",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
+    "@nuxt/test-utils": "^3.8.1",
     "nuxt": "^3.8.2",
+    "vitest": "^0.33.0",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5"
   },