From e3e69db492f520f1d25d692043702ade757033bb Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Mon, 21 Apr 2025 23:21:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4Login?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Login/Login.vue | 297 ----------------------------------------------
 1 file changed, 297 deletions(-)
 delete mode 100644 src/pages/Login/Login.vue

diff --git a/src/pages/Login/Login.vue b/src/pages/Login/Login.vue
deleted file mode 100644
index ab36783..0000000
--- a/src/pages/Login/Login.vue
+++ /dev/null
@@ -1,297 +0,0 @@
-<template>
-  <div class="login-container">
-    <aside class="sidebar">
-      <ul>
-        <li
-          v-for="user in userList"
-          :key="user.id"
-          :class="[
-            'user',
-            { selected: user.account === selectedUser?.account },
-          ]"
-          @click="selectUser(user)"
-        >
-          {{ user.account }}
-        </li>
-      </ul>
-    </aside>
-    <main class="main-content">
-      <div class="pin-container">
-        <p :class="['pin-prompt', { shake: isShaking }]">{{ loginStatus }}</p>
-        <div class="pin-indicators">
-          <span
-            v-for="n in maxPinLength"
-            :key="n"
-            :class="['pin-dot', { filled: n <= pin.length }]"
-          ></span>
-        </div>
-        <div class="pin-keypad">
-          <div
-            v-for="n in 9"
-            :key="n"
-            class="key"
-            @click="inputPin(n.toString())"
-          >
-            {{ n }}
-          </div>
-          <div class="key" @click="clearPin">重输</div>
-          <div class="key" @click="inputPin('0')">0</div>
-          <div class="key" @click="submitPin">确定</div>
-        </div>
-      </div>
-    </main>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch } from 'vue'
-import { login, getUserList, isBoardParamInited } from '@/services'
-import type { User } from '@/types/Index'
-import { useRouter } from 'vue-router'
-import { getServerInfo } from '@/utils/getServerInfo'
-import { createWebSocket, DeviceContextStateMessage } from '@/websocket/socket'
-import { ElMessage } from 'element-plus'
-
-const router = useRouter()
-
-const stateUrl = getServerInfo('/api/v1/app/ws/state')
-const wsState = createWebSocket(stateUrl.wsUrl)
-
-//用户列表
-const userList = ref<User[]>([])
-//获取用户列表
-const getUserListData = async () => {
-  const res = await getUserList()
-  userList.value = res.data
-}
-
-const handleDeviceContextState = (data: DeviceContextStateMessage['data']) => {
-  if (data.loginFlag) {
-    sessionStorage.setItem('token', JSON.stringify(data.loginUser))
-    router.push('/index')
-  }
-}
-onMounted(() => {
-  wsState.subscribe<DeviceContextStateMessage>(
-    'DeviceContext',
-    handleDeviceContextState,
-  )
-  wsState.connect()
-
-  setTimeout(() => {
-    getUserListData()
-  }, 500)
-})
-onUnmounted(() => {
-  wsState.unsubscribe<DeviceContextStateMessage>(
-    'DeviceContext',
-    handleDeviceContextState,
-  )
-})
-//选中的用户
-const selectedUser = ref<User | null>(null)
-// PIN 相关
-const pin = ref('')
-const maxPinLength = 4
-const loginStatus = ref('请输入您的pin码')
-const isShaking = ref(false) // 控制抖动效果的触发
-// 切换角色时清空PIN
-const selectUser = (user: User) => {
-  selectedUser.value = user
-  pin.value = ''
-  loginStatus.value = '请输入您的pin码'
-}
-
-// 输入PIN码
-const inputPin = (key: string) => {
-  if (selectedUser.value === null) {
-    loginStatus.value = '请选择用户'
-    return
-  }
-  if (pin.value.length >= maxPinLength) {
-    return
-  }
-  pin.value += key
-  if (pin.value.length === maxPinLength) {
-    return
-  }
-}
-
-// 重置PIN码
-const clearPin = () => {
-  pin.value = ''
-  loginStatus.value = '请输入您的pin码'
-}
-
-// 点击确认验证PIN码
-// 模拟后端请求验证PIN
-const submitPin = async () => {
-  if (selectedUser.value === null) {
-    loginStatus.value = '请选择用户'
-    return
-  }
-  if (pin.value.length !== maxPinLength) {
-    loginStatus.value = '请输入密码'
-    return
-  }
-  let resData = await isBoardParamInited()
-  if (!resData.data) {
-    //设备正在初始化
-    ElMessage.warning('设备正在初始化，请稍候...')
-    return
-  }
-  const params = {
-    id: selectedUser.value?.id,
-    password: pin.value,
-  }
-  const res = await login(params)
-  if (res.success) {
-    loginStatus.value = '登录成功'
-    sessionStorage.setItem('token', JSON.stringify(res.data))
-    await router.push('/index')
-  } else {
-    loginStatus.value = res.info
-    pin.value = ''
-  }
-}
-// 监听 loginStatus 变化并触发抖动效果
-watch(loginStatus, () => {
-  isShaking.value = true
-  setTimeout(() => {
-    isShaking.value = false
-  }, 500) // 动画持续时间为0.5秒
-})
-</script>
-<style scoped lang="less">
-.login-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-  background: linear-gradient(to bottom, #a1d0f5, #bce0fe); // 垂直线性渐变
-  padding: 15px; // 减小padding
-  box-sizing: border-box;
-}
-
-.sidebar {
-  width: 220px;
-  height: 80vh;
-  background-color: #e1f0fb;
-  border-radius: 20px;
-  padding: 20px 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
-  margin-right: 20px;
-  overflow: auto;
-
-  ul {
-    list-style: none;
-    padding: 0;
-    width: 100%;
-  }
-
-  .user {
-    padding: 12px 0;
-    font-size: 24px;
-    color: #666;
-    cursor: pointer;
-    transition: all 0.3s;
-    border-radius: 10px;
-    margin: 10px 0;
-
-    &:hover {
-      background-color: #b3d9f9;
-      color: #fff;
-    }
-  }
-
-  .selected {
-    background-color: #53b6f3;
-    color: white;
-    font-weight: bold;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-  }
-}
-
-.main-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .pin-container {
-    background-color: #fff;
-    border-radius: 20px;
-    padding: 30px 40px;
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
-    text-align: center;
-
-    .pin-prompt {
-      font-size: 28px;
-      color: #333;
-      margin-bottom: 20px;
-      font-weight: bold;
-
-      &.shake {
-        animation: shake 0.5s ease;
-        color: #d9534f; // 抖动时变色
-      }
-    }
-
-    .pin-indicators {
-      display: flex;
-      justify-content: center;
-      margin: 15px 0;
-
-      .pin-dot {
-        width: 25px;
-        height: 25px;
-        background-color: #d5e6f2;
-        border-radius: 50%;
-        margin: 0 10px;
-        transition: background-color 0.3s;
-
-        &.filled {
-          background-color: #53b6f3;
-        }
-      }
-    }
-
-    .pin-keypad {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 20px;
-      margin-top: 30px;
-
-      .key {
-        width: 90px;
-        height: 90px;
-        background-color: #f0f8ff;
-        border-radius: 15px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 32px;
-        color: #333;
-        cursor: pointer;
-        transition: all 0.3s;
-        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
-
-        &:hover {
-          background-color: #53b6f3;
-          color: #fff;
-        }
-      }
-    }
-  }
-}
-
-.login-status {
-  margin-top: 20px;
-  font-size: 22px;
-  color: #d9534f;
-  font-weight: bold;
-}
-</style>