feat(urlEncode): 添加历史记录

src/stores/urlEncode.ts

@@ -0,0 +1,22 @@
+import { acceptHMRUpdate, defineStore } from 'pinia'
+
+export const useStore = defineStore('urlEncode', {
+  persist: true,
+  state: () => ({
+    history: [] as Array<Array<string>>
+  }),
+  actions: {
+    addHistory ({ origin, target }: { origin: string, target: string }) {
+      if (origin && target) {
+        this.history.push([origin, target])
+      }
+    },
+    clearHistory () {
+      this.history = []
+    }
+  }
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useStore, import.meta.hot))
+}

src/views/crypto/urlEncode.vue

@@ -42,20 +42,56 @@
       placeholder="转换的内容粘贴在这里"
       :autosize="{ minRows: 5, maxRows: 8 }"
     />
+    <template v-if="urlEncodeStore.history.length">
+      <a-typography-title :level="5">
+        历史
+      </a-typography-title>
+      <div class="history-list">
+        <el-button
+          v-for="(history, index) in urlEncodeStore.history"
+          :key="index"
+          type="primary"
+          link
+          @click="revertHistory(history)"
+        >
+          <span class="origin">
+            {{ history[0] }}
+          </span>
+          &nbsp;-->&nbsp;
+          <span class="target">
+            {{ history[1] }}
+          </span>
+        </el-button>
+      </div>
+    </template>
   </el-space>
 </template>
 
 <script setup lang="ts">
 import type { Ref } from 'vue'
+import { useStore } from '@/stores/urlEncode'
 
 const value: Ref<string> = ref('')
 const result: Ref<string> = ref('')
+const urlEncodeStore = useStore()
 
 function encode () {
   result.value = encodeURIComponent(value.value)
+  if (value.value && result.value) {
+    urlEncodeStore.addHistory({
+      origin: value.value,
+      target: result.value
+    })
+  }
 }
 function decode () {
   result.value = decodeURIComponent(value.value)
+  if (value.value && result.value) {
+    urlEncodeStore.addHistory({
+      origin: value.value,
+      target: result.value
+    })
+  }
 }
 function revert () {
   const tmp = value.value
@@ -65,6 +101,12 @@ function revert () {
 function clear () {
   value.value = ''
   result.value = ''
+  urlEncodeStore.clearHistory()
+}
+
+function revertHistory (history: Array<string>) {
+  value.value = history[0]
+  result.value = history[1]
 }
 </script>
 
@@ -84,4 +126,10 @@ function clear () {
     }
   }
 }
+
+.history-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
 </style>