新增了游戏登陆页面的本地历史储存

package.json

@@ -13,6 +13,7 @@
     "axios": "^1.7.2",
     "element-plus": "^2.7.8",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"
   },

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       pinia:
         specifier: ^2.1.7
         version: 2.2.0(vue@3.4.34)
+      pinia-plugin-persistedstate:
+        specifier: ^3.2.1
+        version: 3.2.1(pinia@2.2.0(vue@3.4.34))
       vue:
         specifier: ^3.4.29
         version: 3.4.34
@@ -463,6 +466,11 @@ packages:
   picocolors@1.0.1:
     resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==, tarball: https://registry.npmmirror.com/picocolors/-/picocolors-1.0.1.tgz}
 
+  pinia-plugin-persistedstate@3.2.1:
+    resolution: {integrity: sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==, tarball: https://registry.npmmirror.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.1.tgz}
+    peerDependencies:
+      pinia: ^2.0.0
+
   pinia@2.2.0:
     resolution: {integrity: sha512-iPrIh26GMqfpUlMOGyxuDowGmYousTecbTHFwT0xZ1zJvh23oQ+Cj99ZoPQA1TnUPhU6AuRPv6/drkTCJ0VHQA==, tarball: https://registry.npmmirror.com/pinia/-/pinia-2.2.0.tgz}
     peerDependencies:
@@ -905,6 +913,10 @@ snapshots:
 
   picocolors@1.0.1: {}
 
+  pinia-plugin-persistedstate@3.2.1(pinia@2.2.0(vue@3.4.34)):
+    dependencies:
+      pinia: 2.2.0(vue@3.4.34)
+
   pinia@2.2.0(vue@3.4.34):
     dependencies:
       '@vue/devtools-api': 6.6.3

src/main.js

@@ -3,6 +3,7 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
+import pinia from "@/stores/index.js";
 
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
@@ -19,5 +20,6 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 app.use(createPinia())
 app.use(router)
 app.use(ElementPlus)
+app.use(pinia)
 
 app.mount('#app')

src/stores/counter.js

@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})

src/stores/index.js

@@ -0,0 +1,11 @@
+import {createPinia} from 'pinia'
+
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+const pinia = createPinia()
+
+pinia.use(piniaPluginPersistedstate)
+
+export default pinia
+
+export * from './modules/login.js'

src/stores/modules/login.js

@@ -0,0 +1,33 @@
+import {defineStore} from "pinia";
+import {ref} from "vue";
+
+
+export const useAccountStore = defineStore("accountStore", () => {
+        const accounts = ref([])
+
+        const addAccount = (username, password) => {
+            // 如果不存在则新建
+            if (!accounts.value.some(account => account.username === username)) {
+                accounts.value.push({
+                    username: username,
+                    password: password,
+                })
+                // 如果已经存在则更新密码
+            } else {
+                accounts.value.find(account => account.username === username).password = password
+            }
+        }
+
+        const deleteAccount = (username) => {
+            accounts.value = accounts.value.filter(account => account.username !== username)
+        }
+
+        return {
+            accounts,
+            addAccount, deleteAccount
+        }
+    },
+    {
+        persist: true
+    }
+)

src/views/layout/gameLogin.vue

@@ -2,6 +2,10 @@
 
 import {ref} from "vue";
 import {gameLoginInterface} from '@/api/login.js'
+import {useAccountStore} from "@/stores/index.js";
+import {Delete} from "@element-plus/icons-vue";
+
+const accountStore = useAccountStore();
 
 const form = ref({
   username: '',
@@ -20,8 +24,14 @@ const rules = {
 const loginForm = ref(null)
 const gameLogin = async () => {
   await loginForm.value.validate()
-  const res = await gameLoginInterface(form.value.context)
-  console.log(res.data)
+  // const res = await gameLoginInterface(form.value.username, form.value.password)
+  // console.log(res.data)
+  accountStore.addAccount(form.value.username, form.value.password)
+}
+
+const fillAccount = (username, password) => {
+  form.value.username = username
+  form.value.password = password
 }
 
 </script>
@@ -48,6 +58,20 @@ const gameLogin = async () => {
         <el-button type="primary" @click="gameLogin">确认</el-button>
       </el-form-item>
     </el-form>
+    <el-divider/>
+    <div class="account-group">
+      <el-button-group
+          v-for="(item, index) in accountStore.accounts"
+          :key="index"
+      >
+        <el-button type="primary" @click="fillAccount(item.username, item.password)">账号: {{
+            item.username
+          }}
+        </el-button>
+        <el-button :icon="Delete" type="danger" @click="accountStore.deleteAccount(item.username)"></el-button>
+      </el-button-group>
+    </div>
+
   </div>
 </template>
 
@@ -64,4 +88,11 @@ const gameLogin = async () => {
   flex-direction: column;
 }
 
+.account-group {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
 </style>