up. 使用状态管理器管理设备

z_ele/src/components/LockScreenState/index.vue

@@ -1,7 +1,7 @@
 <template>
   <ele-modal
     title="设备已被锁定"
-    v-model="visible"
+    v-model="clientStore.lockScreen"
     :modal-penetrable="false"
     :append-to-body="true"
     :lock-scroll="true"
@@ -38,16 +38,25 @@
   import { ref } from 'vue';
   import { WsEvent, wsEventManager } from '@/plugins/websocket';
   import { clientScreenUnlock } from '@/api/layout';
+  import {useClientStore} from "@/store/modules/client";
 
-  const visible = ref(false);
+  /** 设备状态管理器 */
+  const clientStore = useClientStore();
+  /** 输入解锁密码 */
   const lockPassword = ref('');
+  /** 解锁loading. */
   const unlockLoading = ref(false);
+  /** 确定解锁 */
   const confirmUnlock = () => {
+    if(unlockLoading.value){
+      return;
+    }
     unlockLoading.value = true;
+
     clientScreenUnlock({ password: lockPassword.value })
       .then(() => {
-        visible.value = false;
+        clientStore.setLockScreen(false)
-        lockPassword.value = '';
+        lockPassword.value = ''; // 清空密码
       })
       .catch((message) => {
         alert(message);
@@ -56,7 +65,8 @@
         unlockLoading.value = false;
       });
   };
+  /** 事件订阅器 - 锁屏事件 */
   wsEventManager.subscribe(WsEvent.LOCK_CLIENT_SCREEN, () => {
-    visible.value = true;
+    clientStore.setLockScreen(true);
   });
 </script>

z_ele/src/store/modules/client.ts

@@ -0,0 +1,21 @@
+/**
+ * 设备状态管理
+ */
+import { defineStore } from 'pinia';
+
+export interface ClientState {
+  lockScreen: boolean;
+}
+
+export const useClientStore = defineStore('client', {
+  state: (): ClientState => ({
+    /** 锁定会话 */
+    lockScreen: false,
+  }),
+  actions: {
+    setLockScreen(value: boolean) {
+      console.log("锁屏")
+      this.lockScreen = value;
+    },
+  }
+});