重构订单管理页面 - 使用真实数据库数据
前端重构：
- 完全重写Orders.vue页面，采用现代化管理界面设计
- 实现左侧导航栏 + 主内容区域的布局结构
- 添加顶部搜索栏、用户头像、通知图标等UI元素
- 实现订单表格：订单编号、用户名、金额、支付方式、状态、创建时间
- 支持订单筛选：按类型（会员订阅、视频生成、产品订单）和状态筛选
- 实现批量选择：全选/取消全选、批量删除功能
- 添加分页导航：支持页码跳转、省略号显示
- 实现订单操作：查看、删除（单个/批量）
- 支付方式图标：支付宝、微信、PayPal等
- 状态标签：已完成（绿色）、处理中（蓝色）、已取消（红色）等
- 响应式设计：支持移动端适配
后端API增强：
- OrderApiController：添加DELETE /orders/{id}和DELETE /orders/batch接口
- OrderService：实现deleteOrder和deleteOrdersByIds方法
- 支持权限控制：管理员可批量删除，用户只能删除自己的订单
- 安全限制：只有已取消或已退款的订单才能删除
- 完整的错误处理和日志记录
API接口完善：
- orders.js：添加deleteOrder和deleteOrders方法
- 支持批量删除和单个删除操作
- 完整的错误处理和用户反馈
数据特点：
- 完全基于数据库真实数据，无模拟数据
- 支持180个订单记录，覆盖12个月数据
- 包含多种订单类型：会员订阅、视频生成、产品订单
- 支付方式多样化：支付宝、微信支付
- 订单状态完整：已完成、处理中、已取消、待支付等
- 用户信息真实：来自users表的真实用户数据
UI/UX特点：
- 现代化管理界面设计
- 清晰的数据展示和操作流程
- 直观的状态标识和支付方式图标
- 流畅的交互体验和响应式布局
- 符合企业级管理系统的设计标准
This commit is contained in:
AIGC Developer