zhuchaowe/maxkb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: login

Browse Source
This commit is contained in:
wangdan-fit2cloud 2025-04-17 11:28:48 +08:00
parent 342ef6df30
commit 9778fd2bb4
4 changed files with 199 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/index.html
View File

@ -1,10 +1,11 @@
<!DOCTYPE html> <!doctype html>
<html lang=""> <html lang="">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <base target="_blank" />
<title>%VITE_APP_TITLE%</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

4
ui/src/api/type/login.ts
View File

@ -7,5 +7,9 @@ interface LoginRequest {
* 密码 * 密码
*/ */
password: string password: string
/**
* 验证码
*/
code: string
} }
export type { LoginRequest } export type { LoginRequest }

172
ui/src/views/login/components/VerifyCode.vue Normal file
View File

@ -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>

17
ui/src/views/login/index.vue
View File

@ -34,6 +34,20 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
</div> </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-form>
<el-button size="large" type="primary" class="w-full" @click="login" <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 type { LoginRequest } from '@/api/type/login'
import LoginContainer from '@/views/login/components/LoginContainer.vue' import LoginContainer from '@/views/login/components/LoginContainer.vue'
import LoginLayout from '@/views/login/components/LoginLayout.vue' import LoginLayout from '@/views/login/components/LoginLayout.vue'
import VerifyCode from './components/VerifyCode.vue'
import { t, getBrowserLang } from '@/locales' import { t, getBrowserLang } from '@/locales'
import useStore from '@/stores' import useStore from '@/stores'
@ -70,11 +85,13 @@ const router = useRouter()
const { user } = useStore() const { user } = useStore()
// const { locale } = useI18n({ useScope: 'global' }) // const { locale } = useI18n({ useScope: 'global' })
const loading = ref<boolean>(false) const loading = ref<boolean>(false)
const identifyCode = ref<string>('1234')
const loginFormRef = ref<FormInstance>() const loginFormRef = ref<FormInstance>()
const loginForm = ref<LoginRequest>({ const loginForm = ref<LoginRequest>({
username: '', username: '',
password: '', password: '',
code: '',
}) })
const rules = ref<FormRules<LoginRequest>>({ const rules = ref<FormRules<LoginRequest>>({