From 883839e97c82a745d5a28282b7283f25a9dfd3f3 Mon Sep 17 00:00:00 2001
From: yovinchen <gzh298255@gmail.com>
Date: Wed, 2 Jul 2025 22:39:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/webapp/WEB-INF/views/cart.jsp        | 585 ++++++++++++
 .../webapp/WEB-INF/views/flashsale-detail.jsp | 873 +++++++++++++++++
 src/main/webapp/WEB-INF/views/flashsales.jsp  | 889 ++++++++++++++++++
 src/main/webapp/WEB-INF/views/orders.jsp      | 631 +++++++++++++
 src/main/webapp/WEB-INF/views/products.jsp    | 501 ++++++++++
 5 files changed, 3479 insertions(+)
 create mode 100644 src/main/webapp/WEB-INF/views/cart.jsp
 create mode 100644 src/main/webapp/WEB-INF/views/flashsale-detail.jsp
 create mode 100644 src/main/webapp/WEB-INF/views/flashsales.jsp
 create mode 100644 src/main/webapp/WEB-INF/views/orders.jsp
 create mode 100644 src/main/webapp/WEB-INF/views/products.jsp

diff --git a/src/main/webapp/WEB-INF/views/cart.jsp b/src/main/webapp/WEB-INF/views/cart.jsp
new file mode 100644
index 0000000..f6623e8
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/cart.jsp
@@ -0,0 +1,585 @@
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fn" uri="http://flashsale.org/functions" %>
+
+<c:set var="pageTitle" value="购物车"/>
+<%@ include file="common/header.jsp" %>
+
+<div class="container my-4">
+    <div class="row">
+        <div class="col-12">
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item"><a href="${pageContext.request.contextPath}/">首页</a></li>
+                    <li class="breadcrumb-item active">购物车</li>
+                </ol>
+            </nav>
+        </div>
+    </div>
+
+    <!-- 购物车内容 -->
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <h5 class="mb-0">
+                        <i class="fas fa-shopping-cart text-primary"></i> 我的购物车
+                    </h5>
+                    <div>
+                        <button class="btn btn-outline-danger btn-sm" onclick="clearCart()" id="clearCartBtn"
+                                style="display: none;">
+                            <i class="fas fa-trash"></i> 清空购物车
+                        </button>
+                    </div>
+                </div>
+
+                <div class="card-body">
+                    <!-- 加载中状态 -->
+                    <div id="loadingCart" class="text-center py-5">
+                        <i class="fas fa-spinner fa-spin fa-2x text-muted"></i>
+                        <p class="text-muted mt-2">加载购物车中...</p>
+                    </div>
+
+                    <!-- 空购物车状态 -->
+                    <div id="emptyCart" class="text-center py-5" style="display: none;">
+                        <i class="fas fa-shopping-cart fa-4x text-muted mb-3"></i>
+                        <h5 class="text-muted">购物车空空如也</h5>
+                        <p class="text-muted">快去挑选您喜欢的商品吧~</p>
+                        <a href="${pageContext.request.contextPath}/" class="btn btn-primary">
+                            <i class="fas fa-shopping-bag"></i> 去购物
+                        </a>
+                    </div>
+
+                    <!-- 购物车商品列表 -->
+                    <div id="cartItems" style="display: none;">
+                        <!-- 全选区域 -->
+                        <div class="row mb-3 border-bottom pb-3">
+                            <div class="col-md-6">
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" id="selectAll">
+                                    <label class="form-check-label" for="selectAll">
+                                        全选
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="col-md-6 text-end">
+                                <button class="btn btn-outline-danger btn-sm" onclick="batchRemoveSelected()">
+                                    <i class="fas fa-trash"></i> 删除选中
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- 商品列表容器 -->
+                        <div id="cartItemsList"></div>
+
+                        <!-- 结算区域 -->
+                        <div class="row mt-4 pt-3 border-top">
+                            <div class="col-md-8">
+                                <div class="d-flex align-items-center">
+                                    <span class="text-muted me-3">已选择 <span id="selectedCount">0</span> 件商品</span>
+                                    <span class="text-muted">总计：<span id="totalQuantity">0</span> 件</span>
+                                </div>
+                            </div>
+                            <div class="col-md-4 text-end">
+                                <div class="d-flex align-items-center justify-content-end">
+                                    <span class="h5 text-danger me-3 mb-0">
+                                        ¥<span id="totalPrice">0.00</span>
+                                    </span>
+                                    <button class="btn btn-danger btn-lg" onclick="checkout()" id="checkoutBtn"
+                                            disabled>
+                                        <i class="fas fa-credit-card"></i> 去结算
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 推荐商品 -->
+    <div class="row mt-5">
+        <div class="col-12">
+            <h5 class="mb-3">
+                <i class="fas fa-heart text-danger"></i> 猜你喜欢
+            </h5>
+            <div id="recommendedProducts" class="row">
+                <!-- 推荐商品将通过AJAX加载 -->
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    $(document).ready(function () {
+        loadCart();
+        loadRecommendedProducts();
+    });
+
+    // 加载购物车
+    function loadCart() {
+        $('#loadingCart').show();
+        $('#emptyCart').hide();
+        $('#cartItems').hide();
+
+        <c:choose>
+        <c:when test="${not empty sessionScope.user}">
+        $.ajax({
+            url: '${pageContext.request.contextPath}/api/cart',
+            type: 'GET',
+            success: function (response) {
+                if (response.success && response.data) {
+                    renderCart(response.data);
+                } else {
+                    showEmptyCart();
+                }
+            },
+            error: function () {
+                showMessage('加载购物车失败，请刷新页面重试', 'error');
+                showEmptyCart();
+            },
+            complete: function () {
+                $('#loadingCart').hide();
+            }
+        });
+        </c:when>
+        <c:otherwise>
+        $('#loadingCart').hide();
+        showMessage('请先登录', 'warning');
+        setTimeout(() => {
+            window.location.href = '${pageContext.request.contextPath}/login';
+        }, 1000);
+        </c:otherwise>
+        </c:choose>
+    }
+
+    // 渲染购物车
+    function renderCart(cart) {
+        if (!cart.items || cart.items.length === 0) {
+            showEmptyCart();
+            return;
+        }
+
+        let html = '';
+        cart.items.forEach(function (item) {
+            html += `
+            <div class="row align-items-center py-3 border-bottom cart-item" data-product-id="` + item.productId + `">
+                <div class="col-md-1">
+                    <div class="form-check">
+                        <input class="form-check-input item-checkbox" type="checkbox" value="` + item.productId + `">
+                    </div>
+                </div>
+                <div class="col-md-2">
+                    <img src="` + (item.productImageUrl || '${pageContext.request.contextPath}/images/default-product.svg') + `" 
+                         class="img-fluid rounded" alt="` + item.productName + `" style="max-height: 80px;"
+                         onerror="this.src='${pageContext.request.contextPath}/images/default-product.svg'; this.onerror=null;">
+                </div>
+                <div class="col-md-3">
+                    <h6 class="mb-1">` + item.productName + `</h6>
+                    <small class="text-muted">库存：` + item.stock + ` 件</small>
+                </div>
+                <div class="col-md-2">
+                    <span class="text-danger fw-bold">¥` + item.productPrice.toFixed(2) + `</span>
+                </div>
+                <div class="col-md-2">
+                    <div class="input-group input-group-sm" style="width: 120px;">
+                        <button class="btn btn-outline-secondary" type="button" onclick="updateQuantity(` + item.productId + `, ` + (item.quantity - 1) + `)">
+                            <i class="fas fa-minus"></i>
+                        </button>
+                        <input type="number" class="form-control text-center" value="` + item.quantity + `" 
+                               min="1" max="` + item.stock + `" 
+                               onchange="updateQuantity(` + item.productId + `, this.value)">
+                        <button class="btn btn-outline-secondary" type="button" onclick="updateQuantity(` + item.productId + `, ` + (item.quantity + 1) + `)">
+                            <i class="fas fa-plus"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="col-md-1">
+                    <span class="fw-bold text-danger">¥` + item.subtotal.toFixed(2) + `</span>
+                </div>
+                <div class="col-md-1">
+                    <button class="btn btn-outline-danger btn-sm" onclick="removeFromCart(` + item.productId + `)" title="删除">
+                        <i class="fas fa-trash"></i>
+                    </button>
+                </div>
+            </div>
+        `;
+        });
+
+        $('#cartItemsList').html(html);
+        $('#cartItems').show();
+        $('#clearCartBtn').show();
+
+        // 更新总计
+        updateCartSummary(cart);
+
+        // 绑定事件
+        bindCartEvents();
+    }
+
+    // 显示空购物车
+    function showEmptyCart() {
+        $('#emptyCart').show();
+        $('#cartItems').hide();
+        $('#clearCartBtn').hide();
+    }
+
+    // 更新购物车摘要
+    function updateCartSummary(cart) {
+        $('#totalQuantity').text(cart.totalQuantity || 0);
+        $('#totalPrice').text((cart.totalPrice || 0).toFixed(2));
+    }
+
+    // 绑定购物车事件
+    function bindCartEvents() {
+        // 全选/反选
+        $('#selectAll').on('change', function () {
+            const isChecked = $(this).is(':checked');
+            $('.item-checkbox').prop('checked', isChecked);
+            updateSelectedSummary();
+        });
+
+        // 单个选择
+        $('.item-checkbox').on('change', function () {
+            updateSelectedSummary();
+
+            // 检查是否全选
+            const totalItems = $('.item-checkbox').length;
+            const selectedItems = $('.item-checkbox:checked').length;
+            $('#selectAll').prop('checked', totalItems === selectedItems);
+        });
+    }
+
+    // 更新已选中商品摘要
+    function updateSelectedSummary() {
+        const selectedItems = $('.item-checkbox:checked');
+        let selectedCount = 0;
+        let selectedTotal = 0;
+
+        selectedItems.each(function () {
+            const productId = $(this).val();
+            const cartItem = $(this).closest('.cart-item');
+            const quantity = parseInt(cartItem.find('input[type="number"]').val());
+            const price = parseFloat(cartItem.find('.text-danger.fw-bold').text().replace('¥', ''));
+
+            selectedCount += quantity;
+            selectedTotal += price;
+        });
+
+        $('#selectedCount').text(selectedCount);
+        $('#checkoutBtn').prop('disabled', selectedItems.length === 0);
+    }
+
+    // 更新商品数量
+    function updateQuantity(productId, newQuantity) {
+        newQuantity = parseInt(newQuantity);
+
+        if (newQuantity < 1) {
+            if (confirm('确定要从购物车中移除这个商品吗？')) {
+                removeFromCart(productId);
+            }
+            return;
+        }
+
+        // 检查库存
+        const cartItem = $(`.cart-item[data-product-id="` + productId + `"]`);
+        const maxStock = parseInt(cartItem.find('input[type="number"]').attr('max'));
+
+        if (newQuantity > maxStock) {
+            showMessage('数量不能超过库存：' + maxStock, 'warning');
+            return;
+        }
+
+        $.ajax({
+            url: '${pageContext.request.contextPath}/api/cart/update',
+            type: 'PUT',
+            contentType: 'application/json',
+            data: JSON.stringify({
+                productId: productId,
+                quantity: newQuantity
+            }),
+            success: function (response) {
+                if (response.success) {
+                    loadCart(); // 重新加载购物车
+                } else {
+                    showMessage(response.message, 'error');
+                }
+            },
+            error: function () {
+                showMessage('更新失败，请重试', 'error');
+            }
+        });
+    }
+
+    // 从购物车移除商品
+    function removeFromCart(productId) {
+        if (!confirm('确定要从购物车中移除这个商品吗？')) {
+            return;
+        }
+
+        $.ajax({
+            url: '${pageContext.request.contextPath}/api/cart/remove',
+            type: 'DELETE',
+            contentType: 'application/json',
+            data: JSON.stringify({
+                productId: productId
+            }),
+            success: function (response) {
+                if (response.success) {
+                    showMessage('商品已从购物车移除', 'success');
+                    loadCart(); // 重新加载购物车
+                    updateCartCount(); // 更新导航栏购物车数量
+                } else {
+                    showMessage(response.message, 'error');
+                }
+            },
+            error: function () {
+                showMessage('移除失败，请重试', 'error');
+            }
+        });
+    }
+
+    // 批量移除选中商品
+    function batchRemoveSelected() {
+        const selectedItems = $('.item-checkbox:checked');
+
+        if (selectedItems.length === 0) {
+            showMessage('请先选择要删除的商品', 'warning');
+            return;
+        }
+
+        if (!confirm('确定要删除选中的 ' + selectedItems.length + ' 个商品吗？')) {
+            return;
+        }
+
+        const productIds = [];
+        selectedItems.each(function () {
+            productIds.push(parseInt($(this).val()));
+        });
+
+        $.ajax({
+            url: '${pageContext.request.contextPath}/api/cart/batch-remove',
+            type: 'DELETE',
+            contentType: 'application/json',
+            data: JSON.stringify({
+                productIds: productIds
+            }),
+            success: function (response) {
+                if (response.success) {
+                    showMessage('选中商品已删除', 'success');
+                    loadCart(); // 重新加载购物车
+                    updateCartCount(); // 更新导航栏购物车数量
+                } else {
+                    showMessage(response.message, 'error');
+                }
+            },
+            error: function () {
+                showMessage('删除失败，请重试', 'error');
+            }
+        });
+    }
+
+    // 清空购物车
+    function clearCart() {
+        if (!confirm('确定要清空购物车吗？此操作不可恢复。')) {
+            return;
+        }
+
+        $.ajax({
+            url: '${pageContext.request.contextPath}/api/cart/clear',
+            type: 'DELETE',
+            success: function (response) {
+                if (response.success) {
+                    showMessage('购物车已清空', 'success');
+                    showEmptyCart();
+                    updateCartCount(); // 更新导航栏购物车数量
+                } else {
+                    showMessage(response.message, 'error');
+                }
+            },
+            error: function () {
+                showMessage('清空失败，请重试', 'error');
+            }
+        });
+    }
+
+    // 去结算
+    function checkout() {
+        const selectedItems = $('.item-checkbox:checked');
+
+        if (selectedItems.length === 0) {
+            showMessage('请先选择要结算的商品', 'warning');
+            return;
+        }
+
+        // 收集选中的商品ID
+        const productIds = [];
+        selectedItems.each(function () {
+            productIds.push(parseInt($(this).val()));
+        });
+
+        // 跳转到结算页面
+        const form = $('<form method="post" action="${pageContext.request.contextPath}/checkout">');
+        productIds.forEach(function (productId) {
+            form.append('<input type="hidden" name="productIds" value="' + productId + '">');
+        });
+        $('body').append(form);
+        form.submit();
+    }
+
+    // 加载推荐商品
+    function loadRecommendedProducts() {
+        $.ajax({
+            url: '${pageContext.request.contextPath}/api/product/hot?limit=4',
+            type: 'GET',
+            success: function (response) {
+                if (response.success && response.data.length > 0) {
+                    renderRecommendedProducts(response.data);
+                }
+            },
+            error: function () {
+                console.log('加载推荐商品失败');
+            }
+        });
+    }
+
+    // 渲染推荐商品
+    function renderRecommendedProducts(products) {
+        let html = '';
+
+        products.forEach(function (product) {
+            html += `
+            <div class="col-lg-3 col-md-6 mb-3">
+                <div class="card h-100">
+                    <img src="` + (product.imageUrl || '${pageContext.request.contextPath}/images/default-product.svg') + `"
+                         class="card-img-top" alt="` + product.name + `" style="height: 200px; object-fit: cover;"
+                         onerror="this.src='${pageContext.request.contextPath}/images/default-product.svg'; this.onerror=null;">
+                    <div class="card-body">
+                        <h6 class="card-title text-truncate">` + product.name + `</h6>
+                        <p class="card-text text-muted small text-truncate">` + (product.description || '暂无描述') + `</p>
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="text-primary fw-bold">¥` + (product.price ? product.price.toFixed(2) : '0.00') + `</span>
+                            <small class="text-muted">库存: ` + (product.stock || 0) + `</small>
+                        </div>
+                        <div class="mt-2">
+                            <button class="btn btn-primary btn-sm w-100" onclick="addToCartFromRecommend(` + product.id + `)">
+                                <i class="fas fa-cart-plus"></i> 加入购物车
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+        });
+
+        $('#recommendedProducts').html(html);
+    }
+
+    // 从推荐商品添加到购物车
+    function addToCartFromRecommend(productId) {
+        <c:choose>
+        <c:when test="${not empty sessionScope.user}">
+        $.ajax({
+            url: '${pageContext.request.contextPath}/api/cart/add',
+            type: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify({
+                productId: productId,
+                quantity: 1
+            }),
+            success: function (response) {
+                if (response.success) {
+                    showMessage('商品已添加到购物车', 'success');
+                    updateCartCount();
+                    loadCart(); // 重新加载购物车
+                } else {
+                    showMessage(response.message, 'error');
+                }
+            },
+            error: function () {
+                showMessage('添加失败，请重试', 'error');
+            }
+        });
+        </c:when>
+        <c:otherwise>
+        showMessage('请先登录', 'warning');
+        setTimeout(() => {
+            window.location.href = '${pageContext.request.contextPath}/login';
+        }, 1000);
+        </c:otherwise>
+        </c:choose>
+    }
+
+    // 显示消息
+    function showMessage(message, type = 'info') {
+        const alertDiv = document.createElement('div');
+        alertDiv.className = `alert alert-${type == 'error' ? 'danger' : type} alert-dismissible fade show position-fixed`;
+        alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
+
+        alertDiv.innerHTML = `
+        ${message}
+        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    `;
+
+        document.body.appendChild(alertDiv);
+
+        // 3秒后自动消失
+        setTimeout(() => {
+            if (alertDiv.parentNode) {
+                alertDiv.remove();
+            }
+        }, 3000);
+    }
+
+    // 更新购物车数量
+    function updateCartCount() {
+        $.get('${pageContext.request.contextPath}/api/cart/count')
+            .done(function (response) {
+                if (response.success) {
+                    const cartBadge = document.querySelector('.cart-count');
+                    if (cartBadge) {
+                        const count = response.data.count || 0;
+                        cartBadge.textContent = count;
+                        cartBadge.style.display = count > 0 ? 'inline' : 'none';
+                    }
+                }
+            });
+    }
+</script>
+
+<style>
+    .cart-item {
+        transition: background-color 0.2s ease;
+    }
+
+    .cart-item:hover {
+        background-color: #f8f9fa;
+    }
+
+    .input-group-sm .form-control {
+        font-size: 0.875rem;
+    }
+
+    .card-img-top {
+        transition: transform 0.3s ease;
+    }
+
+    .card:hover .card-img-top {
+        transform: scale(1.05);
+    }
+
+    @media (max-width: 768px) {
+        .cart-item .col-md-1,
+        .cart-item .col-md-2,
+        .cart-item .col-md-3 {
+            margin-bottom: 0.5rem;
+        }
+
+        .input-group {
+            width: 100px !important;
+        }
+    }
+</style>
+
+<%@ include file="common/footer.jsp" %>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/views/flashsale-detail.jsp b/src/main/webapp/WEB-INF/views/flashsale-detail.jsp
new file mode 100644
index 0000000..fa996a6
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/flashsale-detail.jsp
@@ -0,0 +1,873 @@
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fn" uri="http://flashsale.org/functions" %>
+
+<c:set var="pageTitle" value="秒杀详情"/>
+<%@ include file="common/header.jsp" %>
+
+<div class="container my-4">
+    <!-- 面包屑导航 -->
+    <div class="row mb-3">
+        <div class="col-12">
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item"><a href="${pageContext.request.contextPath}/">首页</a></li>
+                    <li class="breadcrumb-item"><a href="${pageContext.request.contextPath}/flashsales">秒杀活动</a>
+                    </li>
+                    <li class="breadcrumb-item active">秒杀详情</li>
+                </ol>
+            </nav>
+        </div>
+    </div>
+
+    <!-- 加载中状态 -->
+    <div id="loadingDetail" class="text-center py-5">
+        <i class="fas fa-spinner fa-spin fa-2x text-muted"></i>
+        <p class="text-muted mt-2">加载秒杀详情中...</p>
+    </div>
+
+    <!-- 错误状态 -->
+    <div id="errorDetail" class="text-center py-5" style="display: none;">
+        <i class="fas fa-exclamation-triangle fa-4x text-warning mb-3"></i>
+        <h5 class="text-muted">秒杀活动不存在或已被删除</h5>
+        <a href="${pageContext.request.contextPath}/flashsales" class="btn btn-primary mt-3">
+            <i class="fas fa-arrow-left"></i> 返回秒杀列表
+        </a>
+    </div>
+
+    <!-- 详情内容 -->
+    <div id="flashSaleDetail" style="display: none;">
+        <div class="row">
+            <!-- 左侧：商品信息 -->
+            <div class="col-lg-6">
+                <div class="card">
+                    <div class="position-relative">
+                        <img id="productImage" src="" class="card-img-top" alt=""
+                             style="height: 400px; object-fit: cover;">
+
+                        <!-- 状态标签 -->
+                        <div class="position-absolute top-0 start-0 m-3">
+                            <span id="statusBadge" class="badge fs-6"></span>
+                        </div>
+
+                        <!-- 折扣标签 -->
+                        <div id="discountBadge" class="position-absolute top-0 end-0 m-3" style="display: none;">
+                            <span class="badge bg-warning text-dark fs-6"></span>
+                        </div>
+                    </div>
+
+                    <div class="card-body">
+                        <h4 id="productName" class="card-title fw-bold"></h4>
+                        <p id="productDescription" class="card-text text-muted"></p>
+
+                        <!-- 价格信息 -->
+                        <div class="price-section mb-4">
+                            <div class="row align-items-center">
+                                <div class="col-6">
+                                    <span class="text-muted small">秒杀价</span>
+                                    <div class="text-danger fw-bold" style="font-size: 2.5rem;" id="flashPrice">¥0.00
+                                    </div>
+                                </div>
+                                <div class="col-6 text-end">
+                                    <span class="text-muted small">原价</span>
+                                    <div class="text-muted text-decoration-line-through" style="font-size: 1.5rem;"
+                                         id="originalPrice">¥0.00
+                                    </div>
+                                    <div class="text-success fw-bold" id="savings">节省 ¥0.00</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 右侧：秒杀信息 -->
+            <div class="col-lg-6">
+                <div class="card">
+                    <div class="card-header bg-danger text-white">
+                        <h5 class="mb-0">
+                            <i class="fas fa-fire"></i> 秒杀信息
+                        </h5>
+                    </div>
+
+                    <div class="card-body">
+                        <!-- 倒计时 -->
+                        <div id="countdownSection" class="text-center mb-4 p-4 bg-light rounded">
+                            <div id="countdownLabel" class="text-muted mb-2"></div>
+                            <div id="countdown" class="display-4 fw-bold text-danger"
+                                 style="font-family: 'Courier New', monospace;">
+                                --:--:--
+                            </div>
+                        </div>
+
+                        <!-- 库存信息 -->
+                        <div class="stock-section mb-4">
+                            <div class="d-flex justify-content-between align-items-center mb-2">
+                                <span class="fw-bold">剩余库存</span>
+                                <span id="stockInfo" class="fw-bold text-danger">0/0</span>
+                            </div>
+                            <div class="progress" style="height: 10px;">
+                                <div id="stockProgress" class="progress-bar bg-danger" style="width: 0%"></div>
+                            </div>
+                            <div class="d-flex justify-content-between mt-1">
+                                <small class="text-muted">已抢</small>
+                                <small class="text-muted">剩余</small>
+                            </div>
+                        </div>
+
+                        <!-- 活动时间 -->
+                        <div class="time-section mb-4">
+                            <h6 class="fw-bold mb-3">活动时间</h6>
+                            <div class="row">
+                                <div class="col-6">
+                                    <small class="text-muted">开始时间</small>
+                                    <div id="startTime" class="fw-bold">--</div>
+                                </div>
+                                <div class="col-6">
+                                    <small class="text-muted">结束时间</small>
+                                    <div id="endTime" class="fw-bold">--</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 购买限制 -->
+                        <div class="limit-section mb-4">
+                            <h6 class="fw-bold mb-2">购买限制</h6>
+                            <ul class="list-unstyled small text-muted">
+                                <li><i class="fas fa-check text-success me-2"></i>每人限购 1 件</li>
+                                <li><i class="fas fa-check text-success me-2"></i>不支持退换货</li>
+                                <li><i class="fas fa-check text-success me-2"></i>限时限量，售完即止</li>
+                            </ul>
+                        </div>
+
+                        <!-- 操作按钮 -->
+                        <div class="action-section">
+                            <div class="d-grid gap-2">
+                                <button id="actionButton" class="btn btn-lg" onclick="handleAction()">
+                                    <i class="fas fa-spinner fa-spin"></i> 加载中...
+                                </button>
+                                <button class="btn btn-outline-primary" onclick="addToCart()">
+                                    <i class="fas fa-cart-plus"></i> 加入购物车（原价）
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 分享和收藏 -->
+                <div class="card mt-3">
+                    <div class="card-body">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="text-muted">分享给好友</span>
+                            <div>
+                                <button class="btn btn-outline-secondary btn-sm me-2" onclick="shareWeChat()">
+                                    <i class="fab fa-weixin text-success"></i> 微信
+                                </button>
+                                <button class="btn btn-outline-secondary btn-sm me-2" onclick="shareWeibo()">
+                                    <i class="fab fa-weibo text-danger"></i> 微博
+                                </button>
+                                <button class="btn btn-outline-secondary btn-sm" onclick="copyLink()">
+                                    <i class="fas fa-link"></i> 复制链接
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 活动规则说明 -->
+        <div class="row mt-4">
+            <div class="col-12">
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="mb-0">
+                            <i class="fas fa-info-circle"></i> 活动规则
+                        </h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-md-6">
+                                <h6 class="fw-bold text-primary">参与条件</h6>
+                                <ul class="list-unstyled">
+                                    <li><i class="fas fa-check text-success me-2"></i>需要登录账户</li>
+                                    <li><i class="fas fa-check text-success me-2"></i>每个用户限购一件</li>
+                                    <li><i class="fas fa-check text-success me-2"></i>先到先得，售完即止</li>
+                                </ul>
+                            </div>
+                            <div class="col-md-6">
+                                <h6 class="fw-bold text-primary">注意事项</h6>
+                                <ul class="list-unstyled">
+                                    <li><i class="fas fa-exclamation-circle text-warning me-2"></i>秒杀商品不支持退换
+                                    </li>
+                                    <li><i class="fas fa-exclamation-circle text-warning me-2"></i>请在规定时间内完成支付
+                                    </li>
+                                    <li><i class="fas fa-exclamation-circle text-warning me-2"></i>恶意刷单将被系统拦截
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 推荐商品 -->
+        <div class="row mt-4">
+            <div class="col-12">
+                <h5 class="fw-bold mb-3">
+                    <i class="fas fa-heart text-danger"></i> 推荐商品
+                </h5>
+                <div id="recommendedProducts" class="row">
+                    <!-- 推荐商品将通过AJAX加载 -->
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    let flashSaleId = ${flashSaleId};
+    let flashSaleData = null;
+    let countdownInterval = null;
+
+    $(document).ready(function () {
+        loadFlashSaleDetail();
+        loadRecommendedProducts();
+    });
+
+    // 加载秒杀详情
+    function loadFlashSaleDetail() {
+        $('#loadingDetail').show();
+        $('#errorDetail').hide();
+        $('#flashSaleDetail').hide();
+
+        $.ajax({
+            url: '${pageContext.request.contextPath}/api/flashsale/' + flashSaleId,
+            type: 'GET',
+            success: function (response) {
+                if (response.success && response.data) {
+                    flashSaleData = response.data;
+                    renderFlashSaleDetail(flashSaleData);
+                    $('#flashSaleDetail').show();
+                } else {
+                    showErrorDetail();
+                }
+            },
+            error: function () {
+                showErrorDetail();
+            },
+            complete: function () {
+                $('#loadingDetail').hide();
+            }
+        });
+    }
+
+    // 显示错误状态
+    function showErrorDetail() {
+        $('#errorDetail').show();
+        $('#flashSaleDetail').hide();
+    }
+
+    // 渲染秒杀详情
+    function renderFlashSaleDetail(data) {
+        // 更新页面标题
+        document.title = data.productName + ' - 秒杀详情';
+
+        // 商品信息
+        $('#productImage').attr('src', data.productImageUrl || '${pageContext.request.contextPath}/images/default-product.svg')
+            .attr('alt', data.productName);
+        $('#productName').text(data.productName || '商品名称');
+        $('#productDescription').text(data.productDescription || '暂无描述');
+
+        // 价格信息
+        const flashPrice = data.flashPrice || 0;
+        const originalPrice = data.originalPrice || 0;
+        const savings = originalPrice - flashPrice;
+
+        $('#flashPrice').text('¥' + flashPrice.toFixed(2));
+        $('#originalPrice').text('¥' + originalPrice.toFixed(2));
+        $('#savings').text('节省 ¥' + savings.toFixed(2));
+
+        // 折扣标签
+        if (originalPrice > flashPrice && originalPrice > 0) {
+            const discountPercent = Math.round((1 - flashPrice / originalPrice) * 100);
+            $('#discountBadge span').text(discountPercent + '% OFF');
+            $('#discountBadge').show();
+        }
+
+        // 库存信息
+        const remainingStock = data.remainingStock || 0;
+        const totalStock = data.flashStock || 0;
+        const soldStock = totalStock - remainingStock;
+        const stockPercent = totalStock > 0 ? (remainingStock / totalStock * 100) : 0;
+
+        $('#stockInfo').text(remainingStock + '/' + totalStock);
+        $('#stockProgress').css('width', Math.max(5, stockPercent) + '%');
+
+        if (stockPercent > 50) {
+            $('#stockProgress').removeClass('bg-warning bg-danger').addClass('bg-success');
+        } else if (stockPercent > 20) {
+            $('#stockProgress').removeClass('bg-success bg-danger').addClass('bg-warning');
+        } else {
+            $('#stockProgress').removeClass('bg-success bg-warning').addClass('bg-danger');
+        }
+
+        // 时间信息
+        $('#startTime').text(formatDateTime(data.startTime));
+        $('#endTime').text(formatDateTime(data.endTime));
+
+        // 状态和按钮
+        updateStatusAndButton(data);
+
+        // 启动倒计时
+        startCountdown(data);
+    }
+
+    // 更新状态和按钮
+    function updateStatusAndButton(data) {
+        const now = new Date();
+        const startTime = new Date(data.startTime);
+        const endTime = new Date(data.endTime);
+        const remainingStock = data.remainingStock || 0;
+
+        let status, buttonText, buttonClass, buttonIcon, buttonDisabled = false;
+
+        if (now < startTime) {
+            // 未开始
+            status = {text: '即将开始', class: 'bg-warning text-dark', icon: 'fas fa-clock'};
+            buttonText = '活动未开始';
+            buttonClass = 'btn-outline-primary';
+            buttonIcon = 'fas fa-clock';
+            buttonDisabled = true;
+        } else if (now >= startTime && now < endTime) {
+            if (remainingStock > 0) {
+                // 进行中
+                status = {text: '正在抢购', class: 'bg-danger', icon: 'fas fa-fire'};
+                buttonText = '立即抢购';
+                buttonClass = 'btn-danger';
+                buttonIcon = 'fas fa-bolt';
+            } else {
+                // 已售罄
+                status = {text: '已售罄', class: 'bg-secondary', icon: 'fas fa-times'};
+                buttonText = '已售罄';
+                buttonClass = 'btn-secondary';
+                buttonIcon = 'fas fa-times';
+                buttonDisabled = true;
+            }
+        } else {
+            // 已结束
+            status = {text: '已结束', class: 'bg-secondary', icon: 'fas fa-check'};
+            buttonText = '活动已结束';
+            buttonClass = 'btn-secondary';
+            buttonIcon = 'fas fa-check';
+            buttonDisabled = true;
+        }
+
+        // 更新状态标签
+        $('#statusBadge').attr('class', 'badge fs-6 ' + status.class)
+            .html('<i class="' + status.icon + '"></i> ' + status.text);
+
+        // 更新按钮
+        $('#actionButton').attr('class', 'btn btn-lg ' + buttonClass)
+            .prop('disabled', buttonDisabled)
+            .html('<i class="' + buttonIcon + '"></i> ' + buttonText);
+    }
+
+    // 启动倒计时
+    function startCountdown(data) {
+        const now = new Date();
+        const startTime = new Date(data.startTime);
+        const endTime = new Date(data.endTime);
+
+        let targetTime, labelText;
+
+        if (now < startTime) {
+            targetTime = startTime.getTime();
+            labelText = '距离开始还有';
+            $('#countdown').removeClass('text-danger').addClass('text-primary');
+        } else if (now >= startTime && now < endTime) {
+            targetTime = endTime.getTime();
+            labelText = '距离结束还有';
+            $('#countdown').removeClass('text-primary').addClass('text-danger');
+        } else {
+            $('#countdownLabel').text('活动已结束');
+            $('#countdown').text('00:00:00').removeClass('text-primary text-danger').addClass('text-muted');
+            return;
+        }
+
+        $('#countdownLabel').text(labelText);
+
+        // 清除之前的定时器
+        if (countdownInterval) {
+            clearInterval(countdownInterval);
+        }
+
+        // 更新倒计时
+        function updateCountdown() {
+            const now = Date.now();
+            const timeLeft = targetTime - now;
+
+            if (timeLeft <= 0) {
+                clearInterval(countdownInterval);
+                // 重新加载页面数据
+                loadFlashSaleDetail();
+                return;
+            }
+
+            const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
+            const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
+
+            let timeString;
+            if (days > 0) {
+                timeString = days + '天 ' + hours.toString().padStart(2, '0') + ':' +
+                    minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
+            } else {
+                timeString = hours.toString().padStart(2, '0') + ':' +
+                    minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
+            }
+
+            $('#countdown').text(timeString);
+        }
+
+        updateCountdown();
+        countdownInterval = setInterval(updateCountdown, 1000);
+    }
+
+    // 处理主要操作（抢购）
+    function handleAction() {
+        if (!flashSaleData) return;
+
+        const now = new Date();
+        const startTime = new Date(flashSaleData.startTime);
+        const endTime = new Date(flashSaleData.endTime);
+        const remainingStock = flashSaleData.remainingStock || 0;
+
+        // 检查活动状态
+        if (now < startTime) {
+            showMessage('活动还未开始，请耐心等待', 'warning');
+            return;
+        }
+
+        if (now >= endTime) {
+            showMessage('活动已结束', 'warning');
+            return;
+        }
+
+        if (remainingStock <= 0) {
+            showMessage('商品已售罄', 'warning');
+            return;
+        }
+
+        // 参与秒杀
+        participateFlashSale();
+    }
+
+    // 参与秒杀（优化版）
+    function participateFlashSale() {
+        <c:choose>
+        <c:when test="${not empty sessionScope.user}">
+        // 防止重复点击
+        if (window.flashSaleInProgress) {
+            showMessage('操作进行中，请稍候...', 'warning');
+            return;
+        }
+
+        // 确认对话框
+        if (!confirm('确定要参与这个秒杀活动吗？\n\n注意：每人限购一件，确认后将立即抢购！')) {
+            return;
+        }
+
+        // 设置全局锁
+        window.flashSaleInProgress = true;
+
+        const button = $('#actionButton');
+        const originalText = button.html();
+        const originalClass = button.attr('class');
+
+        // 更新按钮状态
+        button.prop('disabled', true);
+        button.attr('class', 'btn btn-warning btn-lg');
+        button.html('<i class="fas fa-spinner fa-spin"></i> 抢购中...');
+
+        // 添加视觉反馈
+        button.css('transform', 'scale(0.95)');
+
+        const startTime = Date.now();
+
+        $.ajax({
+            url: '${pageContext.request.contextPath}/api/flashsale/participate',
+            type: 'POST',
+            contentType: 'application/json',
+            timeout: 10000, // 10秒超时
+            data: JSON.stringify({
+                flashSaleId: flashSaleId,
+                quantity: 1,
+                timestamp: startTime
+            }),
+            success: function (response) {
+                const duration = Date.now() - startTime;
+
+                if (response.success) {
+                    // 成功状态
+                    button.attr('class', 'btn btn-success btn-lg');
+                    button.html('<i class="fas fa-check"></i> 抢购成功！');
+                    button.css('transform', 'scale(1.05)');
+
+                    showMessage(`🎉 恭喜您！秒杀成功，订单已生成 (耗时: ${duration}ms)`, 'success');
+
+                    // 重新加载详情数据
+                    setTimeout(() => {
+                        loadFlashSaleDetail();
+                    }, 1000);
+
+                    // 跳转到订单页面
+                    setTimeout(() => {
+                        window.location.href = '${pageContext.request.contextPath}/orders';
+                    }, 3000);
+                } else {
+                    // 失败状态
+                    button.attr('class', 'btn btn-danger btn-lg');
+                    button.html('<i class="fas fa-times"></i> ' + (response.message || '抢购失败'));
+
+                    showMessage(response.message || '抢购失败，请重试', 'error');
+
+                    // 恢复按钮状态
+                    setTimeout(() => {
+                        restoreDetailButton(button, originalText, originalClass);
+                    }, 2000);
+                }
+            },
+            error: function (xhr, status, error) {
+                // 错误状态
+                button.attr('class', 'btn btn-danger btn-lg');
+
+                let errorMessage = '网络异常，请重试';
+                if (status === 'timeout') {
+                    errorMessage = '请求超时，请检查网络连接';
+                    button.html('<i class="fas fa-clock"></i> 请求超时');
+                } else if (xhr.status === 429) {
+                    errorMessage = '请求过于频繁，请稍后再试';
+                    button.html('<i class="fas fa-ban"></i> 请求频繁');
+                } else {
+                    button.html('<i class="fas fa-exclamation-triangle"></i> 网络异常');
+                }
+
+                showMessage(errorMessage, 'error');
+
+                // 恢复按钮状态
+                setTimeout(() => {
+                    restoreDetailButton(button, originalText, originalClass);
+                }, 3000);
+            },
+            complete: function () {
+                // 释放全局锁
+                setTimeout(() => {
+                    window.flashSaleInProgress = false;
+                }, 1000);
+            }
+        });
+        </c:when>
+        <c:otherwise>
+        showMessage('请先登录后参与秒杀', 'warning');
+        setTimeout(() => {
+            window.location.href = '${pageContext.request.contextPath}/login?returnUrl=' +
+                encodeURIComponent('/flashsale/' + flashSaleId);
+        }, 1500);
+        </c:otherwise>
+        </c:choose>
+    }
+
+    // 恢复详情页按钮状态
+    function restoreDetailButton(button, originalText, originalClass) {
+        button.prop('disabled', false);
+        button.attr('class', originalClass);
+        button.html(originalText);
+        button.css('transform', 'scale(1)');
+    }
+
+    // 加入购物车（原价）
+    function addToCart() {
+        if (!flashSaleData) return;
+
+        <c:choose>
+        <c:when test="${not empty sessionScope.user}">
+        $.ajax({
+            url: '${pageContext.request.contextPath}/api/cart/add',
+            type: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify({
+                productId: flashSaleData.productId,
+                quantity: 1
+            }),
+            success: function (response) {
+                if (response.success) {
+                    showMessage('商品已添加到购物车', 'success');
+                    updateCartCount();
+                } else {
+                    showMessage(response.message, 'error');
+                }
+            },
+            error: function () {
+                showMessage('添加失败，请重试', 'error');
+            }
+        });
+        </c:when>
+        <c:otherwise>
+        showMessage('请先登录', 'warning');
+        setTimeout(() => {
+            window.location.href = '${pageContext.request.contextPath}/login';
+        }, 1000);
+        </c:otherwise>
+        </c:choose>
+    }
+
+    // 分享功能
+    function shareWeChat() {
+        showMessage('请使用微信扫一扫功能分享', 'info');
+    }
+
+    function shareWeibo() {
+        const text = encodeURIComponent('发现一个超值秒杀：' + (flashSaleData ? flashSaleData.productName : '') + ' 限时抢购！');
+        const url = encodeURIComponent(window.location.href);
+        window.open('https://service.weibo.com/share/share.php?title=' + text + '&url=' + url, '_blank');
+    }
+
+    function copyLink() {
+        navigator.clipboard.writeText(window.location.href).then(function () {
+            showMessage('链接已复制到剪贴板', 'success');
+        }, function () {
+            showMessage('复制失败，请手动复制链接', 'error');
+        });
+    }
+
+    // 加载推荐商品
+    function loadRecommendedProducts() {
+        $.ajax({
+            url: '${pageContext.request.contextPath}/api/product/hot?limit=4',
+            type: 'GET',
+            success: function (response) {
+                if (response.success && response.data.length > 0) {
+                    renderRecommendedProducts(response.data);
+                }
+            },
+            error: function () {
+                console.log('加载推荐商品失败');
+            }
+        });
+    }
+
+    // 渲染推荐商品
+    function renderRecommendedProducts(products) {
+        let html = '';
+
+        products.forEach(function (product) {
+            html += `
+            <div class="col-lg-3 col-md-6 mb-3">
+                <div class="card h-100">
+                    <img src="` + (product.imageUrl || '${pageContext.request.contextPath}/images/default-product.svg') + `"
+                         class="card-img-top" alt="` + product.name + `" style="height: 200px; object-fit: cover;"
+                         onerror="this.src='${pageContext.request.contextPath}/images/default-product.svg'; this.onerror=null;">
+                    <div class="card-body">
+                        <h6 class="card-title text-truncate">` + product.name + `</h6>
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="text-primary fw-bold">¥` + (product.price ? product.price.toFixed(2) : '0.00') + `</span>
+                            <small class="text-muted">库存: ` + (product.stock || 0) + `</small>
+                        </div>
+                        <div class="mt-2">
+                            <button class="btn btn-primary btn-sm w-100" onclick="addProductToCart(` + product.id + `)">
+                                <i class="fas fa-cart-plus"></i> 加入购物车
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+        });
+
+        $('#recommendedProducts').html(html);
+    }
+
+    // 添加推荐商品到购物车
+    function addProductToCart(productId) {
+        <c:choose>
+        <c:when test="${not empty sessionScope.user}">
+        $.ajax({
+            url: '${pageContext.request.contextPath}/api/cart/add',
+            type: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify({
+                productId: productId,
+                quantity: 1
+            }),
+            success: function (response) {
+                if (response.success) {
+                    showMessage('商品已添加到购物车', 'success');
+                    updateCartCount();
+                } else {
+                    showMessage(response.message, 'error');
+                }
+            },
+            error: function () {
+                showMessage('添加失败，请重试', 'error');
+            }
+        });
+        </c:when>
+        <c:otherwise>
+        showMessage('请先登录', 'warning');
+        setTimeout(() => {
+            window.location.href = '${pageContext.request.contextPath}/login';
+        }, 1000);
+        </c:otherwise>
+        </c:choose>
+    }
+
+    // 更新购物车数量
+    function updateCartCount() {
+        $.get('${pageContext.request.contextPath}/api/cart/count')
+            .done(function (response) {
+                if (response.success) {
+                    const cartBadge = document.querySelector('.cart-count');
+                    if (cartBadge) {
+                        const count = response.data.count || 0;
+                        cartBadge.textContent = count;
+                        cartBadge.style.display = count > 0 ? 'inline' : 'none';
+                    }
+                }
+            });
+    }
+
+    // 格式化日期时间
+    function formatDateTime(dateTimeStr) {
+        if (!dateTimeStr) return '-';
+
+        try {
+            const date = new Date(dateTimeStr);
+            return date.toLocaleString('zh-CN', {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+        } catch (e) {
+            return dateTimeStr;
+        }
+    }
+
+    // 显示消息
+    function showMessage(message, type = 'info') {
+        const alertDiv = document.createElement('div');
+        alertDiv.className = `alert alert-${type == 'error' ? 'danger' : type} alert-dismissible fade show position-fixed`;
+        alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
+
+        alertDiv.innerHTML = `
+        ${message}
+        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    `;
+
+        document.body.appendChild(alertDiv);
+
+        // 3秒后自动消失
+        setTimeout(() => {
+            if (alertDiv.parentNode) {
+                alertDiv.remove();
+            }
+        }, 3000);
+    }
+
+    // 页面离开时清理定时器
+    $(window).on('beforeunload', function () {
+        if (countdownInterval) {
+            clearInterval(countdownInterval);
+        }
+    });
+</script>
+
+<style>
+    .card-img-top {
+        transition: transform 0.3s ease;
+    }
+
+    .card:hover .card-img-top {
+        transform: scale(1.05);
+    }
+
+    .price-section {
+        border: 2px solid #e9ecef;
+        border-radius: 0.5rem;
+        padding: 1rem;
+        background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
+    }
+
+    #countdown {
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .progress {
+        height: 10px;
+        background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    .stock-section {
+        background: #f8f9fa;
+        padding: 1rem;
+        border-radius: 0.5rem;
+    }
+
+    .time-section,
+    .limit-section {
+        background: #f8f9fa;
+        padding: 1rem;
+        border-radius: 0.5rem;
+        margin-bottom: 1rem;
+    }
+
+    @media (max-width: 768px) {
+        .price-section {
+            text-align: center;
+        }
+
+        .price-section .col-6 {
+            margin-bottom: 1rem;
+        }
+
+        #countdown {
+            font-size: 2rem !important;
+        }
+    }
+
+    /* 加载动画 */
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    .fa-spin {
+        animation: spin 1s linear infinite;
+    }
+
+    /* 消息提示动画 */
+    .alert.position-fixed {
+        animation: slideInRight 0.3s ease-out;
+    }
+
+    @keyframes slideInRight {
+        from {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+</style>
+
+<%@ include file="common/footer.jsp" %>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/views/flashsales.jsp b/src/main/webapp/WEB-INF/views/flashsales.jsp
new file mode 100644
index 0000000..4876fce
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/flashsales.jsp
@@ -0,0 +1,889 @@
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fn" uri="http://flashsale.org/functions" %>
+
+<c:set var="pageTitle" value="秒杀活动"/>
+<%@ include file="common/header.jsp" %>
+
+<div class="container my-4">
+    <!-- 页面标题 -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item"><a href="${pageContext.request.contextPath}/">首页</a></li>
+                    <li class="breadcrumb-item active">秒杀活动</li>
+                </ol>
+            </nav>
+
+            <div class="d-flex justify-content-between align-items-center">
+                <h2 class="fw-bold">
+                    <i class="fas fa-fire text-danger"></i> 秒杀活动
+                    <small class="text-muted fs-6">限时抢购，先到先得</small>
+                </h2>
+                <div class="text-end">
+                    <small class="text-muted">
+                        <i class="fas fa-clock"></i>
+                        <span id="currentTime"></span>
+                    </small>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 筛选和搜索 -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-body">
+                    <div class="row align-items-center">
+                        <div class="col-md-3">
+                            <select class="form-select" id="statusFilter" onchange="filterFlashSales()">
+                                <option value="">全部活动</option>
+                                <option value="upcoming">即将开始</option>
+                                <option value="active">进行中</option>
+                                <option value="ended">已结束</option>
+                            </select>
+                        </div>
+                        <div class="col-md-3">
+                            <select class="form-select" id="sortBy" onchange="sortFlashSales()">
+                                <option value="startTime">按开始时间</option>
+                                <option value="endTime">按结束时间</option>
+                                <option value="flashPrice">按价格</option>
+                                <option value="remainingStock">按剩余库存</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="input-group">
+                                <input type="text" class="form-control" id="searchInput" placeholder="搜索商品名称...">
+                                <button class="btn btn-outline-secondary" type="button" onclick="searchFlashSales()">
+                                    <i class="fas fa-search"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="col-md-2">
+                            <button class="btn btn-outline-primary w-100" onclick="refreshFlashSales()">
+                                <i class="fas fa-sync-alt"></i> 刷新
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 统计信息 -->
+    <div class="row mb-4">
+        <div class="col-md-3 col-sm-6 mb-3">
+            <div class="card text-center border-warning">
+                <div class="card-body">
+                    <i class="fas fa-clock fa-2x text-warning mb-2"></i>
+                    <h5 class="card-title text-warning" id="upcomingCount">0</h5>
+                    <p class="card-text">即将开始</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3 col-sm-6 mb-3">
+            <div class="card text-center border-success">
+                <div class="card-body">
+                    <i class="fas fa-fire fa-2x text-success mb-2"></i>
+                    <h5 class="card-title text-success" id="activeCount">0</h5>
+                    <p class="card-text">正在抢购</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3 col-sm-6 mb-3">
+            <div class="card text-center border-danger">
+                <div class="card-body">
+                    <i class="fas fa-bolt fa-2x text-danger mb-2"></i>
+                    <h5 class="card-title text-danger" id="hotCount">0</h5>
+                    <p class="card-text">热门活动</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3 col-sm-6 mb-3">
+            <div class="card text-center border-secondary">
+                <div class="card-body">
+                    <i class="fas fa-check fa-2x text-secondary mb-2"></i>
+                    <h5 class="card-title text-secondary" id="endedCount">0</h5>
+                    <p class="card-text">已结束</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 活动列表 -->
+    <div class="row">
+        <div class="col-12">
+            <!-- 加载中状态 -->
+            <div id="loadingFlashSales" class="text-center py-5">
+                <i class="fas fa-spinner fa-spin fa-2x text-muted"></i>
+                <p class="text-muted mt-2">加载秒杀活动中...</p>
+            </div>
+
+            <!-- 空状态 -->
+            <div id="emptyFlashSales" class="text-center py-5" style="display: none;">
+                <i class="fas fa-fire fa-4x text-muted mb-3"></i>
+                <h5 class="text-muted">暂无秒杀活动</h5>
+                <p class="text-muted">敬请期待更多精彩活动~</p>
+            </div>
+
+            <!-- 活动网格 -->
+            <div id="flashSalesGrid" class="row" style="display: none;">
+                <!-- 活动卡片将通过JavaScript动态生成 -->
+            </div>
+
+            <!-- 分页 -->
+            <nav aria-label="活动分页" class="mt-4">
+                <ul class="pagination justify-content-center" id="pagination">
+                    <!-- 分页按钮将通过JavaScript生成 -->
+                </ul>
+            </nav>
+        </div>
+    </div>
+</div>
+
+<script>
+    let currentPage = 1;
+    let pageSize = 12;
+    let totalPages = 1;
+    let currentFilters = {};
+
+    $(document).ready(function () {
+        updateCurrentTime();
+        setInterval(updateCurrentTime, 1000); // 每秒更新时间
+
+        loadFlashSales();
+
+        // 每30秒刷新一次数据
+        setInterval(function () {
+            refreshFlashSales();
+        }, 30000);
+    });
+
+    // 更新当前时间
+    function updateCurrentTime() {
+        const now = new Date();
+        const timeString = now.toLocaleString('zh-CN', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+        });
+        $('#currentTime').text(timeString);
+    }
+
+    // 加载秒杀活动
+    function loadFlashSales(page = 1) {
+        currentPage = page;
+
+        $('#loadingFlashSales').show();
+        $('#emptyFlashSales').hide();
+        $('#flashSalesGrid').hide();
+
+        // 构建查询参数
+        const queryData = {
+            page: page - 1,
+            size: pageSize,
+            sortBy: $('#sortBy').val() || 'startTime',
+            sortDirection: 'asc',
+            ...currentFilters
+        };
+
+        // 添加搜索关键词
+        const keyword = $('#searchInput').val().trim();
+        if (keyword) {
+            queryData.keyword = keyword;
+        }
+
+        $.ajax({
+            url: '${pageContext.request.contextPath}/api/flashsale/list',
+            type: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify(queryData),
+            success: function (response) {
+                if (response.success) {
+                    const flashSales = response.data.content || response.data.flashSales || [];
+                    renderFlashSales(flashSales);
+                    renderPagination(response.data.totalElements || response.data.total || 0, pageSize);
+                    updateStatistics(flashSales);
+                } else {
+                    showEmptyFlashSales();
+                    showMessage('获取秒杀活动失败: ' + response.message, 'error');
+                }
+            },
+            error: function () {
+                showEmptyFlashSales();
+                showMessage('网络请求失败，请稍后重试', 'error');
+            },
+            complete: function () {
+                $('#loadingFlashSales').hide();
+            }
+        });
+    }
+
+    // 渲染秒杀活动
+    function renderFlashSales(flashSales) {
+        if (flashSales.length === 0) {
+            showEmptyFlashSales();
+            return;
+        }
+
+        let html = '';
+        flashSales.forEach(function (flashSale) {
+            const discountPercent = flashSale.originalPrice > 0 ?
+                Math.round((1 - flashSale.flashPrice / flashSale.originalPrice) * 100) : 0;
+
+            const status = getFlashSaleStatus(flashSale);
+            const stockPercent = flashSale.flashStock > 0 ?
+                (flashSale.remainingStock / flashSale.flashStock * 100) : 0;
+
+            html += `
+            <div class="col-lg-4 col-md-6 mb-4">
+                <div class="card h-100 flashsale-card" data-flashsale-id="` + flashSale.id + `">
+                    <div class="position-relative">
+                        <img src="` + (flashSale.productImageUrl || '${pageContext.request.contextPath}/images/default-product.svg') + `"
+                             class="card-img-top" alt="` + flashSale.productName + `" style="height: 220px; object-fit: cover;"
+                             onerror="this.src='${pageContext.request.contextPath}/images/default-product.svg'; this.onerror=null;">
+                        
+                        <!-- 状态标签 -->
+                        <div class="position-absolute top-0 start-0">
+                            <span class="badge ` + status.badgeClass + ` m-2">
+                                <i class="` + status.icon + `"></i> ` + status.text + `
+                            </span>
+                        </div>
+                        
+                        <!-- 折扣标签 -->
+                        ` + (discountPercent > 0 ? `
+                        <div class="position-absolute top-0 end-0">
+                            <span class="badge bg-warning text-dark m-2">
+                                ` + discountPercent + `% OFF
+                            </span>
+                        </div>
+                        ` : '') + `
+                    </div>
+                    
+                    <div class="card-body d-flex flex-column">
+                        <h6 class="card-title text-truncate" title="` + flashSale.productName + `">
+                            ` + flashSale.productName + `
+                        </h6>
+                        
+                        <!-- 价格信息 -->
+                        <div class="price-section mb-3">
+                            <div class="d-flex align-items-center justify-content-between">
+                                <div>
+                                    <span class="text-danger fw-bold fs-4">¥` + (flashSale.flashPrice || 0).toFixed(2) + `</span>
+                                    ` + (flashSale.originalPrice > flashSale.flashPrice ? `
+                                    <small class="text-muted text-decoration-line-through ms-2">
+                                        ¥` + (flashSale.originalPrice || 0).toFixed(2) + `
+                                    </small>
+                                    ` : '') + `
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- 库存进度 -->
+                        <div class="stock-section mb-3">
+                            <div class="d-flex justify-content-between align-items-center mb-1">
+                                <small class="text-muted">剩余库存</small>
+                                <small class="text-muted">` + (flashSale.remainingStock || 0) + `/` + (flashSale.flashStock || 0) + `</small>
+                            </div>
+                            <div class="progress" style="height: 6px;">
+                                <div class="progress-bar ` + (stockPercent > 50 ? 'bg-success' : stockPercent > 20 ? 'bg-warning' : 'bg-danger') + `" 
+                                     style="width: ` + Math.max(5, stockPercent) + `%"></div>
+                            </div>
+                        </div>
+                        
+                        <!-- 时间信息 -->
+                        <div class="time-section mb-3">
+                            ` + getTimeDisplay(flashSale, status) + `
+                        </div>
+                        
+                        <!-- 操作按钮 -->
+                        <div class="mt-auto">
+                            ` + getActionButton(flashSale, status) + `
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+        });
+
+        $('#flashSalesGrid').html(html);
+        $('#flashSalesGrid').show();
+
+        // 启动倒计时
+        startCountdowns();
+    }
+
+    // 显示空状态
+    function showEmptyFlashSales() {
+        $('#emptyFlashSales').show();
+        $('#flashSalesGrid').hide();
+    }
+
+    // 获取秒杀状态
+    function getFlashSaleStatus(flashSale) {
+        const now = new Date();
+        const startTime = new Date(flashSale.startTime);
+        const endTime = new Date(flashSale.endTime);
+
+        if (now < startTime) {
+            return {
+                key: 'upcoming',
+                text: '即将开始',
+                badgeClass: 'bg-warning text-dark',
+                icon: 'fas fa-clock'
+            };
+        } else if (now >= startTime && now < endTime) {
+            if ((flashSale.remainingStock || 0) > 0) {
+                return {
+                    key: 'active',
+                    text: '正在抢购',
+                    badgeClass: 'bg-danger',
+                    icon: 'fas fa-fire'
+                };
+            } else {
+                return {
+                    key: 'soldout',
+                    text: '已售罄',
+                    badgeClass: 'bg-secondary',
+                    icon: 'fas fa-times'
+                };
+            }
+        } else {
+            return {
+                key: 'ended',
+                text: '已结束',
+                badgeClass: 'bg-secondary',
+                icon: 'fas fa-check'
+            };
+        }
+    }
+
+    // 获取时间显示
+    function getTimeDisplay(flashSale, status) {
+        if (status.key === 'upcoming') {
+            return `
+            <div class="text-center">
+                <small class="text-muted">距开始还有</small>
+                <div class="countdown text-primary fw-bold" data-target="` + new Date(flashSale.startTime).getTime() + `">
+                    计算中...
+                </div>
+            </div>
+        `;
+        } else if (status.key === 'active') {
+            return `
+            <div class="text-center">
+                <small class="text-muted">距结束还有</small>
+                <div class="countdown text-danger fw-bold" data-target="` + new Date(flashSale.endTime).getTime() + `">
+                    计算中...
+                </div>
+            </div>
+        `;
+        } else {
+            return `
+            <div class="text-center">
+                <small class="text-muted">活动时间</small>
+                <div class="small">` + formatDateTime(flashSale.startTime) + ` - ` + formatDateTime(flashSale.endTime) + `</div>
+            </div>
+        `;
+        }
+    }
+
+    // 获取操作按钮
+    function getActionButton(flashSale, status) {
+        if (status.key === 'upcoming') {
+            return `
+            <button class="btn btn-outline-primary w-100" disabled>
+                <i class="fas fa-clock"></i> 活动未开始
+            </button>
+        `;
+        } else if (status.key === 'active') {
+            return `
+            <div class="d-grid gap-2">
+                <button class="btn btn-danger btn-lg flash-sale-btn" 
+                        onclick="participateFlashSale(` + flashSale.id + `)" 
+                        data-flashsale-id="` + flashSale.id + `"
+                        onmouseover="this.style.transform='scale(1.02)'" 
+                        onmouseout="this.style.transform='scale(1)'">
+                    <i class="fas fa-bolt"></i> 立即抢购
+                </button>
+                <button class="btn btn-outline-info btn-sm" onclick="viewFlashSaleDetail(` + flashSale.id + `)">
+                    <i class="fas fa-eye"></i> 查看详情
+                </button>
+            </div>
+        `;
+        } else if (status.key === 'soldout') {
+            return `
+            <button class="btn btn-secondary w-100" disabled>
+                <i class="fas fa-times"></i> 已售罄
+            </button>
+        `;
+        } else {
+            return `
+            <button class="btn btn-outline-secondary w-100" onclick="viewFlashSaleDetail(` + flashSale.id + `)">
+                <i class="fas fa-eye"></i> 查看详情
+            </button>
+        `;
+        }
+    }
+
+    // 启动倒计时
+    function startCountdowns() {
+        $('.countdown').each(function () {
+            const element = $(this);
+            const targetTime = parseInt(element.data('target'));
+
+            if (targetTime) {
+                updateCountdown(element, targetTime);
+
+                // 每秒更新倒计时
+                element.data('interval', setInterval(function () {
+                    updateCountdown(element, targetTime);
+                }, 1000));
+            }
+        });
+    }
+
+    // 更新倒计时
+    function updateCountdown(element, targetTime) {
+        const now = Date.now();
+        const timeLeft = targetTime - now;
+
+        if (timeLeft <= 0) {
+            element.text('时间到');
+            element.removeClass('text-primary text-danger').addClass('text-muted');
+            clearInterval(element.data('interval'));
+            // 刷新页面数据
+            setTimeout(refreshFlashSales, 1000);
+            return;
+        }
+
+        const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
+        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
+
+        let timeString = '';
+        if (days > 0) {
+            timeString = days + '天 ' + hours.toString().padStart(2, '0') + ':' +
+                minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
+        } else {
+            timeString = hours.toString().padStart(2, '0') + ':' +
+                minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
+        }
+
+        element.text(timeString);
+    }
+
+    // 更新统计信息
+    function updateStatistics(flashSales) {
+        let upcoming = 0, active = 0, hot = 0, ended = 0;
+
+        flashSales.forEach(function (flashSale) {
+            const status = getFlashSaleStatus(flashSale);
+
+            switch (status.key) {
+                case 'upcoming':
+                    upcoming++;
+                    break;
+                case 'active':
+                    active++;
+                    if ((flashSale.remainingStock / flashSale.flashStock) < 0.3) {
+                        hot++; // 库存少于30%认为是热门
+                    }
+                    break;
+                case 'ended':
+                case 'soldout':
+                    ended++;
+                    break;
+            }
+        });
+
+        $('#upcomingCount').text(upcoming);
+        $('#activeCount').text(active);
+        $('#hotCount').text(hot);
+        $('#endedCount').text(ended);
+    }
+
+    // 渲染分页
+    function renderPagination(total, pageSize) {
+        totalPages = Math.ceil(total / pageSize);
+        let html = '';
+
+        if (totalPages <= 1) {
+            $('#pagination').html('');
+            return;
+        }
+
+        // 上一页
+        html += `
+        <li class="page-item ` + (currentPage === 1 ? 'disabled' : '') + `">
+            <a class="page-link" href="#" onclick="loadFlashSales(` + (currentPage - 1) + `)">上一页</a>
+        </li>
+    `;
+
+        // 页码
+        const startPage = Math.max(1, currentPage - 2);
+        const endPage = Math.min(totalPages, currentPage + 2);
+
+        for (let i = startPage; i <= endPage; i++) {
+            html += `
+            <li class="page-item ` + (i === currentPage ? 'active' : '') + `">
+                <a class="page-link" href="#" onclick="loadFlashSales(` + i + `)">` + i + `</a>
+            </li>
+        `;
+        }
+
+        // 下一页
+        html += `
+        <li class="page-item ` + (currentPage === totalPages ? 'disabled' : '') + `">
+            <a class="page-link" href="#" onclick="loadFlashSales(` + (currentPage + 1) + `)">下一页</a>
+        </li>
+    `;
+
+        $('#pagination').html(html);
+    }
+
+    // 筛选活动
+    function filterFlashSales() {
+        const status = $('#statusFilter').val();
+        currentFilters.status = status;
+        loadFlashSales(1);
+    }
+
+    // 排序活动
+    function sortFlashSales() {
+        loadFlashSales(1);
+    }
+
+    // 搜索活动
+    function searchFlashSales() {
+        loadFlashSales(1);
+    }
+
+    // 刷新活动
+    function refreshFlashSales() {
+        // 清除所有倒计时
+        $('.countdown').each(function () {
+            clearInterval($(this).data('interval'));
+        });
+
+        loadFlashSales(currentPage);
+    }
+
+    // 参与秒杀（优化版）
+    function participateFlashSale(flashSaleId) {
+        <c:choose>
+        <c:when test="${not empty sessionScope.user}">
+        // 防止重复点击
+        if (window.flashSaleInProgress) {
+            showMessage('操作进行中，请稍候...', 'warning');
+            return;
+        }
+
+        // 确认对话框
+        if (!confirm('确定要参与这个秒杀活动吗？\n\n注意：每人限购一件，确认后将立即抢购！')) {
+            return;
+        }
+
+        // 找到按钮元素
+        const button = event.target.closest('button');
+        if (!button) return;
+
+        // 设置全局锁
+        window.flashSaleInProgress = true;
+
+        // 保存原始状态
+        const originalText = button.innerHTML;
+        const originalClass = button.className;
+
+        // 更新按钮状态
+        button.disabled = true;
+        button.className = 'btn btn-warning btn-lg';
+        button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 抢购中...';
+
+        // 添加视觉反馈
+        button.style.transform = 'scale(0.95)';
+
+        const startTime = Date.now();
+
+        $.ajax({
+            url: '${pageContext.request.contextPath}/api/flashsale/participate',
+            type: 'POST',
+            contentType: 'application/json',
+            timeout: 10000, // 10秒超时
+            data: JSON.stringify({
+                flashSaleId: flashSaleId,
+                quantity: 1,
+                timestamp: startTime
+            }),
+            success: function (response) {
+                const duration = Date.now() - startTime;
+
+                if (response.success) {
+                    // 成功状态
+                    button.className = 'btn btn-success btn-lg';
+                    button.innerHTML = '<i class="fas fa-check"></i> 抢购成功！';
+                    button.style.transform = 'scale(1.05)';
+
+                    showMessage(`🎉 恭喜您！秒杀成功，订单已生成 (耗时: ${duration}ms)`, 'success');
+
+                    // 刷新页面数据
+                    setTimeout(() => {
+                        refreshFlashSales();
+                    }, 1000);
+
+                    // 跳转到订单页面
+                    setTimeout(() => {
+                        window.location.href = '${pageContext.request.contextPath}/orders';
+                    }, 3000);
+                } else {
+                    // 失败状态
+                    button.className = 'btn btn-danger btn-lg';
+                    button.innerHTML = '<i class="fas fa-times"></i> ' + (response.message || '抢购失败');
+
+                    showMessage(response.message || '抢购失败，请重试', 'error');
+
+                    // 恢复按钮状态
+                    setTimeout(() => {
+                        restoreButton(button, originalText, originalClass);
+                    }, 2000);
+                }
+            },
+            error: function (xhr, status, error) {
+                // 错误状态
+                button.className = 'btn btn-danger btn-lg';
+
+                let errorMessage = '网络异常，请重试';
+                if (status === 'timeout') {
+                    errorMessage = '请求超时，请检查网络连接';
+                    button.innerHTML = '<i class="fas fa-clock"></i> 请求超时';
+                } else if (xhr.status === 429) {
+                    errorMessage = '请求过于频繁，请稍后再试';
+                    button.innerHTML = '<i class="fas fa-ban"></i> 请求频繁';
+                } else {
+                    button.innerHTML = '<i class="fas fa-exclamation-triangle"></i> 网络异常';
+                }
+
+                showMessage(errorMessage, 'error');
+
+                // 恢复按钮状态
+                setTimeout(() => {
+                    restoreButton(button, originalText, originalClass);
+                }, 3000);
+            },
+            complete: function () {
+                // 释放全局锁
+                setTimeout(() => {
+                    window.flashSaleInProgress = false;
+                }, 1000);
+            }
+        });
+        </c:when>
+        <c:otherwise>
+        showMessage('请先登录后参与秒杀', 'warning');
+        setTimeout(() => {
+            window.location.href = '${pageContext.request.contextPath}/login?returnUrl=' +
+                encodeURIComponent('/flashsales');
+        }, 1500);
+        </c:otherwise>
+        </c:choose>
+    }
+
+    // 恢复按钮状态
+    function restoreButton(button, originalText, originalClass) {
+        button.disabled = false;
+        button.className = originalClass;
+        button.innerHTML = originalText;
+        button.style.transform = 'scale(1)';
+    }
+
+    // 查看秒杀详情
+    function viewFlashSaleDetail(flashSaleId) {
+        window.location.href = '${pageContext.request.contextPath}/flashsale/' + flashSaleId;
+    }
+
+    // 格式化日期时间
+    function formatDateTime(dateTimeStr) {
+        if (!dateTimeStr) return '-';
+
+        try {
+            const date = new Date(dateTimeStr);
+            return date.toLocaleString('zh-CN', {
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+        } catch (e) {
+            return dateTimeStr;
+        }
+    }
+
+    // 显示消息
+    function showMessage(message, type = 'info') {
+        const alertDiv = document.createElement('div');
+        alertDiv.className = `alert alert-${type == 'error' ? 'danger' : type} alert-dismissible fade show position-fixed`;
+        alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
+
+        alertDiv.innerHTML = `
+        ${message}
+        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    `;
+
+        document.body.appendChild(alertDiv);
+
+        // 3秒后自动消失
+        setTimeout(() => {
+            if (alertDiv.parentNode) {
+                alertDiv.remove();
+            }
+        }, 3000);
+    }
+</script>
+
+<style>
+    .flashsale-card {
+        transition: all 0.3s ease;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+    }
+
+    .flashsale-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+        border-color: #007bff;
+    }
+
+    .card-img-top {
+        transition: transform 0.3s ease;
+    }
+
+    .flashsale-card:hover .card-img-top {
+        transform: scale(1.05);
+    }
+
+    .progress {
+        background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    .countdown {
+        font-family: 'Courier New', monospace;
+        font-size: 1.1em;
+        letter-spacing: 1px;
+    }
+
+    .price-section .fs-4 {
+        font-size: 1.5rem !important;
+    }
+
+    .badge {
+        font-size: 0.75em;
+    }
+
+    @media (max-width: 768px) {
+        .flashsale-card:hover {
+            transform: none;
+        }
+
+        .flashsale-card:hover .card-img-top {
+            transform: none;
+        }
+
+        .price-section .fs-4 {
+            font-size: 1.25rem !important;
+        }
+    }
+
+    /* 抢购按钮样式优化 */
+    .flash-sale-btn {
+        position: relative;
+        overflow: hidden;
+        transition: all 0.3s ease;
+        font-weight: bold;
+        letter-spacing: 0.5px;
+    }
+
+    .flash-sale-btn:hover {
+        box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4);
+        transform: translateY(-2px) scale(1.02);
+    }
+
+    .flash-sale-btn:active {
+        transform: translateY(0) scale(0.98);
+    }
+
+    .flash-sale-btn::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+        transition: left 0.5s;
+    }
+
+    .flash-sale-btn:hover::before {
+        left: 100%;
+    }
+
+    /* 按钮禁用状态 */
+    .flash-sale-btn:disabled {
+        opacity: 0.8;
+        cursor: not-allowed;
+        transform: none !important;
+    }
+
+    /* 加载动画 */
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    .fa-spin {
+        animation: spin 1s linear infinite;
+    }
+
+    /* 按钮状态动画 */
+    @keyframes pulse {
+        0% {
+            box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
+        }
+        70% {
+            box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
+        }
+        100% {
+            box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
+        }
+    }
+
+    .btn-danger.flash-sale-btn:not(:disabled) {
+        animation: pulse 2s infinite;
+    }
+
+    /* 消息提示动画 */
+    .alert.position-fixed {
+        animation: slideInRight 0.3s ease-out;
+    }
+
+    @keyframes slideInRight {
+        from {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+</style>
+
+<%@ include file="common/footer.jsp" %>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/views/orders.jsp b/src/main/webapp/WEB-INF/views/orders.jsp
new file mode 100644
index 0000000..8fd45ea
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/orders.jsp
@@ -0,0 +1,631 @@
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fn" uri="http://flashsale.org/functions" %>
+
+<c:set var="pageTitle" value="我的订单"/>
+<%@ include file="common/header.jsp" %>
+
+<div class="container my-4">
+    <div class="row">
+        <div class="col-12">
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item"><a href="${pageContext.request.contextPath}/">首页</a></li>
+                    <li class="breadcrumb-item active">我的订单</li>
+                </ol>
+            </nav>
+        </div>
+    </div>
+
+    <!-- 订单筛选和搜索 -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-body">
+                    <div class="row align-items-center">
+                        <div class="col-md-3">
+                            <select class="form-select" id="statusFilter" onchange="filterOrders()">
+                                <option value="">全部订单</option>
+                                <option value="1">待支付</option>
+                                <option value="2">已支付</option>
+                                <option value="3">已发货</option>
+                                <option value="4">已完成</option>
+                                <option value="5">已取消</option>
+                            </select>
+                        </div>
+                        <div class="col-md-3">
+                            <select class="form-select" id="typeFilter" onchange="filterOrders()">
+                                <option value="">全部类型</option>
+                                <option value="1">普通订单</option>
+                                <option value="2">秒杀订单</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="input-group">
+                                <input type="text" class="form-control" id="searchInput"
+                                       placeholder="搜索订单号或商品名称...">
+                                <button class="btn btn-outline-secondary" type="button" onclick="searchOrders()">
+                                    <i class="fas fa-search"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="col-md-2">
+                            <button class="btn btn-outline-primary w-100" onclick="refreshOrders()">
+                                <i class="fas fa-sync-alt"></i> 刷新
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 订单列表 -->
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h5 class="mb-0">
+                        <i class="fas fa-list-alt text-primary"></i> 我的订单
+                    </h5>
+                </div>
+
+                <div class="card-body">
+                    <!-- 加载中状态 -->
+                    <div id="loadingOrders" class="text-center py-5">
+                        <i class="fas fa-spinner fa-spin fa-2x text-muted"></i>
+                        <p class="text-muted mt-2">加载订单中...</p>
+                    </div>
+
+                    <!-- 空订单状态 -->
+                    <div id="emptyOrders" class="text-center py-5" style="display: none;">
+                        <i class="fas fa-receipt fa-4x text-muted mb-3"></i>
+                        <h5 class="text-muted">暂无订单</h5>
+                        <p class="text-muted">快去下单购买您喜欢的商品吧~</p>
+                        <a href="${pageContext.request.contextPath}/" class="btn btn-primary">
+                            <i class="fas fa-shopping-bag"></i> 去购物
+                        </a>
+                    </div>
+
+                    <!-- 订单列表容器 -->
+                    <div id="ordersList"></div>
+
+                    <!-- 分页 -->
+                    <nav aria-label="订单分页" class="mt-4">
+                        <ul class="pagination justify-content-center" id="pagination">
+                            <!-- 分页按钮将通过JavaScript生成 -->
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 订单详情模态框 -->
+<div class="modal fade" id="orderDetailModal" tabindex="-1">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">订单详情</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <div id="orderDetailContent">
+                    <!-- 订单详情内容将动态加载 -->
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    let currentPage = 1;
+    let pageSize = 10;
+    let totalPages = 1;
+
+    $(document).ready(function () {
+        <c:choose>
+        <c:when test="${not empty sessionScope.user}">
+        loadOrders();
+        </c:when>
+        <c:otherwise>
+        $('#loadingOrders').hide();
+        showMessage('请先登录', 'warning');
+        setTimeout(() => {
+            window.location.href = '${pageContext.request.contextPath}/login';
+        }, 1000);
+        </c:otherwise>
+        </c:choose>
+    });
+
+    // 加载订单列表
+    function loadOrders(page = 1) {
+        currentPage = page;
+
+        $('#loadingOrders').show();
+        $('#emptyOrders').hide();
+        $('#ordersList').hide();
+
+        // 构建查询参数
+        const queryData = {
+            page: page - 1, // 后端使用0基索引
+            size: pageSize,
+            sortBy: 'createdAt',
+            sortDirection: 'desc'
+        };
+
+        // 添加状态筛选
+        const statusFilter = $('#statusFilter').val();
+        if (statusFilter) {
+            queryData.status = parseInt(statusFilter);
+        }
+
+        // 添加类型筛选
+        const typeFilter = $('#typeFilter').val();
+        if (typeFilter) {
+            queryData.orderType = parseInt(typeFilter);
+        }
+
+        // 添加搜索关键词
+        const keyword = $('#searchInput').val().trim();
+        if (keyword) {
+            queryData.keyword = keyword;
+        }
+
+        $.ajax({
+            url: '${pageContext.request.contextPath}/api/order/my-orders',
+            type: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify(queryData),
+            success: function (response) {
+                if (response.success) {
+                    renderOrders(response.data.content || response.data.orders || []);
+                    renderPagination(response.data.totalElements || response.data.total || 0, pageSize);
+                } else {
+                    showEmptyOrders();
+                    showMessage('获取订单数据失败: ' + response.message, 'error');
+                }
+            },
+            error: function () {
+                showEmptyOrders();
+                showMessage('网络请求失败，请稍后重试', 'error');
+            },
+            complete: function () {
+                $('#loadingOrders').hide();
+            }
+        });
+    }
+
+    // 渲染订单列表
+    function renderOrders(orders) {
+        if (orders.length === 0) {
+            showEmptyOrders();
+            return;
+        }
+
+        let html = '';
+        orders.forEach(function (order) {
+            html += `
+            <div class="order-item border rounded mb-3 p-3">
+                <div class="row align-items-center">
+                    <div class="col-md-2">
+                        <div>
+                            <small class="text-muted">订单号</small>
+                            <div class="fw-bold text-truncate" style="font-size: 0.9rem;">#` + order.id + `</div>
+                        </div>
+                    </div>
+                    <div class="col-md-2">
+                        <div>
+                            <small class="text-muted">商品</small>
+                            <div class="fw-bold text-truncate">` + (order.productName || '商品信息') + `</div>
+                        </div>
+                    </div>
+                    <div class="col-md-1">
+                        <div>
+                            <small class="text-muted">数量</small>
+                            <div class="fw-bold">` + order.quantity + `</div>
+                        </div>
+                    </div>
+                    <div class="col-md-2">
+                        <div>
+                            <small class="text-muted">总价</small>
+                            <div class="fw-bold text-danger">¥` + (order.totalPrice ? order.totalPrice.toFixed(2) : '0.00') + `</div>
+                        </div>
+                    </div>
+                    <div class="col-md-2">
+                        <div>
+                            <small class="text-muted">状态</small>
+                            <div>
+                                <span class="badge ` + getStatusBadgeClass(order.status) + `">
+                                    ` + getStatusText(order.status) + `
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-1">
+                        <div>
+                            <small class="text-muted">类型</small>
+                            <div>
+                                <span class="badge ` + getTypeBadgeClass(order.orderType) + `">
+                                    ` + getTypeText(order.orderType) + `
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-2">
+                        <div class="btn-group btn-group-sm d-flex">
+                            <button class="btn btn-outline-primary" onclick="viewOrderDetail(` + order.id + `)" title="查看详情">
+                                <i class="fas fa-eye"></i>
+                            </button>
+                            ` + getOrderActionButtons(order) + `
+                        </div>
+                    </div>
+                </div>
+                <div class="row mt-2">
+                    <div class="col-12">
+                        <small class="text-muted">
+                            下单时间：` + formatDateTime(order.createdAt) + `
+                            ` + (order.orderType == 2 ? ' | <i class="fas fa-bolt text-danger"></i> 秒杀订单' : '') + `
+                        </small>
+                    </div>
+                </div>
+            </div>
+        `;
+        });
+
+        $('#ordersList').html(html);
+        $('#ordersList').show();
+    }
+
+    // 显示空订单状态
+    function showEmptyOrders() {
+        $('#emptyOrders').show();
+        $('#ordersList').hide();
+    }
+
+    // 获取状态徽章样式
+    function getStatusBadgeClass(status) {
+        switch (status) {
+            case 1:
+                return 'bg-warning text-dark'; // 待支付
+            case 2:
+                return 'bg-info'; // 已支付
+            case 3:
+                return 'bg-primary'; // 已发货
+            case 4:
+                return 'bg-success'; // 已完成
+            case 5:
+                return 'bg-secondary'; // 已取消
+            default:
+                return 'bg-secondary';
+        }
+    }
+
+    // 获取状态文本
+    function getStatusText(status) {
+        switch (status) {
+            case 1:
+                return '待支付';
+            case 2:
+                return '已支付';
+            case 3:
+                return '已发货';
+            case 4:
+                return '已完成';
+            case 5:
+                return '已取消';
+            default:
+                return '未知';
+        }
+    }
+
+    // 获取类型徽章样式
+    function getTypeBadgeClass(orderType) {
+        switch (orderType) {
+            case 1:
+                return 'bg-light text-dark'; // 普通订单
+            case 2:
+                return 'bg-danger'; // 秒杀订单
+            default:
+                return 'bg-light text-dark';
+        }
+    }
+
+    // 获取类型文本
+    function getTypeText(orderType) {
+        switch (orderType) {
+            case 1:
+                return '普通';
+            case 2:
+                return '秒杀';
+            default:
+                return '普通';
+        }
+    }
+
+    // 获取订单操作按钮
+    function getOrderActionButtons(order) {
+        let buttons = '';
+
+        switch (order.status) {
+            case 1: // 待支付
+                buttons += `<button class="btn btn-outline-success" onclick="payOrder(` + order.id + `)" title="去支付">
+                            <i class="fas fa-credit-card"></i>
+                        </button>`;
+                buttons += `<button class="btn btn-outline-danger" onclick="cancelOrder(` + order.id + `)" title="取消订单">
+                            <i class="fas fa-times"></i>
+                        </button>`;
+                break;
+            case 2: // 已支付
+                buttons += `<button class="btn btn-outline-info" onclick="remindShipping(` + order.id + `)" title="提醒发货">
+                            <i class="fas fa-truck"></i>
+                        </button>`;
+                break;
+            case 3: // 已发货
+                buttons += `<button class="btn btn-outline-success" onclick="confirmReceipt(` + order.id + `)" title="确认收货">
+                            <i class="fas fa-check"></i>
+                        </button>`;
+                break;
+            case 4: // 已完成
+                buttons += `<button class="btn btn-outline-warning" onclick="reviewOrder(` + order.id + `)" title="评价">
+                            <i class="fas fa-star"></i>
+                        </button>`;
+                break;
+            case 5: // 已取消
+                // 已取消的订单不显示操作按钮
+                break;
+        }
+
+        return buttons;
+    }
+
+    // 渲染分页
+    function renderPagination(total, pageSize) {
+        totalPages = Math.ceil(total / pageSize);
+        let html = '';
+
+        if (totalPages <= 1) {
+            $('#pagination').html('');
+            return;
+        }
+
+        // 上一页
+        html += `
+        <li class="page-item ` + (currentPage === 1 ? 'disabled' : '') + `">
+            <a class="page-link" href="#" onclick="loadOrders(` + (currentPage - 1) + `)">上一页</a>
+        </li>
+    `;
+
+        // 页码
+        for (let i = 1; i <= totalPages; i++) {
+            html += `
+            <li class="page-item ` + (i === currentPage ? 'active' : '') + `">
+                <a class="page-link" href="#" onclick="loadOrders(` + i + `)">` + i + `</a>
+            </li>
+        `;
+        }
+
+        // 下一页
+        html += `
+        <li class="page-item ` + (currentPage === totalPages ? 'disabled' : '') + `">
+            <a class="page-link" href="#" onclick="loadOrders(` + (currentPage + 1) + `)">下一页</a>
+        </li>
+    `;
+
+        $('#pagination').html(html);
+    }
+
+    // 筛选订单
+    function filterOrders() {
+        loadOrders(1);
+    }
+
+    // 搜索订单
+    function searchOrders() {
+        loadOrders(1);
+    }
+
+    // 刷新订单
+    function refreshOrders() {
+        loadOrders(currentPage);
+    }
+
+    // 查看订单详情
+    function viewOrderDetail(orderId) {
+        $.ajax({
+            url: '${pageContext.request.contextPath}/api/order/' + orderId,
+            type: 'GET',
+            success: function (response) {
+                if (response.success) {
+                    renderOrderDetail(response.data);
+                    $('#orderDetailModal').modal('show');
+                } else {
+                    showMessage('获取订单详情失败: ' + response.message, 'error');
+                }
+            },
+            error: function () {
+                showMessage('获取订单详情失败，请稍后重试', 'error');
+            }
+        });
+    }
+
+    // 渲染订单详情
+    function renderOrderDetail(order) {
+        const html = `
+        <div class="row">
+            <div class="col-md-6">
+                <h6>基本信息</h6>
+                <table class="table table-sm">
+                    <tr><td>订单号：</td><td>#` + order.id + `</td></tr>
+                    <tr><td>订单类型：</td><td><span class="badge ` + getTypeBadgeClass(order.orderType) + `">` + getTypeText(order.orderType) + `</span></td></tr>
+                    <tr><td>订单状态：</td><td><span class="badge ` + getStatusBadgeClass(order.status) + `">` + getStatusText(order.status) + `</span></td></tr>
+                    <tr><td>创建时间：</td><td>` + formatDateTime(order.createdAt) + `</td></tr>
+                    <tr><td>更新时间：</td><td>` + formatDateTime(order.updatedAt) + `</td></tr>
+                </table>
+            </div>
+            <div class="col-md-6">
+                <h6>商品信息</h6>
+                <table class="table table-sm">
+                    <tr><td>商品名称：</td><td>` + (order.productName || '商品信息') + `</td></tr>
+                    <tr><td>购买数量：</td><td>` + order.quantity + ` 件</td></tr>
+                    <tr><td>商品单价：</td><td>¥` + (order.totalPrice / order.quantity).toFixed(2) + `</td></tr>
+                    <tr><td>订单总价：</td><td class="text-danger fw-bold">¥` + (order.totalPrice ? order.totalPrice.toFixed(2) : '0.00') + `</td></tr>
+                </table>
+            </div>
+        </div>
+        
+        ` + (order.remark ? `
+        <div class="row mt-3">
+            <div class="col-12">
+                <h6>订单备注</h6>
+                <p class="text-muted">` + order.remark + `</p>
+            </div>
+        </div>
+        ` : '') + `
+    `;
+
+        $('#orderDetailContent').html(html);
+    }
+
+    // 支付订单
+    function payOrder(orderId) {
+        if (confirm('确定要支付这个订单吗？')) {
+            // 这里可以集成真实的支付接口
+            showMessage('支付功能开发中...', 'info');
+        }
+    }
+
+    // 取消订单
+    function cancelOrder(orderId) {
+        if (confirm('确定要取消这个订单吗？')) {
+            $.ajax({
+                url: '${pageContext.request.contextPath}/api/order/' + orderId + '/cancel',
+                type: 'POST',
+                success: function (response) {
+                    if (response.success) {
+                        showMessage('订单已取消', 'success');
+                        refreshOrders();
+                    } else {
+                        showMessage('取消订单失败: ' + response.message, 'error');
+                    }
+                },
+                error: function () {
+                    showMessage('取消订单失败，请稍后重试', 'error');
+                }
+            });
+        }
+    }
+
+    // 提醒发货
+    function remindShipping(orderId) {
+        showMessage('已提醒商家发货', 'success');
+    }
+
+    // 确认收货
+    function confirmReceipt(orderId) {
+        if (confirm('确定已收到商品吗？确认后订单将完成。')) {
+            $.ajax({
+                url: '${pageContext.request.contextPath}/api/order/' + orderId + '/confirm',
+                type: 'POST',
+                success: function (response) {
+                    if (response.success) {
+                        showMessage('确认收货成功，订单已完成', 'success');
+                        refreshOrders();
+                    } else {
+                        showMessage('确认收货失败: ' + response.message, 'error');
+                    }
+                },
+                error: function () {
+                    showMessage('确认收货失败，请稍后重试', 'error');
+                }
+            });
+        }
+    }
+
+    // 评价订单
+    function reviewOrder(orderId) {
+        showMessage('评价功能开发中...', 'info');
+    }
+
+    // 格式化日期时间
+    function formatDateTime(dateTimeStr) {
+        if (!dateTimeStr) return '-';
+
+        try {
+            const date = new Date(dateTimeStr);
+            return date.toLocaleString('zh-CN', {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit'
+            });
+        } catch (e) {
+            return dateTimeStr;
+        }
+    }
+
+    // 显示消息
+    function showMessage(message, type = 'info') {
+        const alertDiv = document.createElement('div');
+        alertDiv.className = `alert alert-${type == 'error' ? 'danger' : type} alert-dismissible fade show position-fixed`;
+        alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
+
+        alertDiv.innerHTML = `
+        ${message}
+        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    `;
+
+        document.body.appendChild(alertDiv);
+
+        // 3秒后自动消失
+        setTimeout(() => {
+            if (alertDiv.parentNode) {
+                alertDiv.remove();
+            }
+        }, 3000);
+    }
+</script>
+
+<style>
+    .order-item {
+        transition: box-shadow 0.2s ease;
+    }
+
+    .order-item:hover {
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .text-truncate {
+        max-width: 150px;
+    }
+
+    @media (max-width: 768px) {
+        .order-item .col-md-1,
+        .order-item .col-md-2 {
+            margin-bottom: 0.5rem;
+        }
+
+        .btn-group-sm .btn {
+            font-size: 0.75rem;
+            padding: 0.25rem 0.5rem;
+        }
+    }
+
+    .table td {
+        border: none;
+        padding: 0.25rem 0.5rem;
+    }
+
+    .table td:first-child {
+        font-weight: 500;
+        width: 30%;
+    }
+</style>
+
+<%@ include file="common/footer.jsp" %>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/views/products.jsp b/src/main/webapp/WEB-INF/views/products.jsp
new file mode 100644
index 0000000..6133448
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/products.jsp
@@ -0,0 +1,501 @@
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fn" uri="http://flashsale.org/functions" %>
+
+<c:set var="pageTitle" value="商品列表"/>
+<%@ include file="common/header.jsp" %>
+
+<style>
+    .product-card {
+        transition: all 0.3s ease;
+        border: none;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .product-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    }
+
+    .product-image {
+        height: 200px;
+        object-fit: cover;
+        border-radius: 8px 8px 0 0;
+    }
+
+    .price {
+        color: #e74c3c;
+        font-weight: bold;
+        font-size: 1.2rem;
+    }
+
+    .original-price {
+        color: #999;
+        text-decoration: line-through;
+        font-size: 0.9rem;
+    }
+
+    .stock-badge {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background: rgba(0, 0, 0, 0.7);
+        color: white;
+        padding: 2px 8px;
+        border-radius: 12px;
+        font-size: 0.8rem;
+    }
+
+    .search-filters {
+        background: #f8f9fa;
+        padding: 20px;
+        border-radius: 10px;
+        margin-bottom: 30px;
+    }
+
+    .loading-spinner {
+        display: none;
+        text-align: center;
+        padding: 40px;
+    }
+</style>
+
+<div class="container my-4">
+    <!-- 页面标题 -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <h1 class="page-title">
+                <i class="fas fa-shopping-bag text-primary"></i>
+                商品列表
+            </h1>
+            <p class="text-muted">发现更多优质商品</p>
+        </div>
+    </div>
+
+    <!-- 搜索和筛选 -->
+    <div class="search-filters">
+        <div class="row g-3">
+            <div class="col-md-4">
+                <div class="input-group">
+                    <span class="input-group-text"><i class="fas fa-search"></i></span>
+                    <input type="text" class="form-control" id="searchKeyword" placeholder="搜索商品名称...">
+                </div>
+            </div>
+            <div class="col-md-3">
+                <select class="form-select" id="categoryFilter">
+                    <option value="">全部分类</option>
+                    <option value="electronics">数码电子</option>
+                    <option value="clothing">服装鞋包</option>
+                    <option value="home">家居用品</option>
+                    <option value="books">图书文具</option>
+                    <option value="sports">运动户外</option>
+                </select>
+            </div>
+            <div class="col-md-3">
+                <select class="form-select" id="sortBy">
+                    <option value="id,desc">最新上架</option>
+                    <option value="price,asc">价格从低到高</option>
+                    <option value="price,desc">价格从高到低</option>
+                    <option value="sales,desc">销量最高</option>
+                </select>
+            </div>
+            <div class="col-md-2">
+                <button class="btn btn-primary w-100" onclick="searchProducts()">
+                    <i class="fas fa-search"></i> 搜索
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 加载动画 -->
+    <div class="loading-spinner" id="loadingSpinner">
+        <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">加载中...</span>
+        </div>
+        <p class="mt-2">正在加载商品...</p>
+    </div>
+
+    <!-- 商品列表 -->
+    <div class="row" id="productList">
+        <!-- 商品卡片将通过JavaScript动态加载 -->
+    </div>
+
+    <!-- 分页 -->
+    <nav aria-label="商品分页" class="mt-4">
+        <ul class="pagination justify-content-center" id="pagination">
+            <!-- 分页按钮将通过JavaScript动态生成 -->
+        </ul>
+    </nav>
+
+    <!-- 空状态 -->
+    <div class="text-center py-5" id="emptyState" style="display: none;">
+        <i class="fas fa-shopping-basket fa-4x text-muted mb-3"></i>
+        <h4 class="text-muted">暂无商品</h4>
+        <p class="text-muted">请尝试调整搜索条件</p>
+    </div>
+</div>
+
+<!-- 商品详情模态框 -->
+<div class="modal fade" id="productModal" tabindex="-1">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">商品详情</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body" id="productModalBody">
+                <!-- 商品详情内容 -->
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
+                <button type="button" class="btn btn-primary" id="addToCartBtn">
+                    <i class="fas fa-cart-plus"></i> 加入购物车
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    let currentPage = 0;
+    let currentSize = 12;
+    let totalPages = 0;
+    let currentProductId = null;
+
+    // 页面加载完成后获取商品列表
+    $(document).ready(function () {
+        loadProducts();
+
+        // 搜索框回车事件
+        $('#searchKeyword').on('keypress', function (e) {
+            if (e.which === 13) {
+                searchProducts();
+            }
+        });
+    });
+
+    // 加载商品列表
+    function loadProducts(page = 0) {
+        currentPage = page;
+        showLoading(true);
+
+        const keyword = $('#searchKeyword').val().trim();
+        const category = $('#categoryFilter').val();
+        const sortValue = $('#sortBy').val().split(',');
+
+        const params = new URLSearchParams({
+            page: page,
+            size: currentSize
+        });
+
+        if (keyword) params.append('keyword', keyword);
+        if (category) params.append('category', category);
+        if (sortValue.length === 2) {
+            params.append('sortBy', sortValue[0]);
+            params.append('sortDirection', sortValue[1]);
+        }
+
+        $.get('/api/product/list?' + params.toString())
+            .done(function (response) {
+                if (response.success) {
+                    displayProducts(response.data.content);
+                    updatePagination(response.data);
+                } else {
+                    showError('获取商品列表失败：' + response.message);
+                }
+            })
+            .fail(function () {
+                showError('网络错误，请稍后重试');
+            })
+            .always(function () {
+                showLoading(false);
+            });
+    }
+
+    // 搜索商品
+    function searchProducts() {
+        loadProducts(0);
+    }
+
+    // 显示商品列表
+    function displayProducts(products) {
+        const productList = $('#productList');
+        productList.empty();
+
+        if (!products || products.length === 0) {
+            $('#emptyState').show();
+            return;
+        }
+
+        $('#emptyState').hide();
+
+        products.forEach(function (product) {
+            const productCard = createProductCard(product);
+            productList.append(productCard);
+        });
+    }
+
+    // 创建商品卡片
+    function createProductCard(product) {
+        const stockBadge = product.stock > 0 ?
+            `<span class="stock-badge bg-success">库存 ${product.stock}</span>` :
+            `<span class="stock-badge bg-danger">无库存</span>`;
+
+        const originalPrice = product.originalPrice && product.originalPrice > product.price ?
+            `<span class="original-price">¥${product.originalPrice}</span>` : '';
+
+        const addToCartBtn = product.stock > 0 ?
+            `<button class="btn btn-primary btn-sm" onclick="addToCart(${product.id})">
+            <i class="fas fa-cart-plus"></i> 加入购物车
+        </button>` :
+            `<button class="btn btn-secondary btn-sm" disabled>
+            <i class="fas fa-ban"></i> 暂时缺货
+        </button>`;
+
+        return `
+        <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
+            <div class="card product-card h-100">
+                <div class="position-relative">
+                    <img src="${product.imageUrl || '/static/images/default-product.svg'}" 
+                         class="card-img-top product-image" alt="${product.name}">
+                    ${stockBadge}
+                </div>
+                <div class="card-body d-flex flex-column">
+                    <h6 class="card-title" title="${product.name}">
+                        ${product.name.length > 30 ? product.name.substring(0, 30) + '...' : product.name}
+                    </h6>
+                    <p class="card-text text-muted small flex-grow-1">
+                        ${product.description ? 
+                          (product.description.length > 50 ? product.description.substring(0, 50) + '...' : product.description) : 
+                          '暂无描述'}
+                    </p>
+                    <div class="price-section mb-2">
+                        <span class="price">¥${product.price}</span>
+                        ${originalPrice}
+                    </div>
+                    <div class="d-flex justify-content-between align-items-center">
+                        ${addToCartBtn}
+                        <button class="btn btn-outline-secondary btn-sm" onclick="viewProductDetail(${product.id})">
+                            <i class="fas fa-eye"></i> 详情
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+    }
+
+    // 更新分页
+    function updatePagination(pageData) {
+        totalPages = pageData.totalPages;
+        const pagination = $('#pagination');
+        pagination.empty();
+
+        if (totalPages <= 1) return;
+
+        // 上一页
+        const prevDisabled = currentPage === 0 ? 'disabled' : '';
+        pagination.append(`
+        <li class="page-item ${prevDisabled}">
+            <a class="page-link" onclick="loadProducts(${currentPage - 1})" href="javascript:void(0)">
+                <i class="fas fa-chevron-left"></i>
+            </a>
+        </li>
+    `);
+
+        // 页码
+        let startPage = Math.max(0, currentPage - 2);
+        let endPage = Math.min(totalPages - 1, currentPage + 2);
+
+        if (startPage > 0) {
+            pagination.append(`<li class="page-item"><a class="page-link" onclick="loadProducts(0)" href="javascript:void(0)">1</a></li>`);
+            if (startPage > 1) {
+                pagination.append(`<li class="page-item disabled"><span class="page-link">...</span></li>`);
+            }
+        }
+
+        for (let i = startPage; i <= endPage; i++) {
+            const active = i === currentPage ? 'active' : '';
+            pagination.append(`
+            <li class="page-item ${active}">
+                <a class="page-link" onclick="loadProducts(${i})" href="javascript:void(0)">${i + 1}</a>
+            </li>
+        `);
+        }
+
+        if (endPage < totalPages - 1) {
+            if (endPage < totalPages - 2) {
+                pagination.append(`<li class="page-item disabled"><span class="page-link">...</span></li>`);
+            }
+            pagination.append(`<li class="page-item"><a class="page-link" onclick="loadProducts(${totalPages - 1})" href="javascript:void(0)">${totalPages}</a></li>`);
+        }
+
+        // 下一页
+        const nextDisabled = currentPage === totalPages - 1 ? 'disabled' : '';
+        pagination.append(`
+        <li class="page-item ${nextDisabled}">
+            <a class="page-link" onclick="loadProducts(${currentPage + 1})" href="javascript:void(0)">
+                <i class="fas fa-chevron-right"></i>
+            </a>
+        </li>
+    `);
+    }
+
+    // 查看商品详情
+    function viewProductDetail(productId) {
+        currentProductId = productId;
+
+        $.get(`/api/product/${productId}`)
+            .done(function (response) {
+                if (response.success) {
+                    displayProductDetail(response.data);
+                    $('#productModal').modal('show');
+                } else {
+                    showError('获取商品详情失败：' + response.message);
+                }
+            })
+            .fail(function () {
+                showError('网络错误，请稍后重试');
+            });
+    }
+
+    // 显示商品详情
+    function displayProductDetail(product) {
+        const modalBody = $('#productModalBody');
+        modalBody.html(`
+        <div class="row">
+            <div class="col-md-6">
+                <img src="${product.imageUrl || '/static/images/default-product.svg'}" 
+                     class="img-fluid rounded" alt="${product.name}">
+            </div>
+            <div class="col-md-6">
+                <h4>${product.name}</h4>
+                <p class="text-muted">${product.description || '暂无详细描述'}</p>
+                <div class="mb-3">
+                    <span class="price h4">¥${product.price}</span>
+                    ${product.originalPrice && product.originalPrice > product.price ? 
+                      '<span class="original-price ms-2">¥' + product.originalPrice + '</span>' : ''}
+                </div>
+                <div class="mb-3">
+                    <span class="badge ${product.stock > 0 ? 'bg-success' : 'bg-danger'}">
+                        <c:choose>
+                            <c:when test="${product.stock > 0}">
+                                库存 ${product.stock}
+                            </c:when>
+                            <c:otherwise>
+                                暂时缺货
+                            </c:otherwise>
+                        </c:choose>
+                    </span>
+                </div>
+                <div class="mb-3">
+                    <strong>商品类别：</strong> ${product.category || '未分类'}
+                </div>
+                <div class="mb-3">
+                    <strong>商品状态：</strong> 
+                        <span class="badge">
+                            <c:choose>
+                                <c:when test="${product.status == 1}">
+                                    <span class="bg-success">上架中</span>
+                                </c:when>
+                                <c:otherwise>
+                                    <span class="bg-secondary">已下架</span>
+                                </c:otherwise>
+                            </c:choose>
+                        </span>
+                </div>
+            </div>
+        </div>
+    `);
+
+        // 更新加入购物车按钮状态
+        const addToCartBtn = $('#addToCartBtn');
+        if (product.stock > 0 && product.status === 1) {
+            addToCartBtn.prop('disabled', false).html('<i class="fas fa-cart-plus"></i> 加入购物车');
+        } else {
+            addToCartBtn.prop('disabled', true).html('<i class="fas fa-ban"></i> 暂时无法购买');
+        }
+    }
+
+    // 添加到购物车
+    function addToCart(productId) {
+        if (!isUserLoggedIn()) {
+            showLoginPrompt();
+            return;
+        }
+
+        const data = {
+            productId: productId,
+            quantity: 1
+        };
+
+        $.ajax({
+            url: '/api/cart/add',
+            method: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify(data)
+        })
+            .done(function (response) {
+                if (response.success) {
+                    showSuccess('商品已添加到购物车');
+                    updateCartCount();
+                    $('#productModal').modal('hide');
+                } else {
+                    showError('添加失败：' + response.message);
+                }
+            })
+            .fail(function () {
+                showError('网络错误，请稍后重试');
+            });
+    }
+
+    // 显示加载状态
+    function showLoading(show) {
+        if (show) {
+            $('#loadingSpinner').show();
+            $('#productList').hide();
+            $('#emptyState').hide();
+        } else {
+            $('#loadingSpinner').hide();
+            $('#productList').show();
+        }
+    }
+
+    // 检查用户是否登录
+    function isUserLoggedIn() {
+        // 这里需要根据实际的登录状态检查逻辑来实现
+        return sessionStorage.getItem('userToken') ||
+            document.cookie.includes('JSESSIONID');
+    }
+
+    // 显示登录提示
+    function showLoginPrompt() {
+        if (confirm('请先登录后再进行购物，是否前往登录页面？')) {
+            window.location.href = '/login?returnUrl=' + encodeURIComponent(window.location.pathname);
+        }
+    }
+
+    // 更新购物车数量
+    function updateCartCount() {
+        if (!isUserLoggedIn()) return;
+
+        $.get('/api/cart/count')
+            .done(function (response) {
+                if (response.success && response.data.count > 0) {
+                    $('.cart-count').text(response.data.count).show();
+                }
+            });
+    }
+
+    // 错误提示
+    function showError(message) {
+        alert('错误：' + message);
+    }
+
+    // 成功提示
+    function showSuccess(message) {
+        alert('成功：' + message);
+    }
+</script>
+
+<%@ include file="common/footer.jsp" %>
\ No newline at end of file