[WIP] Fix syntax errors and improve login and profile functionality

[Copilot]

Frontend Improvements Plan

Phase 1: Critical Fixes (Syntax Errors)

• Fix router/index.js - check for spacing issues in import paths
• Fix Login.vue - check for regex formatting issues
• Clean up extra spaces throughout files (to.meta, user?.role, etc.)

Phase 2: Login.vue Enhancements

• Add $message import
• Add comprehensive form validation (username 4-20 chars, password 8-32 chars with letters+numbers, email format, phone 11 digits)
• Add phone registration option
• Add loading state

Phase 3: Profile.vue Improvements

• Replace alert() with $message
• Display full user info (phone, status, borrow count, overdue count, registration time)
• Add edit personal info feature
• Add password confirmation validation
• Optimize layout to left-right split

Phase 4: Books.vue Enhancements

• Add category filter and stock status filter
• Enhance add/edit book form (publish date, price, description, cover URL)
• Add edit book feature (call updateBook API)
• Change category to dropdown (call getCategories API)
• Display borrow count, price info
• Optimize pagination display

Phase 5: Users.vue Improvements

• Add proper pagination (replace limit: 100)
• Check for unreturned books before user deletion
• Add role/status filters
• Display overdue count and registration time

Phase 6: Borrowing.vue Enhancements

• Display borrowing overview (current borrows/overdue/fines)
• Show fine info in history
• Add return confirmation dialog with condition selection (good/damaged/lost)
• Display renewal count and remaining days
• Pass renew_days parameter when renewing

Phase 7: Dashboard.vue Enhancements

• Display more statistics (user count, category count, reservations, active users)
• Add popular books ranking (call getPopularBooks API)
• Optimize stat card styles

Phase 8: Layout.vue Improvements

• Add category management entry (admin only)
• Display user role badge
• Add footer
• Dynamic user info refresh

Phase 9: New Files

• Create Categories.vue (full CRUD functionality)

Phase 10: Router Updates

• Add /categories route (admin only)
• Add admin route permission check
• Add 404 redirect

Phase 11: API Updates

• Add updateCategory method
• Add statistics-related API methods

Phase 12: Style Optimization

• Fix style.css formatting issues
• Optimize responsive layout
• Unify component styles

Original prompt

问题描述

library-web 目录中的前端代码存在多个问题需要修复：

1. 紧急修复 - 语法错误

• router/index.js: 文件导入路径有多余空格，如 Borrowing. vue 应为 Borrowing.vue
• Login.vue: 正则表达式格式错误，/(? =.*[a-zA-Z])(?=.*\d)/ 中 ? 和 = 之间不能有空格，应为 /(?=.*[a-zA-Z])(?=.*\d)/
• 所有文件中的多余空格需要清理（如 to. meta → to.meta，user?. role → user?.role）

2. 功能改进

Login.vue

• 添加 $message 导入（当前缺失导致报错）
• 添加完整表单验证（用户名4-20字符，密码8-32字符含字母数字，邮箱格式，手机号11位）
• 添加手机号注册选项
• 添加加载状态

Profile.vue

• 将 alert() 替换为 $message
• 显示完整用户信息（手机号、状态、借阅数、逾期数、注册时间）
• 添加编辑个人信息功能
• 添加新密码确认验证
• 优化布局为左右分栏

Books.vue

• 添加分类筛选和库存状态筛选
• 完善新增/编辑图书表单（添加出版日期、价格、描述、封面URL字段）
• 添加编辑图书功能（调用 updateBook API）
• 分类改为下拉选择（调用 getCategories API）
• 显示借阅量、价格等信息
• 优化分页显示

Users.vue

• 添加真正的分页功能（当前 limit: 100 不合理）
• 删除用户前检查是否有未归还图书
• 添加角色/状态筛选
• 显示逾期数和注册时间

Borrowing.vue

• 显示借阅概览（当前借阅数/逾期数/罚款）
• 历史记录显示罚款信息
• 归还图书使用弹窗确认，支持选择图书状况（good/damaged/lost）
• 显示续借次数和剩余天数
• 续借时传递 renew_days 参数

Dashboard.vue

• 显示更多统计数据（用户数、分类数、预约数、活跃用户等）
• 添加热门图书排行（调用 getPopularBooks API）
• 优化统计卡片样式

Layout.vue

• 添加分类管理入口（管理员可见）
• 显示用户角色标签
• 添加页脚
• 动态刷新用户信息

3. 新增文件

• Categories.vue: 完整的分类管理页面（CRUD功能）

4. 路由更新

• 添加 /categories 路由（管理员专属）
• 添加管理员路由权限检查
• 添加 404 重定向

5. API 更新

• 添加 updateCategory 方法
• 添加统计相关 API 方法

6. 样式优化

• 修复 style.css 中的格式问题
• 优化响应式布局
• 统一组件样式

API 文档参考

请参考附件中的《图书管理系统 API 文档》v2.2，确保前端代码符合以下规范：

• 用户注册：username 4-20字符，password 8-32字符含字母数字
• 借阅规则：默认30天，最多续借2次
• 预约规则：仅库存为0时可预约
• 正确处理所有 API 响应格式（code, message, data, errors, details）

注意事项

• 确保所有代码中没有多余的空格
• 所有正则表达式格式正确
• 所有文件导入路径正确
• 使用 $message 替代 alert()
• 按照 API 文档规范处理请求和响应

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.