前端说明

作者: luote (luote) · 个人主页 luote996.cn

技术栈

Vue 3 + TypeScript
Vite 5
Pinia + Vue Router
Element Plus + ECharts
Axios

页面模块

路径	说明
/login	登录页，含图形验证码
/register	注册页
/	首页（登录后）

布局

MainLayout 提供上导航栏：

左侧：Te Logo + 品牌名
右侧：用户昵称下拉，支持退出登录

验证码组件

CaptchaInput 将输入框与验证码图片合为一体：

图片显示在输入框右侧
点击图片刷新验证码
登录 / 注册失败时自动刷新

登录防抖

登录提交具备双重保护：

请求进行中禁止重复提交
2 秒内连续点击会提示「操作过于频繁」

环境变量

文件	用途
.env.development	本地开发
.env.production	生产构建
.env.example	变量说明

主要变量：

text

VITE_API_BASE_URL=http://localhost:8080
VITE_APP_TITLE=luote

开发命令

bash

npm install
npm run dev
npm run build

UI 风格

默认主题为淡蓝 + 灰 + 白，CSS 变量定义在 src/styles/global.css。

首页不包含假数据，接入后端接口后自行填充业务内容。