chore: initial baseline with P0-safety .gitignore
This commit is contained in:
Simon
@@ -0,0 +1,170 @@
|
||||
<!-- =============================================================================
|
||||
// 企微IT智能服务台 — 坐席登录页面
|
||||
// =============================================================================
|
||||
// 说明：坐席登录页面，简单的用户名+姓名表单
|
||||
// 登录成功后跳转到工作台页面
|
||||
// 第一步不做密码验证，仅输入用户ID和姓名即可登录
|
||||
// ============================================================================= -->
|
||||
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<!-- 标题区域 -->
|
||||
<div class="login-title">
|
||||
<h1>🛠️ IT智能服务台</h1>
|
||||
<p>坐席工作台 · 登录</p>
|
||||
</div>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
label-position="top"
|
||||
@submit.prevent="handleLogin"
|
||||
>
|
||||
<!-- 企微用户ID -->
|
||||
<el-form-item label="企微用户ID" prop="userId">
|
||||
<el-input
|
||||
v-model="loginForm.userId"
|
||||
placeholder="请输入企微用户ID"
|
||||
prefix-icon="User"
|
||||
size="large"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 坐席姓名 -->
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input
|
||||
v-model="loginForm.name"
|
||||
placeholder="请输入您的姓名"
|
||||
prefix-icon="UserFilled"
|
||||
size="large"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- OTP 动态码（admin 角色需要） -->
|
||||
<el-form-item v-if="requireOtp" label="OTP动态码" prop="otpCode">
|
||||
<el-input
|
||||
v-model="loginForm.otpCode"
|
||||
placeholder="请输入Google Authenticator中的6位动态码"
|
||||
prefix-icon="Lock"
|
||||
size="large"
|
||||
maxlength="6"
|
||||
clearable
|
||||
@keyup.enter="handleLogin"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="agentStore.logging"
|
||||
style="width: 100%"
|
||||
@click="handleLogin"
|
||||
>
|
||||
{{ agentStore.logging ? '登录中...' : '登 录' }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<div class="login-hint">
|
||||
使用企微账号登录，姓名将自动获取
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// ============================================================================
|
||||
// 导入
|
||||
// ============================================================================
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { useAgentStore } from '@/stores/agent'
|
||||
|
||||
// ============================================================================
|
||||
// 状态
|
||||
// ============================================================================
|
||||
|
||||
/** 坐席 Store */
|
||||
const agentStore = useAgentStore()
|
||||
|
||||
/** 表单引用 */
|
||||
const loginFormRef = ref<FormInstance>()
|
||||
|
||||
/** 登录表单数据 */
|
||||
const loginForm = reactive({
|
||||
/** 企微用户ID */
|
||||
userId: '',
|
||||
/** 坐席姓名 */
|
||||
name: '',
|
||||
/** OTP 动态码 */
|
||||
otpCode: '',
|
||||
})
|
||||
|
||||
/** 是否需要 OTP 验证 */
|
||||
const requireOtp = ref(false)
|
||||
|
||||
/** 表单校验规则 */
|
||||
const loginRules = reactive<FormRules>({
|
||||
userId: [
|
||||
{ required: true, message: '请输入企微用户ID', trigger: 'blur' },
|
||||
{ min: 1, max: 64, message: '用户ID长度为1-64个字符', trigger: 'blur' },
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: '请输入姓名', trigger: 'blur' },
|
||||
{ min: 1, max: 128, message: '姓名长度为1-128个字符', trigger: 'blur' },
|
||||
],
|
||||
})
|
||||
|
||||
// ============================================================================
|
||||
// 方法
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 处理登录
|
||||
* 1. 校验表单
|
||||
* 2. 调用登录 API
|
||||
* 3. 如果返回 require_otp，显示 OTP 输入框
|
||||
* 4. 用户输入 OTP 后再次登录
|
||||
* 5. 成功后自动跳转
|
||||
*/
|
||||
async function handleLogin(): Promise<void> {
|
||||
// 表单校验
|
||||
if (!loginFormRef.value) return
|
||||
const valid = await loginFormRef.value.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
|
||||
try {
|
||||
const data = await agentStore.login(loginForm.userId, loginForm.name, loginForm.otpCode || undefined)
|
||||
|
||||
// 检查是否需要 OTP 验证
|
||||
if (data && 'require_otp' in data && data.require_otp) {
|
||||
requireOtp.value = true
|
||||
ElMessage.warning('请输入OTP动态码')
|
||||
return
|
||||
}
|
||||
|
||||
ElMessage.success('登录成功')
|
||||
} catch (error: any) {
|
||||
// 错误信息已在 Axios 拦截器中显示
|
||||
console.error('登录失败:', error)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-hint {
|
||||
text-align: center;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user