diff --git a/ui/index.html b/ui/index.html
index 9e5fc8f06..86940d230 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -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>
diff --git a/ui/src/api/type/login.ts b/ui/src/api/type/login.ts
index a6a0fe54e..34d2243c0 100644
--- a/ui/src/api/type/login.ts
+++ b/ui/src/api/type/login.ts
@@ -7,5 +7,9 @@ interface LoginRequest {
    * 密码
    */
   password: string
+   /**
+   * 验证码
+   */
+  code: string
 }
 export type { LoginRequest }
diff --git a/ui/src/views/login/components/VerifyCode.vue b/ui/src/views/login/components/VerifyCode.vue
new file mode 100644
index 000000000..0e86184e3
--- /dev/null
+++ b/ui/src/views/login/components/VerifyCode.vue
@@ -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>
diff --git a/ui/src/views/login/index.vue b/ui/src/views/login/index.vue
index 875bd4288..28adc1502 100644
--- a/ui/src/views/login/index.vue
+++ b/ui/src/views/login/index.vue
@@ -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>>({
