feat(auth): 添加登录页与演示认证逻辑

2026-08-27 13:22:45 +08:00
parent 4720f7e1a7
commit 779f15d29f
8 changed files with 333 additions and 4 deletions
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { useAppStore } from '@/stores/app'
+
+const route = useRoute()
+const router = useRouter()
+const appStore = useAppStore()
+
+const username = ref('zhangwj')
+const password = ref('******')
+const captcha = ref('8362')
+const errorMessage = ref('')
+const captchaCode = '8362'
+
+function getRedirectPath() {
+  const redirect = route.query.redirect
+  return typeof redirect === 'string' && redirect.startsWith('/') ? redirect : '/workbench/home'
+}
+
+function handleLogin() {
+  if (!username.value.trim() || !password.value.trim() || !captcha.value.trim()) {
+    errorMessage.value = '请输入完整的账号、密码和验证码'
+    return
+  }
+
+  if (captcha.value.trim() !== captchaCode) {
+    errorMessage.value = '验证码错误，请重新输入'
+    return
+  }
+
+  errorMessage.value = ''
+  appStore.login(username.value.trim())
+  void router.replace(getRedirectPath())
+}
+</script>
+
+<template>
+  <main class="login-page">
+    <form class="login-card" novalidate @submit.prevent="handleLogin">
+      <div class="login-brand">
+        <div class="login-brand-icon" aria-hidden="true">
+          <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
+            <path
+              d="M14 3v5h5M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z"
+              stroke="#fff"
+              stroke-width="1.7"
+              stroke-linejoin="round"
+            />
+            <path
+              d="m9 13.5 2.5 2.5 4-4.5"
+              stroke="#fff"
+              stroke-width="1.7"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </div>
+        <div>
+          <h1>医签通</h1>
+          <p>MEDISIGN · 患者电子签系统</p>
+        </div>
+      </div>
+
+      <p class="login-subtitle">安全留痕 · 高效签署 · 医患无忧</p>
+
+      <div class="login-field">
+        <label for="login-username">账号</label>
+        <input
+          id="login-username"
+          v-model="username"
+          type="text"
+          autocomplete="username"
+          placeholder="请输入工号 / 账号"
+        />
+      </div>
+
+      <div class="login-field">
+        <label for="login-password">密码</label>
+        <input
+          id="login-password"
+          v-model="password"
+          type="password"
+          autocomplete="current-password"
+          placeholder="请输入密码"
+        />
+      </div>
+
+      <div class="login-field">
+        <label for="login-captcha">验证码</label>
+        <div class="login-captcha-row">
+          <input
+            id="login-captcha"
+            v-model="captcha"
+            type="text"
+            inputmode="numeric"
+            autocomplete="one-time-code"
+            placeholder="验证码"
+          />
+          <span class="login-captcha-image" aria-label="验证码">{{ captchaCode }}</span>
+        </div>
+      </div>
+
+      <p v-if="errorMessage" class="login-error" role="alert">{{ errorMessage }}</p>
+
+      <button class="login-submit" type="submit">登 录</button>
+      <p class="login-tip">原型演示：任意账号密码均可登录</p>
+    </form>
+
+    <p class="login-footer">© 2026 医签通 MEDISIGN · 患者电子签署系统 V1.1 原型</p>
+  </main>
+</template>