From fbfd7d198e83fb1ef38cd7d468bba6e12825a22b Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Mon, 21 Apr 2025 16:21:42 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=99=BB=E5=BD=95=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue               |   4 +-
 src/assets/avatar.png     | Bin 0 -> 4097 bytes
 src/pages/Login/Login.vue |   3 +-
 src/pages/Login/index.vue | 241 ++++++++++++++++++++++++++++++++++++++++++++++
 src/router/router.ts      |   2 +-
 src/style.css             |  10 +-
 6 files changed, 253 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/avatar.png
 create mode 100644 src/pages/Login/index.vue

diff --git a/src/App.vue b/src/App.vue
index eecc0b8..08285f7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,9 +4,7 @@ import { ErrorModal, StackInfoModal } from './components/dialogs';
 </script>
 
 <template>
-  <div>
     <router-view></router-view>
-  </div>
   <ErrorModal />
   <StackInfoModal />
 </template>
@@ -14,6 +12,8 @@ import { ErrorModal, StackInfoModal } from './components/dialogs';
 <style>
 html,
 body {
+  width: 100%;
+  height: 100%;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
diff --git a/src/assets/avatar.png b/src/assets/avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..e16488e4534d25626ac002e04ce9c64cd834ade2
GIT binary patch
literal 4097
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

literal 0
HcmV?d00001

diff --git a/src/pages/Login/Login.vue b/src/pages/Login/Login.vue
index bb66a14..ab36783 100644
--- a/src/pages/Login/Login.vue
+++ b/src/pages/Login/Login.vue
@@ -45,8 +45,7 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, watch } from 'vue'
-import { login, getUserList } from '@/services'
-import { isBoardParamInited } from '@/services'
+import { login, getUserList, isBoardParamInited } from '@/services'
 import type { User } from '@/types/Index'
 import { useRouter } from 'vue-router'
 import { getServerInfo } from '@/utils/getServerInfo'
