wecom_it_smart_desk/frontend-admin/src/views/Login.vue

<!--
=============================================================================
IT智能服务台 — 管理员登录页 (v1.1, 2026-07-04)
=============================================================================
说明：从用户ID+姓名登录改为账号密码+OTP表单登录
  - 复用坐席端登录 API（POST /api/agents/login）
  - 登录后检查 role === 'admin'，非 admin 提示"无管理权限"
  - 支持账号密码+OTP认证
-->
<template>
  <div class="login-page">
    <!-- 背景装饰 -->
    <div class="login-bg">
      <div class="login-bg-gradient"></div>
    </div>

    <!-- 登录卡片 -->
    <div class="login-card">
      <!-- Logo -->
      <div class="login-logo">
        <div class="login-logo-icon">
          <el-icon :size="28"><Headset /></el-icon>
        </div>
        <h1 class="login-title">IT智能服务台</h1>
        <p class="login-subtitle">管理后台</p>
      </div>

      <!-- 登录表单 -->
      <el-form
        ref="formRef"
        :model="loginForm"
        :rules="rules"
        label-position="top"
        @submit.prevent="handleLogin"
      >
        <el-form-item label="账号" prop="userId">
          <el-input
            v-model="loginForm.userId"
            placeholder="请输入账号（如 sxn）"
            size="large"
            :prefix-icon="User"
            @keydown.enter="handleLogin"
          />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            size="large"
            :prefix-icon="Lock"
            show-password
            @keydown.enter="handleLogin"
          />
        </el-form-item>

        <!-- OTP 输入区: 仅在 requireOtp 时显示 -->
        <el-form-item v-if="requireOtp" label="OTP 验证码" prop="otpCode">
          <el-input
            v-model="loginForm.otpCode"
            placeholder="请输入 Google Authenticator 验证码"
            size="large"
            :prefix-icon="Key"
            maxlength="6"
            @keydown.enter="handleLogin"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            size="large"
            :loading="adminStore.logging"
            :disabled="adminStore.logging"
            @click="handleLogin"
            class="login-btn"
          >
            {{ adminStore.logging ? '登录中...' : (requireOtp ? '验证 OTP' : '登录管理后台') }}
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 错误提示 -->
      <el-alert
        v-if="errorMsg"
        :title="errorMsg"
        type="error"
        show-icon
        :closable="true"
        @close="errorMsg = ''"
        style="margin-top: 16px"
      />

      <!-- 提示信息 -->
      <div class="login-tips">
        <el-icon :size="14"><InfoFilled /></el-icon>
        <span>仅限组长（admin角色）登录管理后台</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// ==========================================================================
// 依赖导入
// ==========================================================================
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useAdminStore } from '@/stores/admin'
import type { FormInstance, FormRules } from 'element-plus'
import { User, Lock, Key, InfoFilled, Headset } from '@element-plus/icons-vue'

// ==========================================================================
// Store
// ==========================================================================
const router = useRouter()
const adminStore = useAdminStore()

// ==========================================================================
// 表单状态
// ==========================================================================

/** 表单引用 */
const formRef = ref<FormInstance>()

/** 登录表单数据 */
const loginForm = reactive({
  userId: '',
  password: '',
  otpCode: '',
})

/** 是否需要 OTP 验证 */
const requireOtp = ref(false)

/** 错误信息 */
const errorMsg = ref<string>('')

/** 表单校验规则 */
const rules: FormRules = {
  userId: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  otpCode: [
    { required: true, message: '请输入 OTP 验证码', trigger: 'blur' },
    { len: 6, message: '验证码为 6 位数字', trigger: 'blur' },
  ],
}

// ==========================================================================
// 方法
// ==========================================================================

/**
 * 处理登录
 */
async function handleLogin(): Promise<void> {
  // 表单校验
  const valid = await formRef.value?.validate().catch(() => false)
  if (!valid) return

  errorMsg.value = ''

  try {
    await adminStore.login(
      loginForm.userId.trim(),
      loginForm.password,
      loginForm.otpCode.trim() || undefined
    )
  } catch (error: unknown) {
    // 检查是否需要 OTP 验证
    if (error instanceof Error && error.message === 'require_otp') {
      requireOtp.value = true
      loginForm.otpCode = ''
      ElMessage.info('请输入 OTP 验证码')
      return
    }

    const errMsg = error instanceof Error ? error.message : '登录失败，请重试'
    errorMsg.value = errMsg
  }
}
</script>

<style scoped>
/* 登录页面容器 */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--bg-primary);
}

/* 背景装饰 */
.login-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.login-bg-gradient {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
  animation: rotate 30s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 登录卡片 */
.login-card {
  position: relative;
  z-index: 1;
  width: 400px;
  padding: 40px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* Logo */
.login-logo {
  text-align: center;
  margin-bottom: 32px;
}
.login-logo-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin: 0 auto 16px;
}
.login-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.login-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  margin-top: 8px;
}

/* 提示信息 */
.login-tips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-muted);
}
</style>