基于YOLOv8/YOLOv10/YOLOv11/YOLOv12与SpringBoot的茶叶病害检测系统（DeepSeek智能分析+web交互界面+前后端分离+YOLO数据）
摘要
本文针对茶叶种植过程中病害种类多、早期识别困难、传统人工巡检效率低且易误判等问题，提出并实现了一种基于深度学习与Web技术的智能化茶叶病害检测系统。系统采用前后端分离的架构模式，后端以SpringBoot框架为核心，构建高效稳定的服务器环境，并利用MySQL数据库进行用户信息、检测记录与模型数据的管理。前端则提供直观友好的Web交互界面，确保用户便捷操作。
系统的核心检测模型集成了当前YOLO系列目标检测算法的最新演进成果，包括YOLOv8、YOLOv10、YOLOv11及YOLOv12，用户可根据实际场景对精度与速度的需求灵活切换模型。我们构建了一个包含8类茶叶健康与病害状况的专用图像数据集，类别涵盖：茶叶黑腐病、茶叶褐枯病、茶叶锈病、红蜘蛛侵害叶、茶盲蝽侵害叶、健康茶叶、茶叶白斑病及其他病害，共计训练集4736张、验证集273张、测试集406张，为模型训练提供了坚实的数据基础。
系统功能全面，不仅实现了用户登录注册与个人中心管理，还提供了图像、视频及摄像头实时流的多种检测模式。所有检测记录均被结构化存储，便于追溯与分析。此外，系统创新性地集成了DeepSeek大型语言模型，为检测结果提供智能化的病理分析、防治建议等文本描述，极大地提升了系统的实用性与交互深度。管理员可通过完善的用户管理与数据可视化模块，掌控系统运行状态。实验表明，本系统能够准确、高效地识别多种茶叶病害，为茶叶生产的数字化、智能化植保提供了有效的技术解决方案。
目录
详细功能展示视频
基于YOLOv8/YOLOv10/YOLOv11/YOLOv12与SpringBoot的茶叶病害检测系统（DeepSeek智能分析+web界面+python))_哔哩哔哩_bilibili
https://www.bilibili.com/video/BV13a6xBZEvZ/?vd_source=549d0b4e2b8999929a61a037fcce3b0fhttps://www.bilibili.com/video/BV13a6xBZEvZ/
一、引言
1.1 研究背景与意义
茶叶作为全球重要的经济作物和饮品来源，其产量与品质直接关系到数以千万计茶农的生计与相关产业的稳定。然而，在茶叶的种植与生产过程中，各类病害（如黑腐病、褐枯病、锈病等）及虫害（如红蜘蛛、茶盲蝽）的侵扰是制约其产量提升和品质保障的关键因素。传统的病害诊断高度依赖农技人员的经验与肉眼观察，存在效率低下、主观性强、早期难以发现等弊端，极易错过最佳防治时期，导致经济损失。
近年来，人工智能与计算机视觉技术的飞速发展，特别是以YOLO (You Only Look Once) 系列为代表的深度学习目标检测算法，在农业病虫害识别领域展现出巨大潜力。这些算法能够从图像或视频中快速、准确地定位并识别出病害目标，为实现病虫害的自动化、实时化监测提供了技术可能。与此同时，Web应用技术的成熟使得将这些先进的AI能力通过互联网普惠到广大茶园和农技人员手中成为现实。
因此，开发一个集先进检测算法、智能分析、易用交互界面与可靠数据管理于一体的综合性茶叶病害检测系统，具有重要的理论价值与现实意义。它不仅能够提升病害诊断的准确率与效率，实现早期预警，还能通过数据的积累与分析，为病害的传播规律研究和科学防治策略制定提供数据支持，是推动智慧农业和精准植保发展的关键一环。
1.2 国内外研究现状
目前，国内外学者已广泛探索将深度学习应用于植物病害检测。早期研究多基于CNN卷积神经网络进行图像分类，如使用ResNet、Inception等模型判断叶片是否患病。随着目标检测技术的发展，Faster R-CNN、SSD以及YOLO系列算法被更多地应用于定位并识别具体的病害区域。在茶叶领域，已有研究针对某一种或几种特定病害（如茶饼病、炭疽病）构建小型数据集并训练定制模型，取得了高于90%的识别准确率。
然而，现有研究和应用系统仍存在一些局限性：首先，大多数系统仅集成单一或旧版本的检测模型（如YOLOv3/v5），未能充分利用YOLOv8之后版本在精度、速度和架构上的持续优化。其次，系统功能往往侧重于单纯的视觉识别，缺乏对识别结果的深度解读与知识拓展，与用户的交互停留在“是什么”而非“为什么”和“怎么办”的层面。再次，许多系统采用传统的单体Web架构，在可维护性、扩展性和多用户并发支持方面存在瓶颈。最后，完整涵盖多种常见茶叶病害与虫害，并包含健康叶片对照的公开高质量数据集仍较为稀缺。
1.3 本文主要工作与贡献
针对上述问题，本研究设计并实现了一个功能完备、技术先进的“基于YOLOv8/v10/v11/v12与SpringBoot的茶叶病害检测系统”。本文的主要工作与贡献如下：
-
构建专用数据集与多模型集成：收集并标注了一个包含8类状态的茶叶图像数据集，并系统性地集成、训练与评估了YOLOv8至YOLOv12四个最新版本的检测模型，为用户提供了性能阶梯化的模型选择方案。
-
设计并实现智能化Web系统：采用前后端分离架构，后端基于SpringBoot，前端开发响应式Web界面，实现了用户管理、多模式检测（图/视频/实时）、记录管理等核心功能，确保系统稳定、易用、可扩展。
-
创新性融合AI大模型分析：突破传统检测系统“只识不言”的局限，通过集成DeepSeek大型语言模型，对视觉检测结果进行二次智能分析，自动生成包含病害描述、成因分析、防治建议等内容的文本报告，极大提升了系统的实用价值和交互体验。
-
实现全面的数据管理与可视化：利用MySQL数据库系统化存储用户行为、检测历史与模型数据，并通过图表等形式进行后台数据可视化，为系统运维和农业数据分析提供支持。
系统概述
本系统是一个面向现代农业应用的综合智能平台，其核心目标是利用最前沿的深度学习技术解决茶叶生产中的植保难题。系统不仅仅是一个“检测工具”，更是一个集智能感知、数据分析、知识服务和用户管理于一体的“决策支持系统”。
技术架构上，系统严格遵循前后端分离的设计哲学。后端作为系统的“大脑”，使用SpringBoot快速搭建，负责所有业务逻辑的处理：包括用户认证与授权、检测任务调度、模型推理API封装、与DeepSeek大模型的交互、以及与MySQL数据库的持久化操作。前端作为系统的“面孔”，采用现代化的Web技术栈（如Vue.js或React），构建出流畅、直观的用户界面，负责检测数据的提交、结果的展示、图表渲染以及与用户的实时交互。
核心功能上，系统呈现四大亮点：
-
模型多样化与可配置性：支持YOLOv8至v12四款模型的在线切换，满足了不同场景下对检测速度（如实时监控）和精度的差异化需求。
-
检测模式全覆盖：支持图片上传检测、视频文件逐帧分析以及摄像头实时流媒体检测，覆盖了从静态到动态的所有常见应用场景。
-
AI增强的深度分析：通过与DeepSeek大模型的联动，系统将视觉识别结果转化为富含农业知识的文本报告，实现了从“感知智能”到“认知智能”的跨越，赋予系统“专家顾问”的能力。
-
全流程数据化管理：从用户注册到每一次检测操作，系统都进行了详尽的记录。管理员可以全局查看用户行为、检测统计，并通过可视化图表洞察病害发生趋势，用户也可以在个人中心管理自己的检测历史。这为构建茶叶病害知识库和进行大数据分析奠定了坚实基础。
二、 系统核心特性概述
功能模块
✅ 用户登录注册：支持密码检测，保存到MySQL数据库。
✅ 支持四种YOLO模型切换，YOLOv8、YOLOv10、YOLOv11、YOLOv12。
✅ 信息可视化，数据可视化。
✅ 图片检测支持AI分析功能，deepseek
✅ 支持图像检测、视频检测和摄像头实时检测，检测结果保存到MySQL数据库。
✅ 图片识别记录管理、视频识别记录管理和摄像头识别记录管理。
✅ 用户管理模块，管理员可以对用户进行增删改查。
✅ 个人中心，可以修改自己的信息，密码姓名头像等等。
登录注册模块
可视化模块
图像检测模块
-
YOLO模型集成 (v8/v10/v11/v12)
-
DeepSeek多模态分析
-
支持格式：JPG/PNG/MP4/RTSP
视频检测模块
实时检测模块
图片识别记录管理
视频识别记录管理
摄像头识别记录管理
用户管理模块
数据管理模块（MySQL表设计）
-
users- 用户信息表
-
imgrecords- 图片检测记录表
-
videorecords- 视频检测记录表
-
camerarecords- 摄像头检测记录表
模型训练结果
#coding:utf-8
#根据实际情况更换模型
# yolon.yaml (nano)：轻量化模型，适合嵌入式设备，速度快但精度略低。
# yolos.yaml (small)：小模型，适合实时任务。
# yolom.yaml (medium)：中等大小模型，兼顾速度和精度。
# yolob.yaml (base)：基本版模型，适合大部分应用场景。
# yolol.yaml (large)：大型模型，适合对精度要求高的任务。
from ultralytics import YOLO
model_path = 'pt/yolo12s.pt'
data_path = 'data.yaml'
if __name__ == '__main__':
model = YOLO(model_path)
results = model.train(data=data_path,
epochs=500,
batch=64,
device='0',
workers=0,
project='runs',
name='exp',
)
YOLO概述
YOLOv8
YOLOv8 由 Ultralytics 于 2023 年 1 月 10 日发布，在准确性和速度方面提供了尖端性能。基于先前 YOLO 版本的进步，YOLOv8 引入了新功能和优化，使其成为各种应用中目标检测任务的理想选择。
YOLOv8 的主要特性
- 高级骨干和颈部架构： YOLOv8 采用最先进的骨干和颈部架构，从而改进了特征提取和目标检测性能。
- 无锚点分离式 Ultralytics Head： YOLOv8 采用无锚点分离式 Ultralytics head，与基于锚点的方法相比，这有助于提高准确性并提高检测效率。
- 优化的准确性-速度权衡： YOLOv8 专注于在准确性和速度之间保持最佳平衡，适用于各种应用领域中的实时对象检测任务。
- 丰富的预训练模型: YOLOv8提供了一系列预训练模型，以满足各种任务和性能要求，使您更容易为特定用例找到合适的模型。
YOLOv10
YOLOv10 由 清华大学研究人员基于 Ultralytics Python构建，引入了一种新的实时目标检测方法，解决了先前 YOLO 版本中存在的后处理和模型架构缺陷。通过消除非极大值抑制 (NMS) 并优化各种模型组件，YOLOv10 以显著降低的计算开销实现了最先进的性能。大量实验表明，它在多个模型尺度上都具有卓越的精度-延迟权衡。
概述
实时目标检测旨在以低延迟准确预测图像中的对象类别和位置。YOLO 系列因其在性能和效率之间的平衡而一直处于这项研究的前沿。然而，对 NMS 的依赖和架构效率低下阻碍了最佳性能。YOLOv10 通过引入用于无 NMS 训练的一致双重分配和整体效率-准确性驱动的模型设计策略来解决这些问题。
架构
YOLOv10 的架构建立在之前 YOLO 模型优势的基础上，同时引入了几项关键创新。该模型架构由以下组件组成：
- 骨干网络：负责特征提取，YOLOv10 中的骨干网络使用增强版的 CSPNet (Cross Stage Partial Network)，以改善梯度流并减少计算冗余。
- Neck：Neck 的设计目的是聚合来自不同尺度的特征，并将它们传递到 Head。它包括 PAN（路径聚合网络）层，用于有效的多尺度特征融合。
- One-to-Many Head：在训练期间为每个对象生成多个预测，以提供丰富的监督信号并提高学习准确性。
- 一对一头部：在推理时为每个对象生成一个最佳预测，以消除对NMS的需求，从而降低延迟并提高效率。
主要功能
- 免NMS训练：利用一致的双重分配来消除对NMS的需求，从而降低推理延迟。
- 整体模型设计：从效率和准确性的角度对各种组件进行全面优化，包括轻量级分类 Head、空间通道解耦下采样和秩引导块设计。
- 增强的模型功能: 结合了大内核卷积和部分自注意力模块，以提高性能，而无需显着的计算成本。
YOLOv11
YOLO11 是 Ultralytics YOLO 系列实时目标检测器的最新迭代版本，它以前沿的精度、速度和效率重新定义了可能性。YOLO11 在之前 YOLO 版本的显著进步基础上，在架构和训练方法上进行了重大改进，使其成为各种计算机视觉任务的多功能选择。
主要功能
- 增强的特征提取: YOLO11 采用改进的 backbone 和 neck 架构，从而增强了特征提取能力，以实现更精确的目标检测和复杂的任务性能。
- 优化效率和速度： YOLO11 引入了改进的架构设计和优化的训练流程，从而提供更快的处理速度，并在精度和性能之间保持最佳平衡。
- 更高精度，更少参数： 随着模型设计的进步，YOLO11m 在 COCO 数据集上实现了更高的 平均精度均值(mAP)，同时比 YOLOv8m 少用 22% 的参数，在不牺牲精度的情况下提高了计算效率。
- 跨环境的适应性： YOLO11 可以无缝部署在各种环境中，包括边缘设备、云平台和支持 NVIDIA GPU 的系统，从而确保最大的灵活性。
- 广泛支持的任务范围： 无论是目标检测、实例分割、图像分类、姿势估计还是旋转框检测 (OBB)，YOLO11 都旨在满足各种计算机视觉挑战。
Ultralytics YOLO11 在其前代产品的基础上进行了多项重大改进。主要改进包括：
- 增强的特征提取： YOLO11 采用了改进的骨干网络和颈部架构，增强了特征提取能力，从而实现更精确的目标检测。
- 优化的效率和速度： 改进的架构设计和优化的训练流程提供了更快的处理速度，同时保持了准确性和性能之间的平衡。
- 更高精度，更少参数： YOLO11m 在 COCO 数据集上实现了更高的平均 精度均值 (mAP)，同时比 YOLOv8m 少用 22% 的参数，在不牺牲精度的情况下提高了计算效率。
- 跨环境的适应性： YOLO11 可以部署在各种环境中，包括边缘设备、云平台和支持 NVIDIA GPU 的系统。
- 广泛支持的任务范围： YOLO11 支持各种计算机视觉任务，例如目标检测、实例分割、图像分类、姿势估计和旋转框检测 (OBB)。
YOLOv12
YOLO12引入了一种以注意力为中心的架构，它不同于之前YOLO模型中使用的传统基于CNN的方法，但仍保持了许多应用所需的实时推理速度。该模型通过在注意力机制和整体网络架构方面的新颖方法创新，实现了最先进的目标检测精度，同时保持了实时性能。尽管有这些优势，YOLO12仍然是一个社区驱动的版本，由于其沉重的注意力模块，可能表现出训练不稳定、内存消耗增加和CPU吞吐量较慢的问题，因此Ultralytics仍然建议将YOLO11用于大多数生产工作负载。
主要功能
- 区域注意力机制: 一种新的自注意力方法，可以有效地处理大型感受野。它将 特征图 分成 l 个大小相等的区域（默认为 4 个），水平或垂直，避免复杂的运算并保持较大的有效感受野。与标准自注意力相比，这大大降低了计算成本。
- 残差高效层聚合网络（R-ELAN）：一种基于 ELAN 的改进的特征聚合模块，旨在解决优化挑战，尤其是在更大规模的以注意力为中心的模型中。R-ELAN 引入：
- 具有缩放的块级残差连接（类似于层缩放）。
- 一种重新设计的特征聚合方法，创建了一个类似瓶颈的结构。
- 优化的注意力机制架构：YOLO12 精简了标准注意力机制，以提高效率并与 YOLO 框架兼容。这包括：
- 使用 FlashAttention 来最大限度地减少内存访问开销。
- 移除位置编码，以获得更简洁、更快速的模型。
- 调整 MLP 比率（从典型的 4 调整到 1.2 或 2），以更好地平衡注意力和前馈层之间的计算。
- 减少堆叠块的深度以改进优化。
- 利用卷积运算（在适当的情况下）以提高其计算效率。
- 在注意力机制中添加一个7x7可分离卷积（“位置感知器”），以隐式地编码位置信息。
- 全面的任务支持: YOLO12 支持一系列核心计算机视觉任务：目标检测、实例分割、图像分类、姿势估计和旋转框检测 (OBB)。
- 增强的效率: 与许多先前的模型相比，以更少的参数实现了更高的准确率，从而证明了速度和准确率之间更好的平衡。
- 灵活部署: 专为跨各种平台部署而设计，从边缘设备到云基础设施。
主要改进
-
增强的 特征提取:
- 区域注意力: 有效处理大型感受野，降低计算成本。
- 优化平衡： 改进了注意力和前馈网络计算之间的平衡。
- R-ELAN：使用 R-ELAN 架构增强特征聚合。
-
优化创新：
- 残差连接：引入具有缩放的残差连接以稳定训练，尤其是在较大的模型中。
- 改进的特征集成：在 R-ELAN 中实现了一种改进的特征集成方法。
- FlashAttention: 整合 FlashAttention 以减少内存访问开销。
-
架构效率:
- 减少参数：与之前的许多模型相比，在保持或提高准确性的同时，实现了更低的参数计数。
- 简化的注意力机制：使用简化的注意力实现，避免了位置编码。
- 优化的 MLP 比率：调整 MLP 比率以更有效地分配计算资源。
前端代码展示
登录界面一小部分代码：
<template>
<div class="login-container">
<!-- 农业科技背景 -->
<div class="agriculture-background">
<!-- 茶叶粒子 -->
<div class="tea-particles">
<div class="particle" v-for="n in 30" :key="`particle-${n}`" :style="getParticleStyle(n)">
<div class="particle-glow"></div>
</div>
</div>
<!-- 植物生长波纹 -->
<div class="growth-ripples">
<div class="ripple" v-for="n in 8" :key="`ripple-${n}`" :style="getRippleStyle(n)"></div>
</div>
<!-- 检测节点网格 -->
<div class="detection-grid">
<div class="grid-node" v-for="n in 25" :key="`node-${n}`" :style="getNodeStyle(n)">
<div class="node-pulse"></div>
</div>
</div>
<!-- 茶叶符号云 -->
<div class="tea-cloud">
<div class="tea-icon" v-for="n in 12" :key="`tea-${n}`" :style="getTeaStyle(n)">
{{ getRandomTeaIcon() }}
</div>
</div>
<!-- 检测扫描线 -->
<div class="detection-scan">
<div class="scan-line" v-for="n in 6" :key="`scan-${n}`" :style="getScanStyle(n)">
<div class="scan-path"></div>
</div>
</div>
</div>
<!-- 登录主容器 -->
<div class="login-main">
<!-- 农业科技容器 -->
<div class="agriculture-container">
<div class="agriculture-effect">
<div class="leaf-pulse"></div>
<div class="agriculture-connections"></div>
</div>
<!-- 系统标志 -->
<div class="system-brand">
<div class="brand-icon">
<div class="tea-icon-main">
<div class="leaf-structure">
<div class="leaf-outline"></div>
<div class="leaf-vein left"></div>
<div class="leaf-vein right"></div>
<div class="leaf-tip"></div>
<div class="detection-core"></div>
</div>
<div class="tea-aura"></div>
</div>
<div class="icon-glow"></div>
</div>
<div class="brand-text">
<h1 class="system-title">
<span class="yolo-text">YOLO</span>
<span class="tea-text">TeaDetect</span>
</h1>
<p class="system-subtitle">茶叶病害智能检测系统</p>
<p class="company-tag">农业人工智能 · 智慧农业实验室</p>
</div>
</div>
<!-- 登录面板 -->
<div class="login-panel">
<div class="panel-header">
<div class="header-line"></div>
<h2>系统登录</h2>
<div class="header-line"></div>
</div>
<div class="panel-content">
<el-form :model="ruleForm" :rules="registerRules" ref="ruleFormRef">
<!-- 用户名输入 -->
<el-form-item prop="username">
<div class="input-field">
<div class="field-icon">
<div class="user-icon"></div>
</div>
<el-input
v-model="ruleForm.username"
placeholder="请输入用户名"
class="agriculture-input"
size="large"
@focus="onInputFocus"
@blur="onInputBlur"
/>
<div class="field-glow"></div>
</div>
<div class="input-hint">农业研究员身份验证</div>
</el-form-item>
<!-- 密码输入 -->
<el-form-item prop="password">
<div class="input-field">
<div class="field-icon">
<div class="secure-icon"></div>
</div>
<el-input
v-model="ruleForm.password"
type="password"
placeholder="请输入密码"
show-password
class="agriculture-input"
size="large"
@focus="onInputFocus"
@blur="onInputBlur"
/>
<div class="field-glow"></div>
</div>
<div class="input-hint">系统安全验证...</div>
</el-form-item>
<!-- 登录按钮 -->
<el-form-item>
<div class="login-action">
<el-button
type="primary"
class="agriculture-btn"
@click="submitForm(ruleFormRef)"
@mouseenter="onBtnHover"
@mouseleave="onBtnLeave"
>
<div class="btn-content">
<div class="btn-text">
<span class="text-main">启动病害检测</span>
<span class="text-sub">TEA DISEASE SCAN</span>
</div>
<div class="btn-leaf">
<div class="leaf-dot"></div>
<div class="leaf-dot"></div>
<div class="leaf-dot"></div>
</div>
</div>
<div class="btn-energy"></div>
<div class="btn-particles">
<div class="particle" v-for="n in 3" :key="`btn-particle-${n}`"></div>
</div>
</el-button>
<div class="system-status">
<div class="status-indicator">
<div class="status-dot active"></div>
<span>检测系统就绪</span>
</div>
<div class="status-info">
<span>v5.0.0 • YOLO深度学习模型</span>
</div>
</div>
</div>
</el-form-item>
</el-form>
<!-- 辅助选项 -->
<div class="panel-options">
<router-link to="/register" class="option-link">
<div class="link-icon">
<div class="leaf-plus"></div>
</div>
<span>注册新账户</span>
<div class="link-trail"></div>
</router-link>
</div>
</div>
</div>
<!-- 系统信息 -->
<div class="system-info">
<div class="info-grid">
<div class="info-item">
<div class="info-icon disease-icon-info"></div>
</div>
<div class="info-item">
<div class="info-icon speed-icon"></div>
<div class="info-content">
<span class="info-label">检测速度</span>
<span class="info-value">45ms</span>
</div>
</div>
<div class="info-item">
<div class="info-icon model-icon"></div>
<div class="info-content">
<span class="info-label">病害类型</span>
<span class="info-value">12类</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 背景装饰元素 -->
<div class="background-elements">
<!-- 茶叶数据流 -->
<div class="tea-stream">
<div class="data-flow" v-for="n in 8" :key="`flow-${n}`" :style="getStreamStyle(n)">
<span v-for="i in 15" :key="`data-${n}-${i}`">
{{ ['🌿','🍃','🌱','🍂','🌾','🌳','☘️','🌵'][Math.floor(Math.random() * 8)] }}
</span>
</div>
</div>
<!-- 浮动病害标签 -->
<div class="floating-labels">
<div class="floating-label" v-for="n in 10" :key="`label-${n}`" :style="getLabelStyle(n)">
{{ ['炭疽病','褐斑病','白粉病','锈病','叶枯病','煤烟病','根腐病','病毒病'][Math.floor(Math.random() * 8)] }}
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import Cookies from 'js-cookie';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { Session } from '/@/utils/storage';
import { formatAxis } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import type { FormInstance, FormRules } from 'element-plus';
import request from '/@/utils/request';
// 定义变量内容
const { t } = useI18n();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const route = useRoute();
const router = useRouter();
const formSize = ref('default');
const ruleFormRef = ref<FormInstance>();
// 定义表单数据
const ruleForm = reactive({
username: '',
password: '',
});
// 校验规则
const registerRules = reactive<FormRules>({
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 20, message: '长度在3-20个字符', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 5, max: 30, message: '长度在5-30个字符', trigger: 'blur' },
],
});
// 粒子样式 - 改为茶叶绿色系
const getParticleStyle = (index: number) => {
const left = Math.random() * 100;
const top = Math.random() * 100;
const size = 4 + Math.random() * 8;
const duration = 3 + Math.random() * 4;
const delay = Math.random() * 2;
const colorIndex = Math.floor(Math.random() * 3);
const colors = ['#4CAF50', '#8BC34A', '#CDDC39'];
return {
left: `${left}%`,
top: `${top}%`,
width: `${size}px`,
height: `${size}px`,
backgroundColor: colors[colorIndex],
animationDuration: `${duration}s`,
animationDelay: `${delay}s`
};
};
// 波纹样式 - 改为生长波纹
const getRippleStyle = (index: number) => {
const left = Math.random() * 100;
const top = Math.random() * 100;
const size = 100 + Math.random() * 300;
const duration = 4 + Math.random() * 6;
const delay = Math.random() * 3;
return {
left: `${left}%`,
top: `${top}%`,
width: `${size}px`,
height: `${size}px`,
animationDuration: `${duration}s`,
animationDelay: `${delay}s`
};
};
// 节点样式 - 改为检测节点
const getNodeStyle = (index: number) => {
const left = Math.random() * 100;
const top = Math.random() * 100;
const size = 6 + Math.random() * 12;
const duration = 2 + Math.random() * 3;
const delay = Math.random() * 2;
return {
left: `${left}%`,
top: `${top}%`,
width: `${size}px`,
height: `${size}px`,
animationDuration: `${duration}s`,
animationDelay: `${delay}s`
};
};
// 茶叶符号样式
const getTeaStyle = (index: number) => {
const left = Math.random() * 100;
const top = Math.random() * 100;
const size = 24 + Math.random() * 36;
const duration = 15 + Math.random() * 20;
const delay = Math.random() * 5;
const rotation = Math.random() * 360;
return {
left: `${left}%`,
top: `${top}%`,
fontSize: `${size}px`,
animationDuration: `${duration}s`,
animationDelay: `${delay}s`,
transform: `rotate(${rotation}deg)`
};
};
// 获取随机茶叶图标
const getRandomTeaIcon = () => {
const icons = ['🌿', '🍃', '🌱', '🍂', '🌾', '🌳', '☘️', '🌵', '🌲', '🎋'];
return icons[Math.floor(Math.random() * icons.length)];
};
// 扫描样式 - 改为检测扫描
const getScanStyle = (index: number) => {
const left = Math.random() * 100;
const height = 200 + Math.random() * 400;
const duration = 3 + Math.random() * 5;
const delay = Math.random() * 2;
return {
left: `${left}%`,
height: `${height}px`,
animationDuration: `${duration}s`,
animationDelay: `${delay}s`
};
};
// 数据流样式
const getStreamStyle = (index: number) => {
const left = Math.random() * 100;
const duration = 8 + Math.random() * 12;
const delay = Math.random() * 5;
return {
left: `${left}%`,
animationDuration: `${duration}s`,
animationDelay: `${delay}s`
};
};
// 标签样式
const getLabelStyle = (index: number) => {
const left = Math.random() * 100;
const top = Math.random() * 100;
const duration = 10 + Math.random() * 15;
const delay = Math.random() * 4;
const opacity = 0.1 + Math.random() * 0.3;
return {
left: `${left}%`,
top: `${top}%`,
animationDuration: `${duration}s`,
animationDelay: `${delay}s`,
opacity: opacity
};
};
// 事件处理
const onInputFocus = (event: Event) => {
const target = event.target as HTMLElement;
target.parentElement?.classList.add('focused');
};
const onInputBlur = (event: Event) => {
const target = event.target as HTMLElement;
target.parentElement?.classList.remove('focused');
};
const onBtnHover = (event: Event) => {
const btn = event.currentTarget as HTMLElement;
btn.classList.add('hover');
};
const onBtnLeave = (event: Event) => {
const btn = event.currentTarget as HTMLElement;
btn.classList.remove('hover');
};
// 原有的登录逻辑保持不变
const currentTime = computed(() => {
return formatAxis(new Date());
});
const onSignIn = async () => {
Session.set('token', Math.random().toString(36).substr(0));
Cookies.set('userName', ruleForm.username);
if (!themeConfig.value.isRequestRoutes) {
const isNoPower = await initFrontEndControlRoutes();
signInSuccess(isNoPower);
} else {
const isNoPower = await initBackEndControlRoutes();
signInSuccess(isNoPower);
}
};
const signInSuccess = (isNoPower: boolean | undefined) => {
if (isNoPower) {
ElMessage.warning('抱歉，您没有登录权限');
Session.clear();
} else {
let currentTimeInfo = currentTime.value;
if (route.query?.redirect) {
router.push({
path: <string>route.query?.redirect,
query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
});
} else {
router.push('/');
}
const signInText = t('message.signInText');
ElMessage.success(`${currentTimeInfo}，${signInText}`);
NextLoading.start();
}
};
const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate((valid) => {
if (valid) {
request.post('/api/user/login', ruleForm).then((res) => {
console.log(res);
if (res.code == 0) {
Cookies.set('role', res.data.role);
onSignIn();
} else {
ElMessage({
type: 'error',
message: res.msg,
});
}
});
} else {
console.log('error submit!');
return false;
}
});
};
// 初始化
onMounted(() => {
// 可以在这里添加初始化代码
});
</script>
<style scoped>
.login-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0a1f0a 0%, #1a3c1a 30%, #2a5a2a 70%, #0a1f0a 100%);
padding: 20px;
position: relative;
overflow: hidden;
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
/* 农业科技背景 */
.agriculture-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
}
/* 茶叶粒子 */
.tea-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.particle {
position: absolute;
border-radius: 50%;
animation: particleFloat ease-in-out infinite alternate;
opacity: 0.6;
}
.particle-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200%;
height: 200%;
border-radius: 50%;
background: inherit;
filter: blur(8px);
opacity: 0.3;
}
@keyframes particleFloat {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(-20px) rotate(180deg);
}
}
/* 生长波纹 */
.growth-ripples {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ripple {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(76, 175, 80, 0.3);
animation: rippleExpand linear infinite;
transform: translate(-50%, -50%);
}
@keyframes rippleExpand {
0% {
transform: translate(-50%, -50%) scale(0.1);
opacity: 0.8;
}
100% {
transform: translate(-50%, -50%) scale(2);
opacity: 0;
}
}
/* 检测网格 */
.detection-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.grid-node {
position: absolute;
border-radius: 50%;
background: rgba(139, 195, 74, 0.4);
animation: nodePulse ease-in-out infinite alternate;
}
.node-pulse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border-radius: 50%;
background: inherit;
animation: pulseWave 2s ease-in-out infinite;
}
@keyframes nodePulse {
0% { opacity: 0.3; transform: scale(1); }
100% { opacity: 0.8; transform: scale(1.2); }
}
@keyframes pulseWave {
0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.2; transform: translate(-50%, -50%) scale(2); }
}
/* 茶叶符号云 */
.tea-cloud {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.tea-icon {
position: absolute;
animation: teaFloat ease-in-out infinite alternate;
opacity: 0.2;
}
@keyframes teaFloat {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(-40px) rotate(10deg);
}
}
后端代码展示
详细功能展示视频
基于YOLOv8/YOLOv10/YOLOv11/YOLOv12与SpringBoot的茶叶病害检测系统（DeepSeek智能分析+web界面+python))_哔哩哔哩_bilibili
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
0
0- 0
已为社区贡献236条内容
所有评论(0)