create-simpleadmin-ui 2.0.0

package/template/src/views/login/LoginView.vue

@@ -0,0 +1,576 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { useUserStore } from '@/stores/user'
+import { resetDynamicRoutes, setupDynamicRoutes } from '@/router'
+
+const router = useRouter()
+const route = useRoute()
+const store = useUserStore()
+
+/** 登录方式：password | sms */
+const loginMode = ref<'password' | 'sms'>('password')
+/** 是否启用手机号登录（来自 SysConfig: sys.auth.enableSmsLogin） */
+const enableSmsLogin = ref(true)
+const optionsLoaded = ref(false)
+const loading = ref(false)
+const smsSending = ref(false)
+const smsCountdown = ref(0)
+let smsTimer: ReturnType<typeof setInterval> | null = null
+
+const passwordForm = reactive({
+  userName: 'admin',
+  password: 'admin123',
+  captchaId: '',
+  captchaCode: '',
+})
+
+const smsForm = reactive({
+  phone: '13800000000',
+  smsCode: '',
+})
+
+const captchaImage = ref('')
+const captchaLoading = ref(false)
+
+const brandHint = computed(() =>
+  enableSmsLogin.value ? '选择账密或手机验证码登录' : '使用账号密码登录',
+)
+
+async function refreshCaptcha() {
+  captchaLoading.value = true
+  try {
+    const data = await store.fetchCaptcha()
+    passwordForm.captchaId = data.captchaId
+    passwordForm.captchaCode = data.devCode || ''
+    captchaImage.value = data.imageBase64
+  } catch (e) {
+    console.error(e)
+    passwordForm.captchaId = ''
+    captchaImage.value = ''
+  } finally {
+    captchaLoading.value = false
+  }
+}
+
+function clearSmsTimer() {
+  if (smsTimer) {
+    clearInterval(smsTimer)
+    smsTimer = null
+  }
+}
+
+function startSmsCountdown(seconds: number) {
+  clearSmsTimer()
+  smsCountdown.value = Math.max(0, seconds)
+  if (smsCountdown.value <= 0) return
+  smsTimer = setInterval(() => {
+    smsCountdown.value -= 1
+    if (smsCountdown.value <= 0) clearSmsTimer()
+  }, 1000)
+}
+
+async function onSendSms() {
+  if (!enableSmsLogin.value) {
+    ElMessage.warning('未启用手机号登录')
+    return
+  }
+  const phone = smsForm.phone.trim()
+  if (!/^1[3-9]\d{9}$/.test(phone)) {
+    ElMessage.warning('请输入正确的手机号')
+    return
+  }
+  smsSending.value = true
+  try {
+    const data = await store.sendSmsCode(phone)
+    startSmsCountdown(data.intervalSeconds || 60)
+    if (data.devCode) {
+      smsForm.smsCode = data.devCode
+      ElMessage.success(`验证码已发送（开发态：${data.devCode}）`)
+    } else {
+      ElMessage.success('验证码已发送')
+    }
+  } catch (e) {
+    console.error(e)
+  } finally {
+    smsSending.value = false
+  }
+}
+
+async function afterLoginSuccess() {
+  resetDynamicRoutes()
+  try {
+    await setupDynamicRoutes()
+  } catch (e) {
+    console.error(e)
+  }
+  ElMessage.success('登录成功')
+  const redirect = (route.query.redirect as string) || '/index'
+  await router.replace(redirect === '/' ? '/index' : redirect)
+}
+
+async function onSubmit() {
+  loading.value = true
+  try {
+    if (loginMode.value === 'password') {
+      if (!passwordForm.userName.trim() || !passwordForm.password) {
+        ElMessage.warning('请输入账号和密码')
+        return
+      }
+      if (!passwordForm.captchaId) {
+        ElMessage.warning('验证码未加载，请点击图片刷新')
+        await refreshCaptcha()
+        return
+      }
+      if (!passwordForm.captchaCode.trim()) {
+        ElMessage.warning('请输入验证码')
+        return
+      }
+      await store.login({
+        loginType: 'password',
+        userName: passwordForm.userName.trim(),
+        password: passwordForm.password,
+        captchaId: passwordForm.captchaId,
+        captchaCode: passwordForm.captchaCode.trim(),
+      })
+    } else {
+      if (!enableSmsLogin.value) {
+        ElMessage.warning('未启用手机号登录')
+        loginMode.value = 'password'
+        return
+      }
+      const phone = smsForm.phone.trim()
+      if (!/^1[3-9]\d{9}$/.test(phone)) {
+        ElMessage.warning('请输入正确的手机号')
+        return
+      }
+      if (!smsForm.smsCode.trim()) {
+        ElMessage.warning('请输入短信验证码')
+        return
+      }
+      await store.login({
+        loginType: 'sms',
+        phone,
+        smsCode: smsForm.smsCode.trim(),
+      })
+    }
+    await afterLoginSuccess()
+  } catch (e: unknown) {
+    console.error(e)
+    if (loginMode.value === 'password') await refreshCaptcha()
+  } finally {
+    loading.value = false
+  }
+}
+
+function switchMode(mode: 'password' | 'sms') {
+  if (mode === 'sms' && !enableSmsLogin.value) return
+  loginMode.value = mode
+  if (mode === 'password' && !captchaImage.value) refreshCaptcha()
+}
+
+async function loadLoginOptions() {
+  try {
+    const data = await store.fetchLoginOptions()
+    enableSmsLogin.value = data?.enableSmsLogin !== false
+  } catch (e) {
+    console.error(e)
+    // 拉取失败时保守：仅展示账密，避免误开短信入口
+    enableSmsLogin.value = false
+  } finally {
+    optionsLoaded.value = true
+    if (!enableSmsLogin.value) loginMode.value = 'password'
+  }
+}
+
+onMounted(async () => {
+  await loadLoginOptions()
+  refreshCaptcha()
+})
+
+onUnmounted(() => {
+  clearSmsTimer()
+})
+</script>
+
+<template>
+  <div class="login">
+    <div class="login__visual" aria-hidden="true">
+      <div class="login__orb login__orb--a" />
+      <div class="login__orb login__orb--b" />
+      <div class="login__copy">
+        <p class="login__eyebrow">SimpleAdmin</p>
+        <h1>现代后台<br />一处掌控</h1>
+        <p class="login__lead">.NET 8 API · Vue3 · Element Plus · EF Core + Dapper</p>
+      </div>
+    </div>
+
+    <div class="login__panel">
+      <div class="login__card">
+        <div class="login__brand">
+          <span class="login__mark">S</span>
+          <div>
+            <strong>欢迎回来</strong>
+            <p>{{ brandHint }}</p>
+          </div>
+        </div>
+
+        <div v-if="optionsLoaded && enableSmsLogin" class="login__tabs" role="tablist">
+          <button
+            type="button"
+            class="login__tab"
+            :class="{ 'is-active': loginMode === 'password' }"
+            role="tab"
+            @click="switchMode('password')"
+          >
+            账密登录
+          </button>
+          <button
+            type="button"
+            class="login__tab"
+            :class="{ 'is-active': loginMode === 'sms' }"
+            role="tab"
+            @click="switchMode('sms')"
+          >
+            手机登录
+          </button>
+        </div>
+
+        <el-form
+          v-if="loginMode === 'password'"
+          label-position="top"
+          class="login__form"
+          @submit.prevent="onSubmit"
+        >
+          <el-form-item label="账号">
+            <el-input v-model="passwordForm.userName" size="large" placeholder="admin" autocomplete="username" />
+          </el-form-item>
+          <el-form-item label="密码">
+            <el-input
+              v-model="passwordForm.password"
+              size="large"
+              type="password"
+              show-password
+              placeholder="密码"
+              autocomplete="current-password"
+            />
+          </el-form-item>
+          <el-form-item label="验证码">
+            <div class="login__captcha">
+              <el-input
+                v-model="passwordForm.captchaCode"
+                size="large"
+                maxlength="6"
+                placeholder="图形验证码"
+                @keyup.enter="onSubmit"
+              />
+              <button
+                type="button"
+                class="login__captcha-img"
+                title="点击刷新"
+                :disabled="captchaLoading"
+                @click="refreshCaptcha"
+              >
+                <img v-if="captchaImage" :src="captchaImage" alt="验证码" />
+                <span v-else>加载中</span>
+              </button>
+            </div>
+          </el-form-item>
+          <el-button
+            type="primary"
+            size="large"
+            native-type="submit"
+            :loading="loading"
+            class="login__submit"
+          >
+            进入系统
+          </el-button>
+        </el-form>
+
+        <el-form
+          v-else-if="enableSmsLogin"
+          label-position="top"
+          class="login__form"
+          @submit.prevent="onSubmit"
+        >
+          <el-form-item label="手机号">
+            <el-input
+              v-model="smsForm.phone"
+              size="large"
+              maxlength="11"
+              placeholder="绑定账号的手机号"
+              autocomplete="tel"
+            />
+          </el-form-item>
+          <el-form-item label="短信验证码">
+            <div class="login__sms">
+              <el-input
+                v-model="smsForm.smsCode"
+                size="large"
+                maxlength="8"
+                placeholder="6 位验证码"
+                @keyup.enter="onSubmit"
+              />
+              <el-button
+                size="large"
+                :loading="smsSending"
+                :disabled="smsCountdown > 0"
+                @click="onSendSms"
+              >
+                {{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }}
+              </el-button>
+            </div>
+          </el-form-item>
+          <el-button
+            type="primary"
+            size="large"
+            native-type="submit"
+            :loading="loading"
+            class="login__submit"
+          >
+            进入系统
+          </el-button>
+        </el-form>
+
+        <p class="login__hint">
+          <template v-if="enableSmsLogin">
+            账密默认 admin / admin123；手机演示号 13800000000（开发态接口会回传验证码）
+          </template>
+          <template v-else>账密默认 admin / admin123</template>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.login {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 1.1fr 0.9fr;
+  background: #f8fafc;
+}
+
+.login__visual {
+  position: relative;
+  overflow: hidden;
+  padding: 56px;
+  color: #ecfeff;
+  background:
+    linear-gradient(145deg, #042f2e 0%, #0f766e 48%, #0e7490 100%);
+  display: flex;
+  align-items: flex-end;
+}
+
+.login__orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(2px);
+  animation: float 8s ease-in-out infinite;
+}
+.login__orb--a {
+  width: 280px;
+  height: 280px;
+  right: -40px;
+  top: -60px;
+  background: rgba(153, 246, 228, 0.25);
+}
+.login__orb--b {
+  width: 180px;
+  height: 180px;
+  left: 12%;
+  top: 28%;
+  background: rgba(56, 189, 248, 0.18);
+  animation-delay: -2.5s;
+}
+
+.login__copy {
+  position: relative;
+  z-index: 1;
+  max-width: 460px;
+  animation: sa-fade-up 0.5s ease both;
+}
+
+.login__eyebrow {
+  margin: 0 0 14px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: 600;
+  color: rgba(204, 251, 241, 0.85);
+}
+
+.login__copy h1 {
+  margin: 0;
+  font-size: clamp(36px, 5vw, 52px);
+  line-height: 1.08;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+}
+
+.login__lead {
+  margin: 18px 0 0;
+  font-size: 15px;
+  color: rgba(236, 254, 255, 0.78);
+  max-width: 34ch;
+}
+
+.login__panel {
+  display: grid;
+  place-items: center;
+  padding: 32px 24px;
+  background:
+    radial-gradient(circle at 80% 20%, rgba(45, 212, 191, 0.12), transparent 28%),
+    #f8fafc;
+}
+
+.login__card {
+  width: min(420px, 100%);
+  padding: 36px 32px;
+  background: #fff;
+  border: 1px solid var(--sa-border);
+  border-radius: 20px;
+  box-shadow: var(--sa-shadow);
+  animation: sa-fade-up 0.45s ease 0.08s both;
+}
+
+.login__brand {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  margin-bottom: 20px;
+  strong {
+    display: block;
+    font-size: 22px;
+    font-weight: 750;
+    letter-spacing: -0.02em;
+  }
+  p {
+    margin: 4px 0 0;
+    color: var(--sa-ink-secondary);
+    font-size: 13px;
+  }
+}
+
+.login__mark {
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  display: grid;
+  place-items: center;
+  font-weight: 800;
+  color: #042f2e;
+  background: linear-gradient(135deg, #99f6e4, #14b8a6);
+}
+
+.login__tabs {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+  margin-bottom: 18px;
+  padding: 4px;
+  border-radius: 12px;
+  background: #f1f5f9;
+}
+
+.login__tab {
+  height: 36px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--sa-ink-secondary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+}
+.login__tab.is-active {
+  background: #fff;
+  color: #0f766e;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+}
+
+.login__captcha,
+.login__sms {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+  align-items: center;
+}
+.login__captcha :deep(.el-input),
+.login__sms :deep(.el-input) {
+  flex: 1;
+  min-width: 0;
+}
+
+.login__captcha-img {
+  flex-shrink: 0;
+  width: 128px;
+  height: 40px;
+  padding: 0;
+  border: 1px solid var(--sa-border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: #f0fdfa;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  color: var(--sa-ink-muted);
+}
+.login__captcha-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.login__captcha-img:disabled {
+  opacity: 0.7;
+  cursor: wait;
+}
+
+.login__sms .el-button {
+  flex-shrink: 0;
+  min-width: 110px;
+}
+
+.login__submit {
+  width: 100%;
+  margin-top: 8px;
+  height: 44px;
+  font-size: 15px;
+}
+
+.login__hint {
+  margin: 18px 0 0;
+  text-align: center;
+  font-size: 12px;
+  color: var(--sa-ink-muted);
+  line-height: 1.5;
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(12px);
+  }
+}
+
+@media (max-width: 900px) {
+  .login {
+    grid-template-columns: 1fr;
+  }
+  .login__visual {
+    min-height: 220px;
+    padding: 32px 24px;
+    align-items: center;
+  }
+  .login__copy h1 {
+    font-size: 32px;
+  }
+}
+</style>