mirror of
https://github.com/1Panel-dev/MaxKB.git
synced 2025-12-26 01:33:05 +00:00
feat: login
This commit is contained in:
wangdan-fit2cloud
parent
342ef6df30
commit
9778fd2bb4
|
|
@ -1,10 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<base target="_blank" />
|
||||
<title>%VITE_APP_TITLE%</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -7,5 +7,9 @@ interface LoginRequest {
|
|||
* 密码
|
||||
*/
|
||||
password: string
|
||||
/**
|
||||
* 验证码
|
||||
*/
|
||||
code: string
|
||||
}
|
||||
export type { LoginRequest }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,172 @@
|
|||
<template>
|
||||
<div class="VerifyCode">
|
||||
<canvas
|
||||
id="VerifyCode-canvas"
|
||||
:width="props.contentWidth"
|
||||
:height="props.contentHeight"
|
||||
@click="refreshCode"
|
||||
></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, watch, computed } from 'vue'
|
||||
const props = defineProps({
|
||||
code: {
|
||||
type: String,
|
||||
default: '1234',
|
||||
},
|
||||
fontSizeMin: {
|
||||
type: Number,
|
||||
default: 25,
|
||||
},
|
||||
fontSizeMax: {
|
||||
type: Number,
|
||||
default: 35,
|
||||
},
|
||||
backgroundColorMin: {
|
||||
type: Number,
|
||||
default: 255,
|
||||
},
|
||||
backgroundColorMax: {
|
||||
type: Number,
|
||||
default: 255,
|
||||
},
|
||||
colorMin: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
colorMax: {
|
||||
type: Number,
|
||||
default: 160,
|
||||
},
|
||||
lineColorMin: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
lineColorMax: {
|
||||
type: Number,
|
||||
default: 180,
|
||||
},
|
||||
dotColorMin: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
dotColorMax: {
|
||||
type: Number,
|
||||
default: 255,
|
||||
},
|
||||
contentWidth: {
|
||||
type: Number,
|
||||
default: 112,
|
||||
},
|
||||
contentHeight: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
})
|
||||
|
||||
//验证码
|
||||
const emit = defineEmits(['update:code'])
|
||||
const verifyCode = computed({
|
||||
get: () => {
|
||||
return props.code
|
||||
},
|
||||
set: (data) => {
|
||||
emit('update:code', data)
|
||||
},
|
||||
})
|
||||
|
||||
// 生成校验码
|
||||
const makeCode = (len = 4) => {
|
||||
let code = ''
|
||||
const codeLength = len
|
||||
const identifyCodes = '123456789abcdefjhijkinpqrsduvwxyzABCDEFGHJKLMNPQRSTUVWXYZ'
|
||||
for (let i = 0; i < codeLength; i++) {
|
||||
code += identifyCodes[randomNum(0, identifyCodes.length)]
|
||||
}
|
||||
return code
|
||||
}
|
||||
|
||||
// 生成一个随机数
|
||||
const randomNum = (min = 0, max: number) => Math.floor(Math.random() * (max - min)) + min
|
||||
|
||||
// 生成一个随机的颜色
|
||||
function randomColor(min: number, max: number) {
|
||||
let r = randomNum(min, max)
|
||||
let g = randomNum(min, max)
|
||||
let b = randomNum(min, max)
|
||||
return 'rgb(' + r + ',' + g + ',' + b + ')'
|
||||
}
|
||||
|
||||
// 绘制干扰线
|
||||
const drawLine = (ctx: CanvasRenderingContext2D) => {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
ctx.strokeStyle = randomColor(props.lineColorMin, props.lineColorMax)
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight))
|
||||
ctx.lineTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight))
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
//在画布上显示数据
|
||||
const drawText = (ctx: CanvasRenderingContext2D, txt: string, i: number) => {
|
||||
ctx.fillStyle = randomColor(props.colorMin, props.colorMax)
|
||||
ctx.font = randomNum(props.fontSizeMin, props.fontSizeMax) + 'px SimHei'
|
||||
let x = (i + 1) * (props.contentWidth / (txt.length + 1))
|
||||
let y = randomNum(props.fontSizeMax, props.contentHeight - 5)
|
||||
var deg = randomNum(-45, 45)
|
||||
// 修改坐标原点和旋转角度
|
||||
ctx.translate(x, y)
|
||||
ctx.rotate((deg * Math.PI) / 180)
|
||||
ctx.fillText(txt[i], 0, 0)
|
||||
// 恢复坐标原点和旋转角度
|
||||
ctx.rotate((-deg * Math.PI) / 180)
|
||||
ctx.translate(-x, -y)
|
||||
}
|
||||
// 绘制干扰点
|
||||
const drawDot = (ctx: CanvasRenderingContext2D) => {
|
||||
for (let i = 0; i < 80; i++) {
|
||||
ctx.fillStyle = randomColor(0, 255)
|
||||
ctx.beginPath()
|
||||
ctx.arc(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight), 1, 0, 2 * Math.PI)
|
||||
ctx.fill()
|
||||
}
|
||||
}
|
||||
//画图
|
||||
const drawPic = () => {
|
||||
let canvas = document.getElementById('VerifyCode-canvas') as HTMLCanvasElement
|
||||
if (!canvas) {
|
||||
return
|
||||
}
|
||||
let ctx = canvas.getContext('2d') as CanvasRenderingContext2D
|
||||
ctx.textBaseline = 'bottom'
|
||||
// 绘制背景
|
||||
ctx.fillStyle = randomColor(props.backgroundColorMin, props.backgroundColorMax)
|
||||
ctx.fillRect(0, 0, props.contentWidth, props.contentHeight)
|
||||
// 绘制文字
|
||||
for (let i = 0; i < verifyCode.value.length; i++) {
|
||||
drawText(ctx, verifyCode.value, i)
|
||||
}
|
||||
drawLine(ctx)
|
||||
drawDot(ctx)
|
||||
}
|
||||
|
||||
// 重置验证码
|
||||
const refreshCode = () => {
|
||||
emit('update:code', makeCode())
|
||||
drawPic()
|
||||
}
|
||||
|
||||
// defineExpose({ refreshCode });
|
||||
|
||||
//组件挂载
|
||||
onMounted(() => {
|
||||
drawPic()
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.VerifyCode {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -34,6 +34,20 @@
|
|||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="mb-24">
|
||||
<el-form-item prop="code">
|
||||
<div class="flex-between w-full">
|
||||
<el-input
|
||||
size="large"
|
||||
class="input-item"
|
||||
v-model="loginForm.code"
|
||||
placeholder="请输入验证码"
|
||||
>
|
||||
</el-input>
|
||||
<VerifyCode v-model:code="identifyCode" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<el-button size="large" type="primary" class="w-full" @click="login"
|
||||
|
|
@ -63,6 +77,7 @@ import type { FormInstance, FormRules } from 'element-plus'
|
|||
import type { LoginRequest } from '@/api/type/login'
|
||||
import LoginContainer from '@/views/login/components/LoginContainer.vue'
|
||||
import LoginLayout from '@/views/login/components/LoginLayout.vue'
|
||||
import VerifyCode from './components/VerifyCode.vue'
|
||||
import { t, getBrowserLang } from '@/locales'
|
||||
import useStore from '@/stores'
|
||||
|
||||
|
|
@ -70,11 +85,13 @@ const router = useRouter()
|
|||
const { user } = useStore()
|
||||
// const { locale } = useI18n({ useScope: 'global' })
|
||||
const loading = ref<boolean>(false)
|
||||
const identifyCode = ref<string>('1234')
|
||||
|
||||
const loginFormRef = ref<FormInstance>()
|
||||
const loginForm = ref<LoginRequest>({
|
||||
username: '',
|
||||
password: '',
|
||||
code: '',
|
||||
})
|
||||
|
||||
const rules = ref<FormRules<LoginRequest>>({
|
||||
|
|
|
|||
Loading…
Reference in New Issue