diff --git a/src/pages/Login/index.vue b/src/pages/Login/index.vue
new file mode 100644
index 0000000..a04e5a0
--- /dev/null
+++ b/src/pages/Login/index.vue
@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getUserList } from '@/services/Index/user-manage'
+import type { User } from '@/types/Index'
+import { createWebSocket, DeviceContextStateMessage } from '@/websocket/socket.ts'
+import { getServerInfo } from '@/utils/getServerInfo.ts'
+import router from '@/router/router.ts'
+import { isBoardParamInited, login } from '@/services'
+import circleUrl from '@/assets/avatar.png'
+
+const stateUrl = getServerInfo('/api/v1/app/ws/state')
+const wsState = createWebSocket(stateUrl.wsUrl)
+
+const handleDeviceContextState = (data: DeviceContextStateMessage['data']) => {
+  if (data.loginFlag) {
+    sessionStorage.setItem('token', JSON.stringify(data.loginUser))
+    router.push('/index')
+  }
+}
+
+//用户列表
+const userList = ref<User[]>([])
+//获取用户列表
+const getUserListData = async () => {
+  const res = await getUserList()
+  userList.value = res.data
+}
+
+onMounted(() => {
+  wsState.subscribe<DeviceContextStateMessage>(
+    'DeviceContext',
+    handleDeviceContextState,
+  )
+  wsState.connect()
+  getUserListData()
+})
+
+const activeUser = ref<User>()
+
+const password = ref('')
+
+const inputPin = (pin: string) => {
+  if (password.value.length >= 4) {
+    return
+  }
+  if (password.value.length < 4) {
+    password.value += pin
+  }
+  if (password.value.length === 4) {
+    // 输入完成，执行登录操作
+    submitPin()
+  }
+}
+
+const errorMsg = ref('')
+
+const submitPin = async () => {
+  if (!activeUser.value?.id) {
+    errorMsg.value = '请选择用户'
+    return
+  }
+  if (password.value.length !== 4) {
+    errorMsg.value = '请输入密码'
+    return
+  }
+  let resData = await isBoardParamInited()
+  if (!resData.data) {
+    //设备正在初始化
+    errorMsg.value = '设备正在初始化，请稍候重试'
+    return
+  }
+  const params = {
+    id: activeUser.value?.id,
+    password: password.value,
+  }
+  const res = await login(params)
+  if (res.success) {
+    sessionStorage.setItem('token', JSON.stringify(res.data))
+    await router.push('/index')
+  } else {
+    errorMsg.value = res.info
+    // password.value = ''
+  }
+}
+</script>
+<template>
+  <div class="login-box">
+    <p class="login-title">登录</p>
+    <div class="user-box">
+      <p class="title">选择用户</p>
+      <div class="user-list">
+        <div class="user-info" v-for="user in userList" :key="user.id" @click="activeUser = user" :class="{ 'user-info-active': activeUser?.id === user.id }">
+          <el-avatar :size="60" :src="circleUrl" />
+          <span class="name">{{user.account}}</span>
+          <el-icon v-show="activeUser?.id === user.id" color="#fff"><Select /></el-icon>
+        </div>
+      </div>
+    </div>
+    <div class="password-box">
+      <p class="title">请输入4位PIN码</p>
+      <div class="password-list">
+        <div v-for="i in 4" :key="i" class="password-item" :class="{'password-item-fill': i <= password.length}"></div>
+      </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="password = ''">重输</div>
+        <div class="key" @click="inputPin('0')">0</div>
+        <div class="key" @click="submitPin">确定</div>
+      </div>
+      <div class="error-box">{{errorMsg}}</div>
+    </div>
+  </div>
+
+</template>
+<style lang="less" scoped>
+@keyframes iconAnim {
+  0% { transform: scale(0.8); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
+}
+.login-title {
+  position: absolute;
+  top: 10%;
+  font-size: 50px;
+  font-weight: bold;
+}
+.login-box {
+  width: 100%;
+  height: 100%;
+  background: #A0CEF2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  .user-box {
+    width: 35%;
+    height: 40%;
+    margin-right: 20px;
+    background: #fff;
+    border-radius: 30px;
+    padding: 60px 30px;
+    display: flex;
+    flex-direction: column;
+    .user-list {
+      width: 100%;
+      flex: 1;
+      overflow: auto;
+      .user-info {
+        display: flex;
+        align-items: center;
+        padding: 20px;
+        border-radius: 20px;
+        .name {
+          margin-left: 30px;
+          font-size: 25px;
+          font-weight: bold;
+        }
+        .el-icon {
+          animation: iconAnim 0.3s ease forwards;
+          font-size: 30px;
+          margin-left: auto;
+
+        }
+      }
+      .user-info-active {
+        background: #3E8ED1;
+        color: #fff;
+      }
+    }
+  }
+  .password-box {
+    margin-left: 20px;
+    width: 35%;
+    height: 40%;
+    background: #fff;
+    border-radius: 30px;
+    padding: 60px 30px;
+    display: flex;
+    flex-direction: column;
+  }
+}
+.title {
+  font-size: 30px;
+  font-weight: bold;
+}
+.password-list {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0;
+  .password-item {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: #CDCFD4;
+    margin: 0 10px;
+  }
+  .password-item-fill {
+    background: #3E8ED1;
+  }
+}
+.pin-keypad {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  margin-top: 30px;
+
+  .key {
+    width: 100px;
+    height: 80px;
+    background-color: #fff;
+    border-radius: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    color: #333;
+    cursor: pointer;
+    transition: all 0.3s;
+    border: 1px solid #E7EDF1;
+    box-shadow: 0 3px 8px #E7EDF1;
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+}
+.error-box {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  color: #ff0000;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/router.ts b/src/router/router.ts
index 85f85f4..9cb9a7c 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -78,7 +78,7 @@ const routes = [
   },
   {
     path: '/login',
-    component: () => import('@/pages/Login/Login.vue'),
+    component: () => import('@/pages/Login/index.vue'),
   },
   //匹配任何找不到的路由，404兜底
   {
diff --git a/src/style.css b/src/style.css
index 8b94468..e45e3c4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -54,7 +54,7 @@ body {
   margin: 0 auto;
   display: flex;
   place-items: center;
-  min-width: 320px;
+  min-width: 100vw;
   min-height: 100vh;
 }
 
@@ -72,7 +72,8 @@ button {
 }
 
 #app {
-  max-width: 800px;
+  width: 100vw;
+  height: 100%;
   margin: 0 auto;
   text-align: center;
 }
@@ -97,3 +98,8 @@ button {
     font-size: 0.8em;
   }
 }
+
+* {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}