摄影设备借还系统 - 前端
技术栈
- Vue.js 3 + TypeScript
- Vite
- Tailwind CSS (Apple Design System)
- Pinia
- Vue Router 4
- Axios
- ECharts
- JsBarcode
开发
npm install
npm run dev
构建
npm run build
UI设计规范
本项目严格遵循Apple官方UI设计规范（Human Interface Guidelines），包括：
- 使用系统字体（SF Pro）
- Apple色彩系统
- 圆角、阴影、毛玻璃效果
- 响应式设计
- 流畅的动画和过渡效果
环境变量
请在项目根目录创建 .env 文件并配置以下变量：
VITE_API_BASE_URL=http://localhost:3000/api
VITE_KEYCLOAK_URL=http://localhost:8080
VITE_KEYCLOAK_REALM=equipment-management
VITE_KEYCLOAK_CLIENT_ID=equipment-client
用户认证
前端通过 keycloak-js 与 Keycloak 进行集成：
- 首次进入系统时会自动跳转至 Keycloak 登录页
- 登录成功后自动刷新 Token，支持角色识别（admin/user）
- 退出登录会调用 Keycloak 的注销流程
确保后端已经正确配置 Keycloak，并且客户端 equipment-client 允许浏览器应用访问。