add

frontend/js/admin.js

@@ -0,0 +1,699 @@
+// 管理员仪表板专用JavaScript
+
+// 全局数据存储
+let allUsersData = [];
+let allVehiclesData = [];
+let allOrdersData = [];
+let allPartsData = [];
+
+// ==================== 用户管理 ====================
+
+// 查看用户详情
+async function viewUser(id) {
+    Utils.loading(true);
+    try {
+        const response = await http.get(API.USER(id));
+        if (response.code === 200 && response.data) {
+            const user = response.data;
+            // 填充表单（只读模式）
+            document.getElementById('userId').value = user.userId;
+            document.getElementById('userUsername').value = user.username;
+            document.getElementById('userRealName').value = user.realName;
+            document.getElementById('userPhone').value = user.phone;
+            document.getElementById('userEmail').value = user.email || '';
+            document.getElementById('userRole').value = user.role;
+            document.getElementById('userStatus').value = user.status;
+
+            // 禁用表单控件
+            document.getElementById('userForm').querySelectorAll('input, select').forEach(el => {
+                el.disabled = true;
+            });
+
+            document.getElementById('userModalTitle').textContent = '查看用户详情';
+            const modal = new bootstrap.Modal(document.getElementById('userModal'));
+            modal.show();
+
+            // 启用表单控件（在关闭时）
+            document.getElementById('userModal').addEventListener('hidden.bs.modal', function() {
+                document.getElementById('userForm').querySelectorAll('input, select').forEach(el => {
+                    el.disabled = false;
+                });
+            }, { once: true });
+        }
+    } catch (error) {
+        Utils.showToast('加载用户信息失败', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// 编辑用户
+async function editUser(id) {
+    const user = allUsersData.find(u => u.userId === id);
+    if (!user) {
+        Utils.showToast('用户不存在', 'error');
+        return;
+    }
+
+    // 填充表单
+    document.getElementById('userId').value = user.userId;
+    document.getElementById('userUsername').value = user.username;
+    document.getElementById('userRealName').value = user.realName;
+    document.getElementById('userPhone').value = user.phone;
+    document.getElementById('userEmail').value = user.email || '';
+    document.getElementById('userRole').value = user.role;
+    document.getElementById('userStatus').value = user.status;
+
+    document.getElementById('userModalTitle').textContent = '编辑用户';
+    const modal = new bootstrap.Modal(document.getElementById('userModal'));
+    modal.show();
+}
+
+// 保存用户
+async function saveUser() {
+    const userId = document.getElementById('userId').value;
+    const userData = {
+        username: document.getElementById('userUsername').value,
+        realName: document.getElementById('userRealName').value,
+        phone: document.getElementById('userPhone').value,
+        email: document.getElementById('userEmail').value,
+        role: document.getElementById('userRole').value,
+        status: parseInt(document.getElementById('userStatus').value)
+    };
+
+    Utils.loading(true);
+    try {
+        let response;
+        if (userId) {
+            // 更新
+            response = await http.put(API.USER(userId), userData);
+        } else {
+            // 新增
+            userData.password = '123456'; // 默认密码
+            response = await http.post(API.USERS, userData);
+        }
+
+        if (response.code === 200) {
+            Utils.showToast(userId ? '更新成功' : '创建成功', 'success');
+            const modal = bootstrap.Modal.getInstance(document.getElementById('userModal'));
+            modal.hide();
+            loadAllUsers();
+        } else {
+            Utils.showToast(response.message || '保存失败', 'error');
+        }
+    } catch (error) {
+        console.error('保存用户失败:', error);
+        Utils.showToast('保存失败', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// 添加用户
+function showAddUserModal() {
+    // 清空表单
+    document.getElementById('userForm').reset();
+    document.getElementById('userId').value = '';
+    document.getElementById('userStatus').value = '1';
+
+    document.getElementById('userModalTitle').textContent = '添加用户';
+    const modal = new bootstrap.Modal(document.getElementById('userModal'));
+    modal.show();
+}
+
+// ==================== 车辆管理 ====================
+
+// 查看车辆详情
+async function viewVehicle(id) {
+    Utils.loading(true);
+    try {
+        const response = await http.get(API.VEHICLE(id));
+        if (response.code === 200 && response.data) {
+            const vehicle = response.data;
+            document.getElementById('vehicleId').value = vehicle.vehicleId;
+            document.getElementById('vehicleLicensePlate').value = vehicle.licensePlate;
+            document.getElementById('vehicleBrand').value = vehicle.brand;
+            document.getElementById('vehicleModel').value = vehicle.model;
+            document.getElementById('vehicleColor').value = vehicle.color || '';
+            document.getElementById('vehicleMileage').value = vehicle.mileage || 0;
+            document.getElementById('vehicleStatus').value = vehicle.status;
+
+            // 禁用表单
+            document.getElementById('vehicleForm').querySelectorAll('input, select').forEach(el => {
+                el.disabled = true;
+            });
+
+            document.getElementById('vehicleModalTitle').textContent = '查看车辆详情';
+            const modal = new bootstrap.Modal(document.getElementById('vehicleModal'));
+            modal.show();
+
+            document.getElementById('vehicleModal').addEventListener('hidden.bs.modal', function() {
+                document.getElementById('vehicleForm').querySelectorAll('input, select').forEach(el => {
+                    el.disabled = false;
+                });
+            }, { once: true });
+        }
+    } catch (error) {
+        Utils.showToast('加载车辆信息失败', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// 编辑车辆
+async function editVehicle(id) {
+    const vehicle = allVehiclesData.find(v => v.vehicleId === id);
+    if (!vehicle) {
+        Utils.showToast('车辆不存在', 'error');
+        return;
+    }
+
+    document.getElementById('vehicleId').value = vehicle.vehicleId;
+    document.getElementById('vehicleLicensePlate').value = vehicle.licensePlate;
+    document.getElementById('vehicleBrand').value = vehicle.brand;
+    document.getElementById('vehicleModel').value = vehicle.model;
+    document.getElementById('vehicleColor').value = vehicle.color || '';
+    document.getElementById('vehicleMileage').value = vehicle.mileage || 0;
+    document.getElementById('vehicleStatus').value = vehicle.status;
+
+    document.getElementById('vehicleModalTitle').textContent = '编辑车辆';
+    const modal = new bootstrap.Modal(document.getElementById('vehicleModal'));
+    modal.show();
+}
+
+// 保存车辆
+async function saveVehicle() {
+    const vehicleId = document.getElementById('vehicleId').value;
+    const vehicleData = {
+        licensePlate: document.getElementById('vehicleLicensePlate').value,
+        brand: document.getElementById('vehicleBrand').value,
+        model: document.getElementById('vehicleModel').value,
+        color: document.getElementById('vehicleColor').value,
+        mileage: parseFloat(document.getElementById('vehicleMileage').value) || 0,
+        status: document.getElementById('vehicleStatus').value
+    };
+
+    // 获取客户ID（这里简化处理，实际应该让用户选择）
+    if (!vehicleId) {
+        vehicleData.customerId = 1; // 默认使用第一个客户
+    }
+
+    Utils.loading(true);
+    try {
+        let response;
+        if (vehicleId) {
+            response = await http.put(API.VEHICLE(vehicleId), vehicleData);
+        } else {
+            response = await http.post(API.VEHICLES, vehicleData);
+        }
+
+        if (response.code === 200) {
+            Utils.showToast(vehicleId ? '更新成功' : '添加成功', 'success');
+            const modal = bootstrap.Modal.getInstance(document.getElementById('vehicleModal'));
+            modal.hide();
+            loadAllVehicles();
+        } else {
+            Utils.showToast(response.message || '保存失败', 'error');
+        }
+    } catch (error) {
+        console.error('保存车辆失败:', error);
+        Utils.showToast('保存失败', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// 添加车辆
+function showAddVehicleModal() {
+    document.getElementById('vehicleForm').reset();
+    document.getElementById('vehicleId').value = '';
+    document.getElementById('vehicleMileage').value = 0;
+
+    document.getElementById('vehicleModalTitle').textContent = '添加车辆';
+    const modal = new bootstrap.Modal(document.getElementById('vehicleModal'));
+    modal.show();
+}
+
+// ==================== 工单管理 ====================
+
+// 查看工单详情
+async function viewOrder(id) {
+    Utils.loading(true);
+    try {
+        const response = await http.get(API.ORDER(id));
+        if (response.code === 200 && response.data) {
+            const order = response.data;
+            document.getElementById('orderId').value = order.orderId;
+            document.getElementById('orderServiceType').value = order.serviceType;
+            document.getElementById('orderFaultDescription').value = order.faultDescription || '';
+            document.getElementById('orderDiagnosisResult').value = order.diagnosisResult || '';
+            document.getElementById('orderPartsCost').value = order.partsCost || 0;
+            document.getElementById('orderLaborCost').value = order.laborCost || 0;
+            document.getElementById('orderTotalCost').value = order.totalCost || 0;
+            document.getElementById('orderStatus').value = order.status;
+
+            // 禁用表单
+            document.getElementById('orderForm').querySelectorAll('input, select, textarea').forEach(el => {
+                el.disabled = true;
+            });
+
+            document.getElementById('orderModalTitle').textContent = '查看工单详情';
+            const modal = new bootstrap.Modal(document.getElementById('orderModal'));
+            modal.show();
+
+            document.getElementById('orderModal').addEventListener('hidden.bs.modal', function() {
+                document.getElementById('orderForm').querySelectorAll('input, select, textarea').forEach(el => {
+                    el.disabled = false;
+                });
+            }, { once: true });
+        }
+    } catch (error) {
+        Utils.showToast('加载工单信息失败', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// 编辑工单
+async function editOrder(id) {
+    const order = allOrdersData.find(o => o.orderId === id);
+    if (!order) {
+        Utils.showToast('工单不存在', 'error');
+        return;
+    }
+
+    document.getElementById('orderId').value = order.orderId;
+    document.getElementById('orderServiceType').value = order.serviceType;
+    document.getElementById('orderFaultDescription').value = order.faultDescription || '';
+    document.getElementById('orderDiagnosisResult').value = order.diagnosisResult || '';
+    document.getElementById('orderPartsCost').value = order.partsCost || 0;
+    document.getElementById('orderLaborCost').value = order.laborCost || 0;
+    document.getElementById('orderTotalCost').value = order.totalCost || 0;
+    document.getElementById('orderStatus').value = order.status;
+
+    document.getElementById('orderModalTitle').textContent = '编辑工单';
+    const modal = new bootstrap.Modal(document.getElementById('orderModal'));
+    modal.show();
+
+    // 监听费用变化自动计算总额
+    setupOrderCostCalculation();
+}
+
+// 设置工单费用自动计算
+function setupOrderCostCalculation() {
+    const partsCost = document.getElementById('orderPartsCost');
+    const laborCost = document.getElementById('orderLaborCost');
+    const totalCost = document.getElementById('orderTotalCost');
+
+    function updateTotal() {
+        const parts = parseFloat(partsCost.value) || 0;
+        const labor = parseFloat(laborCost.value) || 0;
+        totalCost.value = (parts + labor).toFixed(2);
+    }
+
+    partsCost.addEventListener('input', updateTotal);
+    laborCost.addEventListener('input', updateTotal);
+}
+
+// 保存工单
+async function saveOrder() {
+    const orderId = document.getElementById('orderId').value;
+    const orderData = {
+        serviceType: document.getElementById('orderServiceType').value,
+        faultDescription: document.getElementById('orderFaultDescription').value,
+        diagnosisResult: document.getElementById('orderDiagnosisResult').value,
+        partsCost: parseFloat(document.getElementById('orderPartsCost').value) || 0,
+        laborCost: parseFloat(document.getElementById('orderLaborCost').value) || 0,
+        totalCost: parseFloat(document.getElementById('orderTotalCost').value) || 0,
+        status: document.getElementById('orderStatus').value
+    };
+
+    Utils.loading(true);
+    try {
+        // 更新工单
+        const response = await http.put(API.ORDER(orderId), orderData);
+
+        if (response.code === 200) {
+            Utils.showToast('更新成功', 'success');
+            const modal = bootstrap.Modal.getInstance(document.getElementById('orderModal'));
+            modal.hide();
+            loadAllOrders();
+        } else {
+            Utils.showToast(response.message || '保存失败', 'error');
+        }
+    } catch (error) {
+        console.error('保存工单失败:', error);
+        Utils.showToast('保存失败', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// 添加工单
+function showAddOrderModal() {
+    document.getElementById('orderForm').reset();
+    document.getElementById('orderId').value = '';
+    document.getElementById('orderPartsCost').value = 0;
+    document.getElementById('orderLaborCost').value = 0;
+    document.getElementById('orderTotalCost').value = 0;
+
+    document.getElementById('orderModalTitle').textContent = '创建工单';
+    const modal = new bootstrap.Modal(document.getElementById('orderModal'));
+    modal.show();
+
+    setupOrderCostCalculation();
+}
+
+// 过滤工单
+function filterOrders(status) {
+    if (!status) {
+        displayAllOrders(allOrdersData);
+    } else {
+        const filtered = allOrdersData.filter(o => o.status === status);
+        displayAllOrders(filtered);
+    }
+}
+
+// ==================== 配件管理 ====================
+
+// 查看配件详情
+async function viewPart(id) {
+    Utils.loading(true);
+    try {
+        const response = await http.get(API.PART(id));
+        if (response.code === 200 && response.data) {
+            const part = response.data;
+            // 显示配件详情
+            Utils.showToast('配件名称: ' + part.partName + '\n库存: ' + part.stockQuantity + part.unit, 'info');
+        }
+    } catch (error) {
+        Utils.showToast('加载配件信息失败', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// 编辑配件
+async function editPart(id) {
+    const part = allPartsData.find(p => p.partId === id);
+    if (!part) {
+        Utils.showToast('配件不存在', 'error');
+        return;
+    }
+
+    // 简单实现：使用prompt编辑
+    const newStock = prompt('请输入新的库存数量:', part.stockQuantity);
+    if (newStock !== null && !isNaN(newStock)) {
+        Utils.loading(true);
+        try {
+            const response = await http.put(API.PART(id), {
+                ...part,
+                stockQuantity: parseInt(newStock)
+            });
+
+            if (response.code === 200) {
+                Utils.showToast('更新成功', 'success');
+                loadAllParts();
+            } else {
+                Utils.showToast(response.message || '更新失败', 'error');
+            }
+        } catch (error) {
+            Utils.showToast('更新失败', 'error');
+        } finally {
+            Utils.loading(false);
+        }
+    }
+}
+
+// 添加配件
+function showAddPartModal() {
+    Utils.showToast('添加配件功能开发中...', 'info');
+}
+
+// ==================== 数据加载函数 ====================
+
+// 加载所有数据
+async function loadAllData() {
+    await Promise.all([
+        loadAllUsers(),
+        loadAllVehicles(),
+        loadAllOrders(),
+        loadAllParts()
+    ]);
+}
+
+// 加载所有配件
+async function loadAllParts() {
+    Utils.loading(true);
+    try {
+        const response = await http.get(API.PARTS);
+        if (response.code === 200) {
+            allPartsData = response.data || [];
+            displayAllParts(allPartsData);
+        }
+    } catch (error) {
+        console.error('加载配件失败:', error);
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// 显示所有配件
+function displayAllParts(parts) {
+    const tbody = document.getElementById('partsTableBody');
+    if (!tbody) return;
+
+    if (parts.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-4">暂无数据</td></tr>';
+        return;
+    }
+
+    tbody.innerHTML = parts.map(p => `
+        <tr>
+            <td>${p.partNo}</td>
+            <td>${p.partName}</td>
+            <td>${p.category || '-'}</td>
+            <td>
+                ${p.stockQuantity} ${p.unit}
+                ${p.stockQuantity <= p.minStock ? '<span class="badge bg-danger ms-2">库存预警</span>' : ''}
+            </td>
+            <td>${Utils.formatMoney(p.unitPrice)}</td>
+            <td>
+                <button class="btn btn-sm btn-info" onclick="viewPart(${p.partId})">查看</button>
+                <button class="btn btn-sm btn-warning" onclick="editPart(${p.partId})">编辑</button>
+                <button class="btn btn-sm btn-danger" onclick="deletePart(${p.partId})">删除</button>
+            </td>
+        </tr>
+    `).join('');
+}
+
+// 删除配件
+async function deletePart(id) {
+    if (!Utils.confirm('确定要删除此配件吗？')) return;
+
+    Utils.loading(true);
+    try {
+        const response = await http.delete(API.PART(id));
+        if (response.code === 200) {
+            Utils.showToast('删除成功', 'success');
+            loadAllParts();
+        } else {
+            Utils.showToast(response.message || '删除失败', 'error');
+        }
+    } catch (error) {
+        Utils.showToast('删除失败', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// ==================== 页面初始化 ====================
+
+// 重写displayAllUsers以存储数据
+const originalDisplayAllUsers = displayAllUsers;
+displayAllUsers = function(users) {
+    allUsersData = users || [];
+    const tbody = document.getElementById('allUsersTableBody');
+    if (!tbody) return;
+
+    if (users.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-4">暂无数据</td></tr>';
+        return;
+    }
+
+    tbody.innerHTML = users.map(u => `
+        <tr>
+            <td>${u.userId}</td>
+            <td>${u.username}</td>
+            <td>${u.realName}</td>
+            <td>${u.phone}</td>
+            <td>${Utils.getRoleText(u.role)}</td>
+            <td>${u.status === 1 ? '<span class="badge bg-success">启用</span>' : '<span class="badge bg-secondary">禁用</span>'}</td>
+            <td>
+                <button class="btn btn-sm btn-info" onclick="viewUser(${u.userId})">查看</button>
+                <button class="btn btn-sm btn-warning" onclick="editUser(${u.userId})">编辑</button>
+                <button class="btn btn-sm btn-danger" onclick="deleteUser(${u.userId})">删除</button>
+            </td>
+        </tr>
+    `).join('');
+};
+
+// 重写displayAllVehicles以存储数据
+const originalDisplayAllVehicles = displayAllVehicles;
+displayAllVehicles = function(vehicles) {
+    allVehiclesData = vehicles || [];
+    const tbody = document.getElementById('allVehiclesTableBody');
+    if (!tbody) return;
+
+    if (vehicles.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-4">暂无数据</td></tr>';
+        return;
+    }
+
+    tbody.innerHTML = vehicles.map(v => `
+        <tr>
+            <td>${v.licensePlate}</td>
+            <td>${v.brand} ${v.model}</td>
+            <td>${v.color || '-'}</td>
+            <td>${v.mileage || 0}</td>
+            <td>${Utils.getStatusBadge(v.status)}</td>
+            <td>
+                <button class="btn btn-sm btn-info" onclick="viewVehicle(${v.vehicleId})">查看</button>
+                <button class="btn btn-sm btn-warning" onclick="editVehicle(${v.vehicleId})">编辑</button>
+                <button class="btn btn-sm btn-danger" onclick="deleteVehicle(${v.vehicleId})">删除</button>
+            </td>
+        </tr>
+    `).join('');
+};
+
+// 重写displayAllOrders以存储数据
+const originalDisplayAllOrders = displayAllOrders;
+displayAllOrders = async function(orders) {
+    allOrdersData = orders || [];
+    const tbody = document.getElementById('allOrdersTableBody');
+    if (!tbody) return;
+
+    if (orders.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="8" class="text-center text-muted py-4">暂无数据</td></tr>';
+        return;
+    }
+
+    // 获取所有车辆信息
+    const vehiclesRes = await http.get(API.VEHICLES);
+    const vehicles = vehiclesRes.data || [];
+
+    tbody.innerHTML = orders.map(o => {
+        const vehicle = vehicles.find(v => v.vehicleId === o.vehicleId);
+        return `
+            <tr>
+                <td>${o.orderNo}</td>
+                <td>${Utils.getServiceTypeText(o.serviceType)}</td>
+                <td>${vehicle ? vehicle.licensePlate : '-'}</td>
+                <td>${Utils.formatMoney(o.totalCost)}</td>
+                <td>${Utils.getStatusBadge(o.status)}</td>
+                <td>${Utils.getStatusBadge(o.paymentStatus, 'payment')}</td>
+                <td>${Utils.formatDateTime(o.createTime)}</td>
+                <td>
+                    <button class="btn btn-sm btn-info" onclick="viewOrder(${o.orderId})">查看</button>
+                    <button class="btn btn-sm btn-warning" onclick="editOrder(${o.orderId})">编辑</button>
+                    <button class="btn btn-sm btn-danger" onclick="deleteOrder(${o.orderId})">删除</button>
+                </td>
+            </tr>
+        `;
+    }).join('');
+};
+
+// 加载预约数据
+async function loadAppointments() {
+    Utils.loading(true);
+    try {
+        const [appointmentsRes, vehiclesRes] = await Promise.all([
+            http.get(API.APPOINTMENTS),
+            http.get(API.VEHICLES)
+        ]);
+
+        if (appointmentsRes.code === 200) {
+            const vehicles = vehiclesRes.data || [];
+            displayAppointments(appointmentsRes.data || [], vehicles);
+        }
+    } catch (error) {
+        console.error('加载预约失败:', error);
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// 显示预约列表
+function displayAppointments(appointments, vehicles) {
+    const tbody = document.getElementById('appointmentsTableBody');
+    if (!tbody) return;
+
+    if (appointments.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-4">暂无数据</td></tr>';
+        return;
+    }
+
+    tbody.innerHTML = appointments.map(a => {
+        const vehicle = vehicles.find(v => v.vehicleId === a.vehicleId);
+        return `
+            <tr>
+                <td>${a.appointmentId}</td>
+                <td>${Utils.getServiceTypeText(a.serviceType)}</td>
+                <td>${vehicle ? vehicle.licensePlate : '-'}</td>
+                <td>${Utils.formatDateTime(a.appointmentTime)}</td>
+                <td>${a.contactPhone}</td>
+                <td>${Utils.getStatusBadge(a.status, 'appointment')}</td>
+                <td>
+                    <button class="btn btn-sm btn-success" onclick="confirmAppointment(${a.appointmentId})">确认</button>
+                    <button class="btn btn-sm btn-danger" onclick="cancelAppointmentAdmin(${a.appointmentId})">取消</button>
+                </td>
+            </tr>
+        `;
+    }).join('');
+}
+
+// 管理员确认预约
+async function confirmAppointment(id) {
+    Utils.loading(true);
+    try {
+        const response = await http.put(API.APPOINTMENT(id), { status: 'confirmed' });
+        if (response.code === 200) {
+            Utils.showToast('预约已确认', 'success');
+            loadAppointments();
+        } else {
+            Utils.showToast(response.message || '操作失败', 'error');
+        }
+    } catch (error) {
+        Utils.showToast('操作失败', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// 管理员取消预约
+async function cancelAppointmentAdmin(id) {
+    if (!Utils.confirm('确定要取消此预约吗？')) return;
+
+    Utils.loading(true);
+    try {
+        const response = await http.put(API.APPOINTMENT_CANCEL(id), {});
+        if (response.code === 200) {
+            Utils.showToast('预约已取消', 'success');
+            loadAppointments();
+        } else {
+            Utils.showToast(response.message || '操作失败', 'error');
+        }
+    } catch (error) {
+        Utils.showToast('操作失败', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// 页面加载完成后初始化
+document.addEventListener('DOMContentLoaded', function() {
+    // 如果是管理员页面，加载所有数据
+    if (window.location.pathname.includes('admin')) {
+        loadAllData();
+    }
+});

frontend/js/api.js

@@ -1,5 +1,5 @@
-// API请求工具类
-class API {
+// HTTP请求类
+class HttpClient {
     constructor() {
         this.baseURL = API_CONFIG.BASE_URL;
         this.timeout = API_CONFIG.TIMEOUT;
@@ -11,7 +11,7 @@ class API {
             'Content-Type': 'application/json'
         };
 
-        const token = localStorage.getItem(STORAGE_KEYS.TOKEN);
+        const token = localStorage.getItem(STORAGE.TOKEN);
         if (token) {
             headers['Authorization'] = `Bearer ${token}`;
         }
@@ -48,51 +48,93 @@ class API {
     }
 
     // GET请求
-    async get(url) {
+    get(url) {
         return this.request(url, { method: 'GET' });
     }
 
     // POST请求
-    async post(url, body) {
+    post(url, body) {
         return this.request(url, { method: 'POST', body });
     }
 
     // PUT请求
-    async put(url, body) {
+    put(url, body) {
         return this.request(url, { method: 'PUT', body });
     }
 
     // DELETE请求
-    async delete(url) {
+    delete(url) {
         return this.request(url, { method: 'DELETE' });
     }
 
-    // 处理未授权情况
+    // 处理未授权
     handleUnauthorized() {
-        localStorage.removeItem(STORAGE_KEYS.TOKEN);
-        localStorage.removeItem(STORAGE_KEYS.USER_INFO);
+        localStorage.removeItem(STORAGE.TOKEN);
+        localStorage.removeItem(STORAGE.USER);
         window.location.href = 'login.html';
     }
 }
 
-// 创建API实例
-const api = new API();
+// 创建HTTP客户端实例
+const http = new HttpClient();
 
-// 工具函数
-const utils = {
-    // 显示提示消息
-    showMessage(message, type = 'info') {
-        alert(message);
+// 工具函数类
+const Utils = {
+    // 显示Toast消息
+    showToast(message, type = 'info') {
+        const toastEl = document.getElementById('liveToast');
+        const toast = new bootstrap.Toast(toastEl);
+
+        const toastIcon = document.getElementById('toastIcon');
+        const toastTitle = document.getElementById('toastTitle');
+        const toastMessage = document.getElementById('toastMessage');
+
+        // 设置图标和样式
+        toastEl.className = 'toast';
+        toastIcon.className = 'bi me-2';
+
+        switch(type) {
+            case 'success':
+                toastEl.classList.add('success');
+                toastIcon.classList.add('bi-check-circle-fill');
+                toastIcon.style.color = '#198754';
+                toastTitle.textContent = '成功';
+                break;
+            case 'error':
+                toastEl.classList.add('error');
+                toastIcon.classList.add('bi-x-circle-fill');
+                toastIcon.style.color = '#dc3545';
+                toastTitle.textContent = '错误';
+                break;
+            case 'warning':
+                toastEl.classList.add('warning');
+                toastIcon.classList.add('bi-exclamation-triangle-fill');
+                toastIcon.style.color = '#ffc107';
+                toastTitle.textContent = '警告';
+                break;
+            default:
+                toastEl.classList.add('info');
+                toastIcon.classList.add('bi-info-circle-fill');
+                toastIcon.style.color = '#0dcaf0';
+                toastTitle.textContent = '提示';
+        }
+
+        toastMessage.textContent = message;
+        toast.show();
     },
 
-    // 显示成功消息
-    showSuccess(message) {
-        this.showMessage(message, 'success');
-    },
-
-    // 显示错误消息
-    showError(message) {
-        this.showMessage(message, 'error');
+    // 显示/隐藏Loading
+    loading(show = true) {
+        const overlay = document.getElementById('loadingOverlay');
+        if (overlay) {
+            if (show) {
+                overlay.classList.remove('d-none');
+                overlay.classList.add('loading');
+            } else {
+                overlay.classList.add('d-none');
+                overlay.classList.remove('loading');
+            }
+        }
     },
 
     // 确认对话框
@@ -111,12 +153,24 @@ const utils = {
     formatDateTime(dateString) {
         if (!dateString) return '-';
         const date = new Date(dateString);
-        return date.toLocaleString('zh-CN');
+        return date.toLocaleString('zh-CN', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
     },
 
-    // 获取当前用户信息
+    // 格式化金额
+    formatMoney(amount) {
+        if (amount === null || amount === undefined) return '-';
+        return '¥' + parseFloat(amount).toFixed(2);
+    },
+
+    // 获取当前用户
     getCurrentUser() {
-        const userStr = localStorage.getItem(STORAGE_KEYS.USER_INFO);
+        const userStr = localStorage.getItem(STORAGE.USER);
         return userStr ? JSON.parse(userStr) : null;
     },
 
@@ -129,15 +183,15 @@ const utils = {
     // 退出登录
     logout() {
         if (this.confirm('确定要退出登录吗？')) {
-            localStorage.removeItem(STORAGE_KEYS.TOKEN);
-            localStorage.removeItem(STORAGE_KEYS.USER_INFO);
+            localStorage.removeItem(STORAGE.TOKEN);
+            localStorage.removeItem(STORAGE.USER);
             window.location.href = 'login.html';
         }
     },
 
     // 检查登录状态
     checkAuth() {
-        const token = localStorage.getItem(STORAGE_KEYS.TOKEN);
+        const token = localStorage.getItem(STORAGE.TOKEN);
         if (!token) {
             window.location.href = 'login.html';
             return false;
@@ -145,50 +199,64 @@ const utils = {
         return true;
     },
 
-    // 获取状态标签HTML
-    getStatusBadge(status, type) {
+    // 获取状态徽章HTML
+    getStatusBadge(status, type = 'order') {
         const badges = {
-            // 工单状态
-            pending: '<span class="badge badge-info">待处理</span>',
-            appointed: '<span class="badge badge-info">已预约</span>',
-            in_progress: '<span class="badge badge-warning">进行中</span>',
-            completed: '<span class="badge badge-success">已完成</span>',
-            cancelled: '<span class="badge badge-secondary">已取消</span>',
-
-            // 支付状态
-            unpaid: '<span class="badge badge-danger">未支付</span>',
-            paid: '<span class="badge badge-success">已支付</span>',
-            refunded: '<span class="badge badge-secondary">已退款</span>',
-
-            // 预约状态
-            confirmed: '<span class="badge badge-success">已确认</span>',
-
-            // 车辆状态
-            normal: '<span class="badge badge-success">正常</span>',
-            in_service: '<span class="badge badge-warning">维修中</span>'
+            order: {
+                pending: '<span class="badge badge-status pending">待处理</span>',
+                appointed: '<span class="badge badge-status appointed">已预约</span>',
+                in_progress: '<span class="badge badge-status in_progress">进行中</span>',
+                completed: '<span class="badge badge-status completed">已完成</span>',
+                cancelled: '<span class="badge badge-status cancelled">已取消</span>'
+            },
+            payment: {
+                unpaid: '<span class="badge badge-status unpaid">未支付</span>',
+                paid: '<span class="badge badge-status paid">已支付</span>',
+                refunded: '<span class="badge badge-status cancelled">已退款</span>'
+            },
+            appointment: {
+                pending: '<span class="badge badge-status pending">待确认</span>',
+                confirmed: '<span class="badge badge-status completed">已确认</span>',
+                completed: '<span class="badge badge-status completed">已完成</span>',
+                cancelled: '<span class="badge badge-status cancelled">已取消</span>'
+            }
         };
-
-        return badges[status] || `<span class="badge badge-secondary">${status}</span>`;
+        return badges[type]?.[status] || `<span class="badge bg-secondary">${status}</span>`;
     },
 
     // 获取服务类型文本
     getServiceTypeText(type) {
         const types = {
-            maintenance: '保养维护',
-            repair: '维修服务',
-            beauty: '美容服务',
-            insurance: '保险代理'
+            maintenance: '<span class="badge bg-primary">保养维护</span>',
+            repair: '<span class="badge bg-warning">维修服务</span>',
+            beauty: '<span class="badge bg-info">美容服务</span>',
+            insurance: '<span class="badge bg-success">保险代理</span>'
         };
         return types[type] || type;
     },
 
-    // 获取用户角色文本
+    // 获取角色文本
     getRoleText(role) {
         const roles = {
-            admin: '管理员',
-            staff: '工作人员',
-            customer: '客户'
+            admin: '<span class="badge bg-danger">管理员</span>',
+            staff: '<span class="badge bg-success">工作人员</span>',
+            customer: '<span class="badge bg-info">客户</span>'
         };
         return roles[role] || role;
+    },
+
+    // 根据角色跳转
+    redirectToDashboard(role) {
+        const roleMap = {
+            'admin': 'admin/dashboard.html',
+            'staff': 'staff/dashboard.html',
+            'customer': 'customer/dashboard.html'
+        };
+        const url = roleMap[role];
+        if (url) {
+            window.location.href = url;
+        } else {
+            this.showToast('未知的用户角色', 'error');
+        }
     }
 };

frontend/js/app.js

@@ -0,0 +1,757 @@
+// 应用程序初始化
+document.addEventListener('DOMContentLoaded', function() {
+    // 检查是否已登录
+    const token = localStorage.getItem(STORAGE.TOKEN);
+    const user = Utils.getCurrentUser();
+
+    // 如果在登录页面
+    if (window.location.pathname.endsWith('login.html')) {
+        if (token && user) {
+            Utils.redirectToDashboard(user.role);
+            return;
+        }
+        initLoginPage();
+        return;
+    }
+
+    // 如果在仪表板页面
+    if (token && user) {
+        initDashboard(user);
+    } else {
+        window.location.href = 'login.html';
+    }
+});
+
+// 初始化登录页面
+function initLoginPage() {
+    const loginForm = document.getElementById('loginForm');
+    const loginBtn = document.getElementById('loginBtn');
+
+    if (loginForm) {
+        loginForm.addEventListener('submit', async function(e) {
+            e.preventDefault();
+
+            const username = document.getElementById('username').value.trim();
+            const password = document.getElementById('password').value.trim();
+            const role = document.getElementById('role').value;
+
+            // 验证输入
+            if (!username) {
+                Utils.showToast('请输入用户名', 'warning');
+                return;
+            }
+
+            if (!password) {
+                Utils.showToast('请输入密码', 'warning');
+                return;
+            }
+
+            // 禁用按钮并显示loading
+            loginBtn.disabled = true;
+            loginBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>登录中...';
+            Utils.loading(true);
+
+            try {
+                const response = await http.post(API.LOGIN, {
+                    username: username,
+                    password: password
+                });
+
+                if (response.code === 200) {
+                    const { token, userInfo } = response.data;
+
+                    // 验证角色
+                    if (userInfo.role !== role) {
+                        Utils.showToast('登录角色不匹配，请选择正确的角色', 'error');
+                        loginBtn.disabled = false;
+                        loginBtn.innerHTML = '<i class="bi bi-box-arrow-in-right"></i> 登录';
+                        Utils.loading(false);
+                        return;
+                    }
+
+                    // 保存登录信息
+                    localStorage.setItem(STORAGE.TOKEN, token);
+                    localStorage.setItem(STORAGE.USER, JSON.stringify(userInfo));
+
+                    Utils.showToast('登录成功！', 'success');
+
+                    // 延迟跳转
+                    setTimeout(() => {
+                        Utils.redirectToDashboard(userInfo.role);
+                    }, 500);
+
+                } else {
+                    Utils.showToast(response.message || '登录失败', 'error');
+                    loginBtn.disabled = false;
+                    loginBtn.innerHTML = '<i class="bi bi-box-arrow-in-right"></i> 登录';
+                    Utils.loading(false);
+                }
+
+            } catch (error) {
+                console.error('登录错误:', error);
+                Utils.showToast('登录失败，请检查网络连接', 'error');
+                loginBtn.disabled = false;
+                loginBtn.innerHTML = '<i class="bi bi-box-arrow-in-right"></i> 登录';
+                Utils.loading(false);
+            }
+        });
+    }
+
+    // 回车键登录
+    const passwordInput = document.getElementById('password');
+    if (passwordInput) {
+        passwordInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                loginForm.dispatchEvent(new Event('submit'));
+            }
+        });
+    }
+}
+
+// 初始化仪表板
+function initDashboard(user) {
+    // 显示用户信息
+    const userNameEl = document.getElementById('userName');
+    const userRoleEl = document.getElementById('userRole');
+    const userAvatarEl = document.getElementById('userAvatar');
+
+    if (userNameEl) userNameEl.textContent = user.realName;
+    if (userRoleEl) userRoleEl.textContent = Utils.getRoleText(user.role);
+    if (userAvatarEl && !userAvatarEl.textContent) {
+        userAvatarEl.textContent = user.realName.charAt(0).toUpperCase();
+    }
+
+    // 根据角色加载不同内容
+    switch(user.role) {
+        case 'admin':
+            initAdminDashboard();
+            break;
+        case 'staff':
+            initStaffDashboard();
+            break;
+        case 'customer':
+            initCustomerDashboard();
+            break;
+    }
+}
+
+// 初始化管理员仪表板
+function initAdminDashboard() {
+    console.log('初始化管理员仪表板');
+
+    // 加载所有数据
+    if (typeof loadAllData === 'function') {
+        loadAllData();
+    } else {
+        // 单独加载各个模块
+        loadAdminStats();
+        loadRecentOrders();
+        loadAppointments();
+    }
+}
+
+// 加载最近工单
+async function loadRecentOrders() {
+    try {
+        const response = await http.get(API.ORDERS);
+        if (response.code === 200 && response.data) {
+            const orders = response.data.slice(0, 5); // 只取前5条
+            displayRecentOrders(orders);
+        }
+    } catch (error) {
+        console.error('加载最近工单失败:', error);
+    }
+}
+
+// 显示最近工单
+async function displayRecentOrders(orders) {
+    const tbody = document.getElementById('recentOrdersTableBody');
+    if (!tbody) return;
+
+    if (orders.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-4">暂无数据</td></tr>';
+        return;
+    }
+
+    // 获取所有车辆信息
+    const vehiclesRes = await http.get(API.VEHICLES);
+    const vehicles = vehiclesRes.data || [];
+
+    tbody.innerHTML = orders.map(o => {
+        const vehicle = vehicles.find(v => v.vehicleId === o.vehicleId);
+        return `
+            <tr>
+                <td>${o.orderNo}</td>
+                <td>${Utils.getServiceTypeText(o.serviceType)}</td>
+                <td>${vehicle ? vehicle.licensePlate : '-'}</td>
+                <td>${Utils.formatMoney(o.totalCost)}</td>
+                <td>${Utils.getStatusBadge(o.status)}</td>
+                <td>${Utils.formatDateTime(o.createTime)}</td>
+            </tr>
+        `;
+    }).join('');
+}
+
+// 加载管理员统计数据
+async function loadAdminStats() {
+    try {
+        const [usersRes, vehiclesRes, ordersRes, partsRes] = await Promise.all([
+            http.get(API.USERS),
+            http.get(API.VEHICLES),
+            http.get(API.ORDERS),
+            http.get(API.PARTS_LOW_STOCK)
+        ]);
+
+        if (usersRes.code === 200) {
+            updateStat('totalUsers', usersRes.data?.length || 0);
+        }
+
+        if (vehiclesRes.code === 200) {
+            updateStat('totalVehicles', vehiclesRes.data?.length || 0);
+        }
+
+        if (ordersRes.code === 200) {
+            updateStat('totalOrders', ordersRes.data?.length || 0);
+        }
+
+        if (partsRes.code === 200) {
+            updateStat('lowStockParts', partsRes.data?.length || 0);
+        }
+    } catch (error) {
+        console.error('加载统计数据失败:', error);
+    }
+}
+
+// 更新统计数字
+function updateStat(id, value) {
+    const el = document.getElementById(id);
+    if (el) {
+        el.textContent = value;
+        // 添加动画效果
+        el.style.transition = 'all 0.3s';
+        el.style.transform = 'scale(1.2)';
+        setTimeout(() => {
+            el.style.transform = 'scale(1)';
+        }, 300);
+    }
+}
+
+// 初始化工作人员仪表板
+function initStaffDashboard() {
+    console.log('初始化工作人员仪表板');
+    loadStaffStats();
+}
+
+// 加载工作人员统计数据
+async function loadStaffStats() {
+    const user = Utils.getCurrentUser();
+    if (!user) return;
+
+    try {
+        const response = await http.get(API.ORDERS);
+        if (response.code === 200 && response.data) {
+            const myOrders = response.data.filter(o => o.staffId === user.userId);
+            const inProgress = myOrders.filter(o => o.status === 'in_progress');
+            const completed = myOrders.filter(o => o.status === 'completed');
+
+            updateStat('myOrdersCount', myOrders.length);
+            updateStat('inProgressCount', inProgress.length);
+            updateStat('completedCount', completed.length);
+        }
+    } catch (error) {
+        console.error('加载统计数据失败:', error);
+    }
+}
+
+// 初始化客户仪表板
+function initCustomerDashboard() {
+    console.log('初始化客户仪表板');
+    loadCustomerData();
+}
+
+// 加载客户数据
+async function loadCustomerData() {
+    const user = Utils.getCurrentUser();
+    if (!user) return;
+
+    try {
+        // 获取所有用户，找到自己的customer_id
+        const usersRes = await http.get(API.USERS);
+        if (usersRes.code === 200 && usersRes.data) {
+            const customers = usersRes.data.filter(u => u.role === 'customer');
+            const currentUser = customers.find(c => c.userId === user.userId);
+
+            if (currentUser) {
+                // 加载车辆、工单、预约数据
+                loadCustomerVehicles(currentUser.userId);
+                loadCustomerOrders(currentUser.userId);
+                loadCustomerAppointments(currentUser.userId);
+            }
+        }
+    } catch (error) {
+        console.error('加载客户数据失败:', error);
+    }
+}
+
+// 加载客户车辆
+async function loadCustomerVehicles(userId) {
+    try {
+        const response = await http.get(API.VEHICLES);
+        if (response.code === 200 && response.data) {
+            const myVehicles = response.data.filter(v => v.customerId === userId);
+            displayVehicles(myVehicles);
+            populateVehicleSelect(myVehicles);
+        }
+    } catch (error) {
+        console.error('加载车辆失败:', error);
+    }
+}
+
+// 显示车辆列表
+function displayVehicles(vehicles) {
+    const container = document.getElementById('vehiclesContainer');
+    if (!container) return;
+
+    if (vehicles.length === 0) {
+        container.innerHTML = `
+            <div class="empty-state">
+                <i class="bi bi-car-front"></i>
+                <p>暂无车辆信息</p>
+            </div>
+        `;
+        return;
+    }
+
+    container.innerHTML = vehicles.map(v => `
+        <div class="col-md-6 col-lg-4 mb-4">
+            <div class="vehicle-card">
+                <div class="vehicle-plate">${v.licensePlate}</div>
+                <h6 class="mb-2">${v.brand} ${v.model}</h6>
+                <p class="text-muted small mb-1">
+                    <i class="bi bi-palette"></i> 颜色: ${v.color || '-'}
+                </p>
+                <p class="text-muted small mb-1">
+                    <i class="bi bi-speedometer2"></i> 里程: ${v.mileage || 0} 公里
+                </p>
+                <p class="text-muted small mb-2">
+                    <i class="bi bi-calendar-check"></i> 上次保养: ${Utils.formatDate(v.lastMaintenanceDate)}
+                </p>
+                ${Utils.getStatusBadge(v.status)}
+            </div>
+        </div>
+    `).join('');
+}
+
+// 填充车辆选择框
+function populateVehicleSelect(vehicles) {
+    const select = document.getElementById('vehicleSelect');
+    if (!select) return;
+
+    select.innerHTML = '<option value="">请选择车辆</option>' +
+        vehicles.map(v => `<option value="${v.vehicleId}">${v.licensePlate} - ${v.brand} ${v.model}</option>`).join('');
+}
+
+// 加载客户工单
+async function loadCustomerOrders(userId) {
+    try {
+        const [ordersRes, vehiclesRes] = await Promise.all([
+            http.get(API.ORDER_CUSTOMER(userId)),
+            http.get(API.VEHICLES)
+        ]);
+
+        if (ordersRes.code === 200 && ordersRes.data) {
+            const vehicles = vehiclesRes.data || [];
+            displayOrders(ordersRes.data, vehicles);
+        }
+    } catch (error) {
+        console.error('加载工单失败:', error);
+    }
+}
+
+// 显示工单列表
+function displayOrders(orders, vehicles) {
+    const tbody = document.getElementById('ordersTableBody');
+    if (!tbody) return;
+
+    if (orders.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-4">暂无维保记录</td></tr>';
+        return;
+    }
+
+    tbody.innerHTML = orders.map(o => {
+        const vehicle = vehicles.find(v => v.vehicleId === o.vehicleId);
+        return `
+            <tr>
+                <td>${o.orderNo}</td>
+                <td>${Utils.getServiceTypeText(o.serviceType)}</td>
+                <td>${vehicle ? vehicle.licensePlate : '-'}</td>
+                <td>${Utils.formatMoney(o.totalCost)}</td>
+                <td>${Utils.getStatusBadge(o.status)}</td>
+                <td>${Utils.formatDateTime(o.createTime)}</td>
+            </tr>
+        `;
+    }).join('');
+}
+
+// 加载客户预约
+async function loadCustomerAppointments(userId) {
+    try {
+        const [appointmentsRes, vehiclesRes] = await Promise.all([
+            http.get(API.APPOINTMENT_CUSTOMER(userId)),
+            http.get(API.VEHICLES)
+        ]);
+
+        if (appointmentsRes.code === 200 && appointmentsRes.data) {
+            const vehicles = vehiclesRes.data || [];
+            displayAppointments(appointmentsRes.data, vehicles);
+        }
+    } catch (error) {
+        console.error('加载预约失败:', error);
+    }
+}
+
+// 显示预约列表
+function displayAppointments(appointments, vehicles) {
+    const tbody = document.getElementById('appointmentsTableBody');
+    if (!tbody) return;
+
+    if (appointments.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-4">暂无预约记录</td></tr>';
+        return;
+    }
+
+    tbody.innerHTML = appointments.map(a => {
+        const vehicle = vehicles.find(v => v.vehicleId === a.vehicleId);
+        return `
+            <tr>
+                <td>${Utils.getServiceTypeText(a.serviceType)}</td>
+                <td>${vehicle ? vehicle.licensePlate : '-'}</td>
+                <td>${Utils.formatDateTime(a.appointmentTime)}</td>
+                <td>${Utils.getStatusBadge(a.status, 'appointment')}</td>
+                <td>
+                    ${a.status === 'pending' ? `<button class="btn btn-sm btn-danger" onclick="cancelAppointment(${a.appointmentId})">取消</button>` : '-'}
+                </td>
+            </tr>
+        `;
+    }).join('');
+}
+
+// 取消预约
+async function cancelAppointment(id) {
+    if (!Utils.confirm('确定要取消此预约吗？')) return;
+
+    Utils.loading(true);
+    try {
+        const response = await http.put(API.APPOINTMENT_CANCEL(id), {});
+        if (response.code === 200) {
+            Utils.showToast('预约已取消', 'success');
+            // 重新加载预约列表
+            const user = Utils.getCurrentUser();
+            if (user) {
+                loadCustomerAppointments(user.userId);
+            }
+        } else {
+            Utils.showToast(response.message || '取消失败', 'error');
+        }
+    } catch (error) {
+        console.error('取消预约失败:', error);
+        Utils.showToast('操作失败，请重试', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// 提交预约
+async function submitAppointment() {
+    const user = Utils.getCurrentUser();
+    if (!user) return;
+
+    const vehicleId = document.getElementById('vehicleSelect').value;
+    const serviceType = document.getElementById('serviceType').value;
+    const appointmentTime = document.getElementById('appointmentTime').value;
+    const contactPhone = document.getElementById('contactPhone').value;
+    const description = document.getElementById('description').value;
+
+    // 验证
+    if (!vehicleId) {
+        Utils.showToast('请选择车辆', 'warning');
+        return;
+    }
+
+    if (!appointmentTime) {
+        Utils.showToast('请选择预约时间', 'warning');
+        return;
+    }
+
+    if (!contactPhone) {
+        Utils.showToast('请输入联系电话', 'warning');
+        return;
+    }
+
+    Utils.loading(true);
+    try {
+        const response = await http.post(API.APPOINTMENTS, {
+            customerId: user.userId,
+            vehicleId: parseInt(vehicleId),
+            serviceType: serviceType,
+            appointmentTime: appointmentTime,
+            contactPhone: contactPhone,
+            description: description
+        });
+
+        if (response.code === 200) {
+            Utils.showToast('预约成功！', 'success');
+            // 重置表单
+            document.getElementById('appointmentForm').reset();
+            // 重新加载预约列表
+            loadCustomerAppointments(user.userId);
+        } else {
+            Utils.showToast(response.message || '预约失败', 'error');
+        }
+    } catch (error) {
+        console.error('预约失败:', error);
+        Utils.showToast('预约失败，请重试', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// 显示Toast（全局函数）
+function showToast(message, type = 'info') {
+    Utils.showToast(message, type);
+}
+
+// 显示Section
+function showSection(sectionId) {
+    // 隐藏所有section
+    document.querySelectorAll('.content-section').forEach(section => {
+        section.style.display = 'none';
+    });
+
+    // 显示选中的section
+    const targetSection = document.getElementById(sectionId + '-section');
+    if (targetSection) {
+        targetSection.style.display = 'block';
+    }
+
+    // 更新菜单激活状态
+    document.querySelectorAll('.menu-item').forEach(item => {
+        item.classList.remove('active');
+    });
+    event.currentTarget.classList.add('active');
+
+    // 加载对应数据
+    switch(sectionId) {
+        case 'overview':
+            if (Utils.hasRole('admin')) {
+                loadAdminStats();
+            } else if (Utils.hasRole('staff')) {
+                loadStaffStats();
+            }
+            break;
+        case 'vehicles':
+            loadAllVehicles();
+            break;
+        case 'orders':
+            loadAllOrders();
+            break;
+        case 'users':
+            loadAllUsers();
+            break;
+    }
+}
+
+// 加载所有车辆（管理员页面使用）
+async function loadAllVehicles() {
+    // 如果是管理员页面，调用admin.js中的函数
+    if (typeof loadAllData === 'function') {
+        return;
+    }
+
+    Utils.loading(true);
+    try {
+        const response = await http.get(API.VEHICLES);
+        if (response.code === 200) {
+            displayAllVehicles(response.data || []);
+        }
+    } catch (error) {
+        console.error('加载车辆失败:', error);
+        Utils.showToast('加载失败', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// 显示所有车辆（客户页面使用）
+function displayAllVehicles(vehicles) {
+    // 如果是管理员页面，不执行
+    if (document.getElementById('allVehiclesTableBody')) {
+        return;
+    }
+
+    const container = document.getElementById('vehiclesContainer');
+    if (!container) return;
+
+    if (vehicles.length === 0) {
+        container.innerHTML = `
+            <div class="col-12 text-center text-muted py-5">
+                <i class="bi bi-car-front fs-1 d-block mb-3"></i>
+                <p>暂无车辆信息</p>
+            </div>
+        `;
+        return;
+    }
+
+    container.innerHTML = vehicles.map(v => `
+        <div class="col-md-6 col-lg-4 mb-4">
+            <div class="vehicle-card">
+                <div class="vehicle-plate">${v.licensePlate}</div>
+                <h6 class="mb-2">${v.brand} ${v.model}</h6>
+                <p class="text-muted small mb-1">
+                    <i class="bi bi-palette"></i> 颜色: ${v.color || '-'}
+                </p>
+                <p class="text-muted small mb-1">
+                    <i class="bi bi-speedometer2"></i> 里程: ${v.mileage || 0} 公里
+                </p>
+                <p class="text-muted small mb-2">
+                    <i class="bi bi-calendar-check"></i> 上次保养: ${Utils.formatDate(v.lastMaintenanceDate)}
+                </p>
+                ${Utils.getStatusBadge(v.status)}
+            </div>
+        </div>
+    `).join('');
+}
+
+// 加载所有工单
+async function loadAllOrders() {
+    // 如果是管理员页面，跳过（由admin.js处理）
+    if (document.getElementById('allOrdersTableBody')) {
+        return;
+    }
+
+    Utils.loading(true);
+    try {
+        const response = await http.get(API.ORDERS);
+        if (response.code === 200) {
+            displayAllOrders(response.data || []);
+        }
+    } catch (error) {
+        console.error('加载工单失败:', error);
+        Utils.showToast('加载失败', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// 显示所有工单（客户页面使用）
+async function displayAllOrders(orders) {
+    // 如果是管理员页面，不执行
+    if (document.getElementById('allOrdersTableBody')) {
+        return;
+    }
+
+    const tbody = document.getElementById('ordersTableBody');
+    if (!tbody) return;
+
+    if (orders.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-4">暂无维保记录</td></tr>';
+        return;
+    }
+
+    // 获取所有车辆信息
+    const vehiclesRes = await http.get(API.VEHICLES);
+    const vehicles = vehiclesRes.data || [];
+
+    tbody.innerHTML = orders.map(o => {
+        const vehicle = vehicles.find(v => v.vehicleId === o.vehicleId);
+        return `
+            <tr>
+                <td>${o.orderNo}</td>
+                <td>${Utils.getServiceTypeText(o.serviceType)}</td>
+                <td>${vehicle ? vehicle.licensePlate : '-'}</td>
+                <td>${Utils.formatMoney(o.totalCost)}</td>
+                <td>${Utils.getStatusBadge(o.status)}</td>
+                <td>${Utils.formatDateTime(o.createTime)}</td>
+            </tr>
+        `;
+    }).join('');
+}
+
+// 加载所有用户
+async function loadAllUsers() {
+    // 管理员页面由admin.js处理
+    if (document.getElementById('allUsersTableBody')) {
+        return;
+    }
+}
+
+// 显示所有用户（占位）
+function displayAllUsers(users) {
+    // 管理员页面由admin.js处理
+}
+
+// CRUD操作函数
+async function deleteVehicle(id) {
+    if (!Utils.confirm('确定要删除此车辆吗？')) return;
+
+    Utils.loading(true);
+    try {
+        const response = await http.delete(API.VEHICLE(id));
+        if (response.code === 200) {
+            Utils.showToast('删除成功', 'success');
+            loadAllVehicles();
+        } else {
+            Utils.showToast(response.message || '删除失败', 'error');
+        }
+    } catch (error) {
+        Utils.showToast('删除失败', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+async function deleteOrder(id) {
+    if (!Utils.confirm('确定要删除此工单吗？')) return;
+
+    Utils.loading(true);
+    try {
+        const response = await http.delete(API.ORDER(id));
+        if (response.code === 200) {
+            Utils.showToast('删除成功', 'success');
+            loadAllOrders();
+        } else {
+            Utils.showToast(response.message || '删除失败', 'error');
+        }
+    } catch (error) {
+        Utils.showToast('删除失败', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+async function deleteUser(id) {
+    if (!Utils.confirm('确定要删除此用户吗？')) return;
+
+    Utils.loading(true);
+    try {
+        const response = await http.delete(API.USER(id));
+        if (response.code === 200) {
+            Utils.showToast('删除成功', 'success');
+            loadAllUsers();
+        } else {
+            Utils.showToast(response.message || '删除失败', 'error');
+        }
+    } catch (error) {
+        Utils.showToast('删除失败', 'error');
+    } finally {
+        Utils.loading(false);
+    }
+}
+
+// 占位函数
+function viewVehicle(id) { Utils.showToast('查看车辆功能', 'info'); }
+function editVehicle(id) { Utils.showToast('编辑车辆功能', 'info'); }
+function viewOrder(id) { Utils.showToast('查看工单功能', 'info'); }
+function editOrder(id) { Utils.showToast('编辑工单功能', 'info'); }
+function viewUser(id) { Utils.showToast('查看用户功能', 'info'); }
+function editUser(id) { Utils.showToast('编辑用户功能', 'info'); }

frontend/js/config.js

@@ -5,48 +5,87 @@ const API_CONFIG = {
 };
 
 // API端点
-const API_ENDPOINTS = {
-    // 认证相关
+const API = {
+    // 认证
     LOGIN: '/auth/login',
     LOGOUT: '/auth/logout',
     REGISTER: '/auth/register',
 
-    // 用户管理
+    // 用户
     USERS: '/users',
-    USER_BY_ID: (id) => `/users/${id}`,
-    USERS_BY_ROLE: (role) => `/users/role/${role}`,
+    USER: (id) => `/users/${id}`,
+    USERS_ROLE: (role) => `/users/role/${role}`,
     CHANGE_PASSWORD: (id) => `/users/${id}/password`,
 
-    // 车辆管理
+    // 车辆
     VEHICLES: '/vehicles',
-    VEHICLE_BY_ID: (id) => `/vehicles/${id}`,
-    VEHICLES_BY_CUSTOMER: (customerId) => `/vehicles/customer/${customerId}`,
-    VEHICLE_BY_PLATE: (plate) => `/vehicles/plate/${plate}`,
+    VEHICLE: (id) => `/vehicles/${id}`,
+    VEHICLE_CUSTOMER: (customerId) => `/vehicles/customer/${customerId}`,
+    VEHICLE_PLATE: (plate) => `/vehicles/plate/${plate}`,
 
-    // 工单管理
+    // 工单
     ORDERS: '/orders',
-    ORDER_BY_ID: (id) => `/orders/${id}`,
-    ORDERS_BY_CUSTOMER: (customerId) => `/orders/customer/${customerId}`,
-    ORDERS_BY_VEHICLE: (vehicleId) => `/orders/vehicle/${vehicleId}`,
-    ORDERS_BY_STATUS: (status) => `/orders/status/${status}`,
+    ORDER: (id) => `/orders/${id}`,
+    ORDER_CUSTOMER: (customerId) => `/orders/customer/${customerId}`,
+    ORDER_VEHICLE: (vehicleId) => `/orders/vehicle/${vehicleId}`,
+    ORDER_STATUS: (status) => `/orders/status/${status}`,
 
-    // 配件管理
+    // 配件
     PARTS: '/parts',
-    PART_BY_ID: (id) => `/parts/${id}`,
-    PARTS_BY_CATEGORY: (category) => `/parts/category/${category}`,
+    PART: (id) => `/parts/${id}`,
+    PARTS_CATEGORY: (category) => `/parts/category/${category}`,
     PARTS_LOW_STOCK: '/parts/low-stock',
 
-    // 预约管理
+    // 预约
     APPOINTMENTS: '/appointments',
-    APPOINTMENT_BY_ID: (id) => `/appointments/${id}`,
-    APPOINTMENTS_BY_CUSTOMER: (customerId) => `/appointments/customer/${customerId}`,
-    APPOINTMENTS_BY_STATUS: (status) => `/appointments/status/${status}`,
-    CANCEL_APPOINTMENT: (id) => `/appointments/${id}/cancel`
+    APPOINTMENT: (id) => `/appointments/${id}`,
+    APPOINTMENT_CUSTOMER: (customerId) => `/appointments/customer/${customerId}`,
+    APPOINTMENT_STATUS: (status) => `/appointments/status/${status}`,
+    APPOINTMENT_CANCEL: (id) => `/appointments/${id}/cancel`
 };
 
 // 本地存储键名
-const STORAGE_KEYS = {
+const STORAGE = {
     TOKEN: 'car_maintenance_token',
-    USER_INFO: 'car_maintenance_user',
-    REMEMBER_ME: 'car_maintenance_remember'
+    USER: 'car_maintenance_user',
+    REMEMBER: 'car_maintenance_remember'
+};
+
+// 角色类型
+const ROLES = {
+    ADMIN: 'admin',
+    STAFF: 'staff',
+    CUSTOMER: 'customer'
+};
+
+// 服务类型
+const SERVICE_TYPES = {
+    MAINTENANCE: 'maintenance',
+    REPAIR: 'repair',
+    BEAUTY: 'beauty',
+    INSURANCE: 'insurance'
+};
+
+// 工单状态
+const ORDER_STATUS = {
+    PENDING: 'pending',
+    APPOINTED: 'appointed',
+    IN_PROGRESS: 'in_progress',
+    COMPLETED: 'completed',
+    CANCELLED: 'cancelled'
+};
+
+// 支付状态
+const PAYMENT_STATUS = {
+    UNPAID: 'unpaid',
+    PAID: 'paid',
+    REFUNDED: 'refunded'
+};
+
+// 预约状态
+const APPOINTMENT_STATUS = {
+    PENDING: 'pending',
+    CONFIRMED: 'confirmed',
+    COMPLETED: 'completed',
+    CANCELLED: 'cancelled'
 };