From c52d9c52e33085498adce16ce8b2f9f41b661e45 Mon Sep 17 00:00:00 2001
From: YoVinchen <gzh298255@gmail.com>
Date: Tue, 10 Mar 2026 23:21:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=89=8D=E7=AB=AF=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=92=8C=E7=BB=84=E4=BB=B6=E5=85=A8=E9=9D=A2=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化通用组件：导航栏、页脚、图片上传、搜索
- 完善业务组件：商品卡片、秒杀卡片
- 更新用户端页面：首页、商品、秒杀、订单、购物车、个人中心
- 新增用户收藏页面
- 完善管理后台：仪表盘、商品/订单/用户/秒杀管理
- 新增管理后台：收藏管理、评价管理、系统监控页面
---
 .../src/components/business/FlashSaleCard.vue | 119 +---
 .../src/components/business/ProductCard.vue   |  59 +-
 .../src/components/common/AppFooter.vue       |   2 +-
 .../src/components/common/AppHeader.vue       |  36 +-
 .../src/components/common/ImageUpload.vue     |  13 +-
 .../src/components/common/SearchComponent.vue |  66 ++-
 .../src/layouts/AdminLayout.vue               |  22 +-
 .../src/pages/admin/dashboard.vue             | 480 +++++++--------
 .../src/pages/admin/favorites.vue             | 106 ++++
 .../src/pages/admin/flashsales.vue            | 545 +++++++++++++++++-
 .../src/pages/admin/monitor.vue               | 514 +++++++++++++++++
 .../src/pages/admin/orders.vue                | 423 +++++++++++++-
 .../src/pages/admin/products.vue              | 510 +++++++++++++++-
 .../src/pages/admin/reviews.vue               | 123 ++++
 flash-sale-frontend/src/pages/admin/users.vue | 292 +++++++++-
 flash-sale-frontend/src/pages/cart/index.vue  |  37 +-
 .../src/pages/flashsale/detail.vue            | 212 ++-----
 flash-sale-frontend/src/pages/home/index.vue  |  13 +-
 .../src/pages/order/detail.vue                | 301 +++-------
 flash-sale-frontend/src/pages/order/index.vue | 354 +++---------
 .../src/pages/product/detail.vue              |  81 ++-
 .../src/pages/product/index.vue               |   2 +-
 .../src/pages/user/favorites.vue              | 106 ++++
 flash-sale-frontend/src/pages/user/login.vue  |  13 +-
 .../src/pages/user/profile.vue                | 447 +++++++-------
 25 files changed, 3409 insertions(+), 1467 deletions(-)
 create mode 100644 flash-sale-frontend/src/pages/admin/favorites.vue
 create mode 100644 flash-sale-frontend/src/pages/admin/monitor.vue
 create mode 100644 flash-sale-frontend/src/pages/admin/reviews.vue
 create mode 100644 flash-sale-frontend/src/pages/user/favorites.vue

diff --git a/flash-sale-frontend/src/components/business/FlashSaleCard.vue b/flash-sale-frontend/src/components/business/FlashSaleCard.vue
index 7838cec..fb299a8 100644
--- a/flash-sale-frontend/src/components/business/FlashSaleCard.vue
+++ b/flash-sale-frontend/src/components/business/FlashSaleCard.vue
@@ -1,77 +1,44 @@
 <template>
   <div class="flash-sale-card card-shadow">
     <div class="relative">
-      <!-- 商品图片 -->
-      <img 
-        :src="data.productImageUrl || '/default-product.png'" 
+      <SafeImage
+        :src="data.productImageUrl"
         :alt="data.productName"
-        class="w-full h-48 object-cover"
-        @error="handleImageError"
-      >
-      
-      <!-- 状态标签 -->
+        wrapper-class="w-full h-48"
+        img-class="w-full h-48 object-cover"
+      />
+
       <div class="absolute top-2 left-2">
         <el-tag :type="statusType" effect="dark" size="small">
           <el-icon class="mr-1"><Lightning /></el-icon>
           {{ statusText }}
         </el-tag>
       </div>
-      
-      <!-- 折扣标签 -->
+
       <div class="absolute top-2 right-2">
-        <span class="discount-badge">
-          {{ discountPercent }}% OFF
-        </span>
+        <span class="discount-badge">{{ discountPercent }}% OFF</span>
       </div>
     </div>
-    
+
     <div class="p-4">
-      <!-- 商品名称 -->
       <h3 class="font-semibold text-lg mb-2 truncate">{{ data.productName }}</h3>
-      
-      <!-- 价格 -->
       <div class="flex items-end mb-3">
         <span class="text-2xl font-bold text-red-500">¥{{ data.flashPrice }}</span>
         <span class="ml-2 text-sm text-gray-400 line-through">¥{{ data.originalPrice }}</span>
       </div>
-      
-      <!-- 库存进度 -->
       <div class="mb-3">
         <div class="flex justify-between text-sm text-gray-600 mb-1">
           <span>剩余: {{ data.remainingStock }}件</span>
           <span>{{ stockPercent }}%</span>
         </div>
-        <el-progress 
-          :percentage="stockPercent" 
-          :stroke-width="6"
-          :show-text="false"
-          :color="progressColor"
-        />
+        <el-progress :percentage="stockPercent" :stroke-width="6" :show-text="false" :color="progressColor" />
       </div>
-      
-      <!-- 倒计时 -->
       <div class="text-center mb-3">
-        <CountDown 
-          v-if="data.status === 'ACTIVE'" 
-          :end-time="endTime"
-          @finish="$emit('refresh')"
-        />
-        <span v-else-if="data.status === 'UPCOMING'" class="text-sm text-gray-500">
-          即将开始
-        </span>
-        <span v-else class="text-sm text-gray-400">
-          已结束
-        </span>
+        <CountDown v-if="data.status === 'ACTIVE'" :end-time="endTime" @finish="$emit('refresh')" />
+        <span v-else-if="data.status === 'UPCOMING'" class="text-sm text-gray-500">即将开始</span>
+        <span v-else class="text-sm text-gray-400">已结束</span>
       </div>
-      
-      <!-- 操作按钮 -->
-      <el-button 
-        type="danger" 
-        class="w-full"
-        :disabled="!canParticipate"
-        :loading="loading"
-        @click="handleParticipate"
-      >
+      <el-button type="danger" class="w-full" :disabled="!canParticipate" :loading="loading" @click="handleParticipate">
         <el-icon class="mr-1"><Lightning /></el-icon>
         {{ buttonText }}
       </el-button>
@@ -83,19 +50,12 @@
 import { ref, computed } from 'vue'
 import type { FlashSale } from '@/types/api'
 import CountDown from './CountDown.vue'
+import SafeImage from '@/components/common/SafeImage.vue'
 
-const props = defineProps<{
-  data: FlashSale
-}>()
-
-const emit = defineEmits<{
-  participate: [id: number]
-  refresh: []
-}>()
-
+const props = defineProps<{ data: FlashSale }>()
+const emit = defineEmits<{ participate: [id: number]; refresh: [] }>()
 const loading = ref(false)
 
-// 计算属性
 const statusType = computed(() => {
   switch (props.data.status) {
     case 'UPCOMING': return 'warning'
@@ -114,29 +74,11 @@ const statusText = computed(() => {
   }
 })
 
-const discountPercent = computed(() => {
-  return Math.round((1 - props.data.flashPrice / props.data.originalPrice) * 100)
-})
-
-const stockPercent = computed(() => {
-  if (props.data.flashStock === 0) return 0
-  return Math.round(props.data.remainingStock / props.data.flashStock * 100)
-})
-
-const progressColor = computed(() => {
-  if (stockPercent.value > 50) return '#67c23a'
-  if (stockPercent.value > 20) return '#e6a23c'
-  return '#f56c6c'
-})
-
-const endTime = computed(() => {
-  return new Date(props.data.endTime).getTime()
-})
-
-const canParticipate = computed(() => {
-  return props.data.status === 'ACTIVE' && props.data.remainingStock > 0
-})
-
+const discountPercent = computed(() => Math.round((1 - props.data.flashPrice / props.data.originalPrice) * 100))
+const stockPercent = computed(() => props.data.flashStock === 0 ? 0 : Math.round(props.data.remainingStock / props.data.flashStock * 100))
+const progressColor = computed(() => stockPercent.value > 50 ? '#67c23a' : stockPercent.value > 20 ? '#e6a23c' : '#f56c6c')
+const endTime = computed(() => new Date(props.data.endTime).getTime())
+const canParticipate = computed(() => props.data.status === 'ACTIVE' && props.data.remainingStock > 0)
 const buttonText = computed(() => {
   if (props.data.status === 'UPCOMING') return '即将开始'
   if (props.data.status === 'ENDED') return '已结束'
@@ -144,22 +86,11 @@ const buttonText = computed(() => {
   return '立即抢购'
 })
 
-// 处理图片加载错误
-const handleImageError = (e: Event) => {
-  const target = e.target as HTMLImageElement
-  target.src = '/default-product.png'
-}
-
-// 参与秒杀
 const handleParticipate = async () => {
   if (!canParticipate.value) return
-  
   loading.value = true
   emit('participate', props.data.id)
-  
-  setTimeout(() => {
-    loading.value = false
-  }, 1000)
+  setTimeout(() => { loading.value = false }, 1000)
 }
 </script>
 
@@ -167,7 +98,7 @@ const handleParticipate = async () => {
 .flash-sale-card {
   @apply bg-white rounded-lg overflow-hidden;
   transition: all 0.3s;
-  
+
   &:hover {
     transform: translateY(-4px);
   }
@@ -176,4 +107,4 @@ const handleParticipate = async () => {
 .discount-badge {
   @apply px-2 py-1 bg-orange-500 text-white text-xs font-bold rounded;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/flash-sale-frontend/src/components/business/ProductCard.vue b/flash-sale-frontend/src/components/business/ProductCard.vue
index a194c05..2b828cd 100644
--- a/flash-sale-frontend/src/components/business/ProductCard.vue
+++ b/flash-sale-frontend/src/components/business/ProductCard.vue
@@ -1,53 +1,35 @@
 <template>
   <div class="product-card card-shadow">
-    <!-- 商品图片 -->
     <div class="relative overflow-hidden h-48">
-      <img 
-        :src="data.imageUrl || '/default-product.png'" 
+      <SafeImage
+        :src="data.imageUrl"
         :alt="data.name"
-        class="w-full h-full object-cover hover:scale-110 transition-transform duration-300"
-        @error="handleImageError"
-      >
-      
-      <!-- 库存标签 -->
+        wrapper-class="w-full h-full"
+        img-class="w-full h-full object-cover hover:scale-110 transition-transform duration-300"
+      />
+
       <div v-if="data.stock <= 10" class="absolute top-2 right-2">
         <el-tag type="warning" size="small">
           仅剩 {{ data.stock }} 件
         </el-tag>
       </div>
     </div>
-    
+
     <div class="p-4">
-      <!-- 商品名称 -->
       <h3 class="font-semibold text-base mb-2 truncate">{{ data.name }}</h3>
-      
-      <!-- 商品描述 -->
       <p class="text-sm text-gray-500 mb-3 line-clamp-2">
         {{ data.description || '暂无描述' }}
       </p>
-      
-      <!-- 价格和库存 -->
       <div class="flex justify-between items-center mb-3">
         <span class="text-xl font-bold text-primary-500">¥{{ data.price }}</span>
         <span class="text-sm text-gray-400">库存: {{ data.stock }}</span>
       </div>
-      
-      <!-- 操作按钮 -->
       <div class="flex gap-2">
-        <el-button 
-          type="primary" 
-          size="small"
-          class="flex-1"
-          :disabled="data.stock === 0"
-          @click="handleAddToCart"
-        >
+        <el-button type="primary" size="small" class="flex-1" :disabled="data.stock === 0" @click="handleAddToCart">
           <el-icon class="mr-1"><ShoppingCart /></el-icon>
           加入购物车
         </el-button>
-        <el-button 
-          size="small"
-          @click="handleViewDetail"
-        >
+        <el-button size="small" @click="handleViewDetail">
           <el-icon><View /></el-icon>
         </el-button>
       </div>
@@ -58,31 +40,18 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import type { Product } from '@/types/api'
+import SafeImage from '@/components/common/SafeImage.vue'
 
-const props = defineProps<{
-  data: Product
-}>()
-
-const emit = defineEmits<{
-  addToCart: [id: number]
-}>()
-
+const props = defineProps<{ data: Product }>()
+const emit = defineEmits<{ addToCart: [id: number] }>()
 const router = useRouter()
 
-// 处理图片加载错误
-const handleImageError = (e: Event) => {
-  const target = e.target as HTMLImageElement
-  target.src = '/default-product.png'
-}
-
-// 添加到购物车
 const handleAddToCart = () => {
   if (props.data.stock > 0) {
     emit('addToCart', props.data.id)
   }
 }
 
-// 查看详情
 const handleViewDetail = () => {
   router.push(`/product/${props.data.id}`)
 }
@@ -92,7 +61,7 @@ const handleViewDetail = () => {
 .product-card {
   @apply bg-white rounded-lg overflow-hidden;
   transition: all 0.3s;
-  
+
   &:hover {
     transform: translateY(-2px);
   }
@@ -104,4 +73,4 @@ const handleViewDetail = () => {
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/flash-sale-frontend/src/components/common/AppFooter.vue b/flash-sale-frontend/src/components/common/AppFooter.vue
index c34c133..f21fb78 100644
--- a/flash-sale-frontend/src/components/common/AppFooter.vue
+++ b/flash-sale-frontend/src/components/common/AppFooter.vue
@@ -20,7 +20,7 @@
               </router-link>
             </li>
             <li>
-              <router-link to="/flashsale" class="text-gray-600 hover:text-primary-500">
+              <router-link to="/flashsales" class="text-gray-600 hover:text-primary-500">
                 秒杀活动
               </router-link>
             </li>
diff --git a/flash-sale-frontend/src/components/common/AppHeader.vue b/flash-sale-frontend/src/components/common/AppHeader.vue
index 076b167..5d52f4f 100644
--- a/flash-sale-frontend/src/components/common/AppHeader.vue
+++ b/flash-sale-frontend/src/components/common/AppHeader.vue
@@ -21,7 +21,7 @@
             <el-icon><HomeFilled /></el-icon>
             首页
           </router-link>
-          <router-link to="/flashsale" class="nav-link">
+          <router-link to="/flashsales" class="nav-link">
             <el-icon><Lightning /></el-icon>
             秒杀活动
           </router-link>
@@ -33,19 +33,7 @@
         
         <!-- 右侧菜单 -->
         <div class="flex items-center space-x-4">
-          <!-- 搜索框 -->
-          <el-input
-            v-model="searchKeyword"
-            placeholder="搜索商品"
-            class="w-48"
-            @keyup.enter="handleSearch"
-          >
-            <template #suffix>
-              <el-icon class="cursor-pointer" @click="handleSearch">
-                <Search />
-              </el-icon>
-            </template>
-          </el-input>
+          <SearchComponent />
           
           <!-- 通知中心 -->
           <NotificationCenter v-if="userStore.isLoggedIn" />
@@ -76,6 +64,10 @@
                     <el-icon><List /></el-icon>
                     我的订单
                   </el-dropdown-item>
+                  <el-dropdown-item @click="router.push('/favorites')">
+                    <el-icon><Star /></el-icon>
+                    我的收藏
+                  </el-dropdown-item>
                   <el-dropdown-item v-if="userStore.isAdmin" @click="router.push('/admin')">
                     <el-icon><Setting /></el-icon>
                     管理后台
@@ -106,25 +98,15 @@ import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import { useCartStore } from '@/stores/cart'
 import NotificationCenter from './NotificationCenter.vue'
+import SearchComponent from './SearchComponent.vue'
 import { ElMessageBox } from 'element-plus'
 
 const router = useRouter()
 const userStore = useUserStore()
 const cartStore = useCartStore()
 
-const searchKeyword = ref('')
 const cartCount = ref(0)
 
-// 搜索
-const handleSearch = () => {
-  if (searchKeyword.value.trim()) {
-    router.push({
-      path: '/products',
-      query: { keyword: searchKeyword.value }
-    })
-  }
-}
-
 // 退出登录
 const handleLogout = async () => {
   await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
@@ -133,7 +115,7 @@ const handleLogout = async () => {
     type: 'warning',
   })
   
-  userStore.logout()
+  await userStore.logout()
 }
 
 // 更新购物车数量
@@ -183,4 +165,4 @@ onMounted(() => {
     background-color: var(--primary-color);
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/flash-sale-frontend/src/components/common/ImageUpload.vue b/flash-sale-frontend/src/components/common/ImageUpload.vue
index e5e328a..cadcb56 100644
--- a/flash-sale-frontend/src/components/common/ImageUpload.vue
+++ b/flash-sale-frontend/src/components/common/ImageUpload.vue
@@ -65,6 +65,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { ElMessage } from 'element-plus'
+import { resolveImageUrl } from '@/utils/image'
 import { useUserStore } from '@/stores/user'
 import type { UploadFile, UploadFiles, UploadRawFile } from 'element-plus'
 
@@ -75,6 +76,7 @@ interface Props {
   accept?: string
   maxSize?: number // MB
   aspectRatio?: number // 宽高比
+  action?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -82,6 +84,7 @@ const props = withDefaults(defineProps<Props>(), {
   multiple: false,
   accept: 'image/jpeg,image/jpg,image/png,image/gif,image/webp',
   maxSize: 5, // 5MB
+  action: '/api/admin/products/upload-image',
 })
 
 const emit = defineEmits<{
@@ -92,7 +95,7 @@ const emit = defineEmits<{
 const userStore = useUserStore()
 
 // 上传相关
-const uploadUrl = computed(() => `${import.meta.env.VITE_API_BASE_URL}/api/upload/image`)
+const uploadUrl = computed(() => `${import.meta.env.VITE_API_BASE_URL || ''}${props.action}`)
 const headers = computed(() => ({
   Authorization: `Bearer ${userStore.token}`
 }))
@@ -111,14 +114,14 @@ watch(
       if (Array.isArray(val)) {
         fileList.value = val.map((url, index) => ({
           name: `image-${index}`,
-          url,
+          url: resolveImageUrl(url),
           status: 'success',
           uid: Date.now() + index
         } as UploadFile))
       } else {
         fileList.value = [{
           name: 'image',
-          url: val,
+          url: resolveImageUrl(val),
           status: 'success',
           uid: Date.now()
         } as UploadFile]
@@ -184,7 +187,7 @@ const beforeUpload = (rawFile: UploadRawFile) => {
 // 上传成功
 const handleSuccess = (response: any, file: UploadFile, files: UploadFiles) => {
   if (response.success) {
-    file.url = response.data.url
+    file.url = resolveImageUrl(response.data?.url || response.imageUrl || response.data?.imageUrl)
     updateValue()
     ElMessage.success('上传成功')
   } else {
@@ -336,4 +339,4 @@ const updateValue = () => {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/flash-sale-frontend/src/components/common/SearchComponent.vue b/flash-sale-frontend/src/components/common/SearchComponent.vue
index addbab1..edaeea9 100644
--- a/flash-sale-frontend/src/components/common/SearchComponent.vue
+++ b/flash-sale-frontend/src/components/common/SearchComponent.vue
@@ -111,9 +111,7 @@
                   <el-form-item label="商品分类">
                     <el-select v-model="advancedForm.category" placeholder="选择分类">
                       <el-option label="全部分类" value="" />
-                      <el-option label="电子产品" value="electronics" />
-                      <el-option label="服装鞋包" value="fashion" />
-                      <el-option label="食品饮料" value="food" />
+                      <el-option v-for="item in categories" :key="item" :label="item" :value="item" />
                       <el-option label="图书音像" value="books" />
                     </el-select>
                   </el-form-item>
@@ -157,8 +155,9 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
 import { debounce } from 'lodash-es'
+import { productApi } from '@/api/modules/product'
+import { flashsaleApi } from '@/api/modules/flashsale'
 
 const router = useRouter()
 
@@ -181,6 +180,7 @@ const hotSearches = ref([
 
 // 搜索建议
 const suggestions = ref<any[]>([])
+const categories = ref<string[]>([])
 
 // 高级搜索表单
 const advancedForm = reactive({
@@ -259,28 +259,38 @@ const fetchSuggestions = debounce(async () => {
     suggestions.value = []
     return
   }
-  
-  // 模拟搜索建议
-  suggestions.value = [
-    {
-      id: 1,
-      type: 'product',
-      name: `${searchQuery.value} Pro Max`,
-      price: 8999
-    },
-    {
-      id: 2,
-      type: 'product',
-      name: `${searchQuery.value} 标准版`,
-      price: 5999
-    },
-    {
-      id: 3,
-      type: 'flashsale',
-      name: `${searchQuery.value} 限时秒杀`,
-      price: 4999
-    }
-  ]
+
+  try {
+    const [productRes, flashSaleRes] = await Promise.all([
+      productApi.getList({ keyword: searchQuery.value, page: 0, size: 5 }),
+      flashsaleApi.getList({ page: 0, size: 6 }),
+    ])
+
+    const productSuggestions = productRes.success
+      ? productRes.data.content.map((item) => ({
+          id: item.id,
+          type: 'product',
+          name: item.name,
+          price: item.price,
+        }))
+      : []
+
+    const flashSaleSuggestions = flashSaleRes.success
+      ? flashSaleRes.data.content
+          .filter((item) => item.productName.includes(searchQuery.value))
+          .slice(0, 3)
+          .map((item) => ({
+            id: item.id,
+            type: 'flashsale',
+            name: item.productName,
+            price: item.flashPrice,
+          }))
+      : []
+
+    suggestions.value = [...productSuggestions, ...flashSaleSuggestions].slice(0, 8)
+  } catch (error) {
+    suggestions.value = []
+  }
 }, 300)
 
 // 快速搜索
@@ -337,8 +347,10 @@ watch(searchQuery, () => {
   fetchSuggestions()
 })
 
-onMounted(() => {
+onMounted(async () => {
   loadSearchHistory()
+  const res = await productApi.getCategories()
+  categories.value = res.success ? res.data : []
 })
 </script>
 
diff --git a/flash-sale-frontend/src/layouts/AdminLayout.vue b/flash-sale-frontend/src/layouts/AdminLayout.vue
index 35b263e..fb69e2a 100644
--- a/flash-sale-frontend/src/layouts/AdminLayout.vue
+++ b/flash-sale-frontend/src/layouts/AdminLayout.vue
@@ -42,6 +42,21 @@
             <el-icon><User /></el-icon>
             <template #title>用户管理</template>
           </el-menu-item>
+
+          <el-menu-item index="/admin/reviews">
+            <el-icon><ChatDotRound /></el-icon>
+            <template #title>评价管理</template>
+          </el-menu-item>
+
+          <el-menu-item index="/admin/favorites">
+            <el-icon><Star /></el-icon>
+            <template #title>收藏管理</template>
+          </el-menu-item>
+
+          <el-menu-item index="/admin/monitor">
+            <el-icon><Monitor /></el-icon>
+            <template #title>系统监控</template>
+          </el-menu-item>
         </el-menu>
       </el-aside>
       
@@ -140,6 +155,9 @@ const currentPageTitle = computed(() => {
     '/admin/flashsales': '秒杀管理',
     '/admin/orders': '订单管理',
     '/admin/users': '用户管理',
+    '/admin/reviews': '评价管理',
+    '/admin/favorites': '收藏管理',
+    '/admin/monitor': '系统监控',
   }
   return titles[route.path] || ''
 })
@@ -166,7 +184,7 @@ const handleLogout = async () => {
     type: 'warning',
   })
   
-  userStore.logout()
+  await userStore.logout()
 }
 </script>
 
@@ -303,4 +321,4 @@ const handleLogout = async () => {
   opacity: 0;
   transform: translateX(30px);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/flash-sale-frontend/src/pages/admin/dashboard.vue b/flash-sale-frontend/src/pages/admin/dashboard.vue
index 05a029d..7a28bda 100644
--- a/flash-sale-frontend/src/pages/admin/dashboard.vue
+++ b/flash-sale-frontend/src/pages/admin/dashboard.vue
@@ -1,137 +1,112 @@
 <template>
   <div class="admin-dashboard">
-    <!-- 统计卡片 -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-6">
       <div class="stat-card">
-        <div class="stat-icon bg-blue-100">
-          <el-icon :size="24" class="text-blue-500"><User /></el-icon>
+        <div class="stat-icon bg-blue-100 text-blue-500">
+          <el-icon><User /></el-icon>
         </div>
-        <div class="stat-content">
+        <div>
           <div class="stat-value">{{ statistics.totalUsers }}</div>
           <div class="stat-label">用户总数</div>
-          <div class="stat-trend text-green-500">
-            <el-icon><ArrowUp /></el-icon>
-            12% 较昨日
-          </div>
+          <div class="stat-desc">在线 {{ userStats.onlineUsers }} 人</div>
         </div>
       </div>
-      
       <div class="stat-card">
-        <div class="stat-icon bg-green-100">
-          <el-icon :size="24" class="text-green-500"><ShoppingBag /></el-icon>
+        <div class="stat-icon bg-emerald-100 text-emerald-500">
+          <el-icon><ShoppingBag /></el-icon>
         </div>
-        <div class="stat-content">
+        <div>
           <div class="stat-value">{{ statistics.totalProducts }}</div>
           <div class="stat-label">商品总数</div>
-          <div class="stat-trend text-green-500">
-            <el-icon><ArrowUp /></el-icon>
-            5% 较昨日
-          </div>
+          <div class="stat-desc">低库存 {{ productStats.lowStockProducts }} 件</div>
         </div>
       </div>
-      
       <div class="stat-card">
-        <div class="stat-icon bg-orange-100">
-          <el-icon :size="24" class="text-orange-500"><List /></el-icon>
+        <div class="stat-icon bg-orange-100 text-orange-500">
+          <el-icon><List /></el-icon>
         </div>
-        <div class="stat-content">
+        <div>
           <div class="stat-value">{{ statistics.totalOrders }}</div>
           <div class="stat-label">订单总数</div>
-          <div class="stat-trend text-green-500">
-            <el-icon><ArrowUp /></el-icon>
-            23% 较昨日
-          </div>
+          <div class="stat-desc">今日新增 {{ statistics.todayOrders }} 单</div>
         </div>
       </div>
-      
       <div class="stat-card">
-        <div class="stat-icon bg-red-100">
-          <el-icon :size="24" class="text-red-500"><Coin /></el-icon>
+        <div class="stat-icon bg-rose-100 text-rose-500">
+          <el-icon><Coin /></el-icon>
         </div>
-        <div class="stat-content">
-          <div class="stat-value">¥{{ statistics.totalSales.toFixed(2) }}</div>
-          <div class="stat-label">销售总额</div>
-          <div class="stat-trend text-green-500">
-            <el-icon><ArrowUp /></el-icon>
-            18% 较昨日
-          </div>
+        <div>
+          <div class="stat-value">¥{{ formatCurrency(statistics.totalAmount) }}</div>
+          <div class="stat-label">累计成交额</div>
+          <div class="stat-desc">活动中 {{ statistics.activeFlashSales }} 场</div>
         </div>
       </div>
     </div>
-    
-    <!-- 图表区域 -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-      <!-- 销售趋势 -->
-      <div class="chart-card">
-        <div class="chart-header">
-          <h3 class="chart-title">销售趋势</h3>
-          <el-radio-group v-model="salesPeriod" size="small">
-            <el-radio-button label="week">本周</el-radio-button>
-            <el-radio-button label="month">本月</el-radio-button>
-            <el-radio-button label="year">本年</el-radio-button>
-          </el-radio-group>
+
+    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6 mb-6">
+      <div class="panel-card">
+        <div class="panel-header">
+          <div>
+            <h3 class="panel-title">订单趋势</h3>
+            <p class="panel-subtitle">最近订单金额分布</p>
+          </div>
+          <el-button text type="primary" @click="loadDashboardData">刷新</el-button>
         </div>
         <div ref="salesChartRef" class="chart-container"></div>
       </div>
-      
-      <!-- 商品分类分布 -->
-      <div class="chart-card">
-        <div class="chart-header">
-          <h3 class="chart-title">商品分类分布</h3>
+
+      <div class="panel-card">
+        <div class="panel-header">
+          <div>
+            <h3 class="panel-title">商品状态占比</h3>
+            <p class="panel-subtitle">沿用 JSP 仪表盘的结构化总览</p>
+          </div>
         </div>
         <div ref="categoryChartRef" class="chart-container"></div>
       </div>
     </div>
-    
-    <!-- 数据表格 -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-      <!-- 最新订单 -->
-      <div class="table-card">
-        <div class="table-header">
-          <h3 class="table-title">最新订单</h3>
-          <el-button text type="primary" @click="router.push('/admin/orders')">
-            查看全部 <el-icon><ArrowRight /></el-icon>
-          </el-button>
+
+    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
+      <div class="panel-card">
+        <div class="panel-header">
+          <div>
+            <h3 class="panel-title">最新订单</h3>
+            <p class="panel-subtitle">映射 JSP 仪表盘最近订单表格</p>
+          </div>
+          <el-button text type="primary" @click="router.push('/admin/orders')">查看全部</el-button>
         </div>
-        <el-table :data="recentOrders" stripe>
-          <el-table-column prop="orderNo" label="订单号" width="120" />
-          <el-table-column prop="username" label="用户" />
-          <el-table-column prop="totalAmount" label="金额">
-            <template #default="{ row }">
-              ¥{{ row.totalAmount }}
-            </template>
+        <el-table v-loading="loading" :data="recentOrders" stripe>
+          <el-table-column prop="orderNo" label="订单号" min-width="120" />
+          <el-table-column prop="username" label="用户" min-width="100" />
+          <el-table-column prop="productName" label="商品" min-width="140" show-overflow-tooltip />
+          <el-table-column prop="totalAmount" label="金额" min-width="100">
+            <template #default="{ row }">¥{{ formatCurrency(row.totalAmount) }}</template>
           </el-table-column>
-          <el-table-column prop="status" label="状态">
+          <el-table-column prop="status" label="状态" min-width="100">
             <template #default="{ row }">
-              <el-tag :type="getOrderStatusType(row.status)" size="small">
-                {{ getOrderStatusText(row.status) }}
-              </el-tag>
+              <el-tag :type="getOrderStatusType(row.status)">{{ getOrderStatusText(row.status) }}</el-tag>
             </template>
           </el-table-column>
         </el-table>
       </div>
-      
-      <!-- 热门商品 -->
-      <div class="table-card">
-        <div class="table-header">
-          <h3 class="table-title">热门商品</h3>
-          <el-button text type="primary" @click="router.push('/admin/products')">
-            查看全部 <el-icon><ArrowRight /></el-icon>
-          </el-button>
+
+      <div class="panel-card">
+        <div class="panel-header">
+          <div>
+            <h3 class="panel-title">热门商品</h3>
+            <p class="panel-subtitle">对齐 JSP 后台热门商品模块</p>
+          </div>
+          <el-button text type="primary" @click="router.push('/admin/products')">查看全部</el-button>
         </div>
-        <el-table :data="hotProducts" stripe>
-          <el-table-column prop="name" label="商品名称" />
-          <el-table-column prop="price" label="价格">
-            <template #default="{ row }">
-              ¥{{ row.price }}
-            </template>
+        <el-table v-loading="loading" :data="hotProducts" stripe>
+          <el-table-column prop="name" label="商品名称" min-width="160" show-overflow-tooltip />
+          <el-table-column prop="price" label="价格" min-width="100">
+            <template #default="{ row }">¥{{ formatCurrency(row.price) }}</template>
           </el-table-column>
-          <el-table-column prop="sales" label="销量" />
-          <el-table-column prop="stock" label="库存">
+          <el-table-column prop="sales" label="销量" min-width="80" />
+          <el-table-column prop="stock" label="库存" min-width="100">
             <template #default="{ row }">
-              <el-tag :type="row.stock > 10 ? 'success' : 'warning'" size="small">
-                {{ row.stock }}
-              </el-tag>
+              <el-tag :type="row.stock > 10 ? 'success' : 'warning'">{{ row.stock }}</el-tag>
             </template>
           </el-table-column>
         </el-table>
@@ -141,182 +116,165 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
+import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import * as echarts from 'echarts'
-import type { EChartsOption } from 'echarts'
+import { adminApi } from '@/api/modules/admin'
+import type {
+  AdminDashboardStats,
+  AdminHotProductRow,
+  AdminProductStats,
+  AdminRecentOrderRow,
+  AdminUserStats,
+} from '@/types/admin'
 
 const router = useRouter()
+const loading = ref(false)
 
-// 统计数据
-const statistics = reactive({
-  totalUsers: 5234,
-  totalProducts: 128,
-  totalOrders: 1893,
-  totalSales: 285670.50,
-  todayOrders: 67,
-  todaySales: 12450.00,
-  activeFlashSales: 5,
-  onlineUsers: 342
+const statistics = reactive<AdminDashboardStats>({
+  totalUsers: 0,
+  totalProducts: 0,
+  totalOrders: 0,
+  totalAmount: 0,
+  todayOrders: 0,
+  paidOrders: 0,
+  pendingOrders: 0,
+  activeFlashSales: 0,
 })
 
-// 图表相关
-const salesPeriod = ref('week')
-const salesChartRef = ref<HTMLElement>()
-const categoryChartRef = ref<HTMLElement>()
+const userStats = reactive<AdminUserStats>({
+  totalUsers: 0,
+  activeUsers: 0,
+  newUsers: 0,
+  onlineUsers: 0,
+})
+
+const productStats = reactive<AdminProductStats>({
+  totalProducts: 0,
+  activeProducts: 0,
+  inactiveProducts: 0,
+  lowStockProducts: 0,
+})
+
+const recentOrders = ref<AdminRecentOrderRow[]>([])
+const hotProducts = ref<AdminHotProductRow[]>([])
+
+const salesChartRef = ref<HTMLElement | null>(null)
+const categoryChartRef = ref<HTMLElement | null>(null)
 let salesChart: echarts.ECharts | null = null
 let categoryChart: echarts.ECharts | null = null
 
-// 最新订单
-const recentOrders = ref([
-  { id: 1, orderNo: 'ORD2024001', username: 'user1', totalAmount: 299.00, status: 'PAID' },
-  { id: 2, orderNo: 'ORD2024002', username: 'user2', totalAmount: 599.00, status: 'SHIPPED' },
-  { id: 3, orderNo: 'ORD2024003', username: 'user3', totalAmount: 199.00, status: 'PENDING' },
-  { id: 4, orderNo: 'ORD2024004', username: 'user4', totalAmount: 899.00, status: 'COMPLETED' },
-  { id: 5, orderNo: 'ORD2024005', username: 'user5', totalAmount: 399.00, status: 'PAID' },
-])
+const formatCurrency = (value: number) => Number(value || 0).toFixed(2)
 
-// 热门商品
-const hotProducts = ref([
-  { id: 1, name: 'iPhone 15 Pro', price: 8999, sales: 234, stock: 45 },
-  { id: 2, name: 'MacBook Pro', price: 12999, sales: 156, stock: 23 },
-  { id: 3, name: 'AirPods Pro', price: 1999, sales: 567, stock: 89 },
-  { id: 4, name: 'iPad Pro', price: 6999, sales: 123, stock: 8 },
-  { id: 5, name: 'Apple Watch', price: 2999, sales: 345, stock: 67 },
-])
-
-// 获取订单状态类型
 const getOrderStatusType = (status: string) => {
   const map: Record<string, string> = {
-    'PENDING': 'warning',
-    'PAID': 'primary',
-    'SHIPPED': 'primary',
-    'COMPLETED': 'success',
-    'CANCELLED': 'info'
+    PENDING: 'warning',
+    PAID: 'primary',
+    SHIPPED: 'success',
+    COMPLETED: 'success',
+    CANCELLED: 'info',
   }
   return map[status] || 'info'
 }
 
-// 获取订单状态文本
 const getOrderStatusText = (status: string) => {
   const map: Record<string, string> = {
-    'PENDING': '待付款',
-    'PAID': '待发货',
-    'SHIPPED': '待收货',
-    'COMPLETED': '已完成',
-    'CANCELLED': '已取消'
+    PENDING: '待支付',
+    PAID: '已支付',
+    SHIPPED: '已发货',
+    COMPLETED: '已完成',
+    CANCELLED: '已取消',
   }
   return map[status] || status
 }
 
-// 初始化销售趋势图表
-const initSalesChart = () => {
+const renderSalesChart = () => {
   if (!salesChartRef.value) return
-  
-  salesChart = echarts.init(salesChartRef.value)
-  
-  const option: EChartsOption = {
-    tooltip: {
-      trigger: 'axis'
-    },
+  if (!salesChart) {
+    salesChart = echarts.init(salesChartRef.value)
+  }
+
+  salesChart.setOption({
+    tooltip: { trigger: 'axis' },
+    grid: { left: 24, right: 12, top: 24, bottom: 24, containLabel: true },
     xAxis: {
       type: 'category',
-      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+      data: recentOrders.value.map((item) => item.orderNo),
+      axisLabel: { rotate: 30 },
     },
     yAxis: {
       type: 'value',
-      axisLabel: {
-        formatter: '¥{value}'
-      }
+      axisLabel: { formatter: '¥{value}' },
     },
     series: [
       {
-        name: '销售额',
-        type: 'line',
-        smooth: true,
-        data: [12000, 15000, 13000, 18000, 22000, 25000, 20000],
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(59, 130, 246, 0.5)' },
-            { offset: 1, color: 'rgba(59, 130, 246, 0)' }
-          ])
-        },
+        type: 'bar',
+        data: recentOrders.value.map((item) => item.totalAmount),
         itemStyle: {
-          color: '#3b82f6'
-        }
-      }
-    ]
-  }
-  
-  salesChart.setOption(option)
+          borderRadius: [6, 6, 0, 0],
+          color: '#3b82f6',
+        },
+      },
+    ],
+  })
 }
 
-// 初始化分类分布图表
-const initCategoryChart = () => {
+const renderCategoryChart = () => {
   if (!categoryChartRef.value) return
-  
-  categoryChart = echarts.init(categoryChartRef.value)
-  
-  const option: EChartsOption = {
-    tooltip: {
-      trigger: 'item'
-    },
-    legend: {
-      orient: 'vertical',
-      right: 10,
-      top: 'center'
-    },
+  if (!categoryChart) {
+    categoryChart = echarts.init(categoryChartRef.value)
+  }
+
+  categoryChart.setOption({
+    tooltip: { trigger: 'item' },
+    legend: { bottom: 0 },
     series: [
       {
-        name: '商品分类',
+        name: '商品状态',
         type: 'pie',
-        radius: ['40%', '70%'],
-        avoidLabelOverlap: false,
-        itemStyle: {
-          borderRadius: 10,
-          borderColor: '#fff',
-          borderWidth: 2
-        },
-        label: {
-          show: false,
-          position: 'center'
-        },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: 20,
-            fontWeight: 'bold'
-          }
-        },
-        labelLine: {
-          show: false
-        },
+        radius: ['42%', '72%'],
         data: [
-          { value: 35, name: '电子产品' },
-          { value: 28, name: '服装鞋包' },
-          { value: 20, name: '食品饮料' },
-          { value: 10, name: '图书音像' },
-          { value: 7, name: '其他' }
-        ]
-      }
-    ]
-  }
-  
-  categoryChart.setOption(option)
+          { value: productStats.activeProducts, name: '上架商品' },
+          { value: productStats.inactiveProducts, name: '下架商品' },
+          { value: productStats.lowStockProducts, name: '低库存商品' },
+        ],
+      },
+    ],
+  })
+}
+
+const loadDashboardData = async () => {
+  loading.value = true
+  try {
+    const [dashboardRes, userRes, productRes, recentRes, hotRes] = await Promise.all([
+      adminApi.getDashboardStats(),
+      adminApi.getUserStats(),
+      adminApi.getProductStats(),
+      adminApi.getRecentOrders(6),
+      adminApi.getHotProducts(6),
+    ])
+
+    Object.assign(statistics, dashboardRes.data)
+    Object.assign(userStats, userRes.data)
+    Object.assign(productStats, productRes.data)
+    recentOrders.value = recentRes.data
+    hotProducts.value = hotRes.data
+
+    await nextTick()
+    renderSalesChart()
+    renderCategoryChart()
+  } finally {
+    loading.value = false
+  }
 }
 
-// 窗口大小变化处理
 const handleResize = () => {
   salesChart?.resize()
   categoryChart?.resize()
 }
 
 onMounted(() => {
-  nextTick(() => {
-    initSalesChart()
-    initCategoryChart()
-  })
-  
+  loadDashboardData()
   window.addEventListener('resize', handleResize)
 })
 
@@ -330,53 +288,43 @@ onUnmounted(() => {
 <style scoped lang="scss">
 .admin-dashboard {
   .stat-card {
-    @apply bg-white rounded-lg p-6 shadow-sm flex items-center gap-4;
-    
-    .stat-icon {
-      @apply w-12 h-12 rounded-lg flex items-center justify-center;
-    }
-    
-    .stat-content {
-      @apply flex-1;
-      
-      .stat-value {
-        @apply text-2xl font-bold text-gray-800;
-      }
-      
-      .stat-label {
-        @apply text-sm text-gray-500 mt-1;
-      }
-      
-      .stat-trend {
-        @apply text-sm mt-2 flex items-center gap-1;
-      }
-    }
+    @apply bg-white rounded-xl p-5 shadow-sm flex items-center gap-4;
   }
-  
-  .chart-card,
-  .table-card {
-    @apply bg-white rounded-lg shadow-sm;
-    
-    .chart-header,
-    .table-header {
-      @apply p-4 border-b flex justify-between items-center;
-      
-      .chart-title,
-      .table-title {
-        @apply text-lg font-semibold;
-      }
-    }
-    
-    .chart-container {
-      @apply p-4;
-      height: 300px;
-    }
+
+  .stat-icon {
+    @apply w-12 h-12 rounded-xl flex items-center justify-center text-xl;
   }
-  
-  .table-card {
-    :deep(.el-table) {
-      border-radius: 0 0 8px 8px;
-    }
+
+  .stat-value {
+    @apply text-2xl font-bold text-slate-900;
+  }
+
+  .stat-label {
+    @apply text-sm text-slate-500 mt-1;
+  }
+
+  .stat-desc {
+    @apply text-xs text-slate-400 mt-2;
+  }
+
+  .panel-card {
+    @apply bg-white rounded-xl shadow-sm p-5;
+  }
+
+  .panel-header {
+    @apply flex items-center justify-between mb-4 gap-4;
+  }
+
+  .panel-title {
+    @apply text-lg font-semibold text-slate-900;
+  }
+
+  .panel-subtitle {
+    @apply text-sm text-slate-500 mt-1;
+  }
+
+  .chart-container {
+    height: 320px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/flash-sale-frontend/src/pages/admin/favorites.vue b/flash-sale-frontend/src/pages/admin/favorites.vue
new file mode 100644
index 0000000..bac4fbd
--- /dev/null
+++ b/flash-sale-frontend/src/pages/admin/favorites.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="page-shell">
+    <div class="page-header">
+      <div>
+        <h2 class="page-title">收藏管理</h2>
+        <p class="page-subtitle">查看用户收藏关系并支持后台删除</p>
+      </div>
+      <div class="actions">
+        <el-button @click="reloadData"><el-icon><Refresh /></el-icon>刷新</el-button>
+        <el-button type="primary" @click="migrateItems">迁移旧订单明细</el-button>
+      </div>
+    </div>
+
+    <div class="stats-grid">
+      <div class="mini-stat blue"><div class="mini-stat__value">{{ stats.totalFavorites }}</div><div class="mini-stat__label">收藏总数</div></div>
+      <div class="mini-stat green"><div class="mini-stat__value">{{ stats.favoriteUsers }}</div><div class="mini-stat__label">收藏用户数</div></div>
+      <div class="mini-stat orange"><div class="mini-stat__value">{{ stats.favoriteProducts }}</div><div class="mini-stat__label">被收藏商品数</div></div>
+      <div class="mini-stat purple"><div class="mini-stat__value">{{ stats.todayFavorites }}</div><div class="mini-stat__label">今日新增收藏</div></div>
+    </div>
+
+    <div class="panel-card filter-card">
+      <el-input v-model="keyword" clearable placeholder="搜索用户 / 商品" @keyup.enter="loadFavorites" />
+      <el-button type="primary" @click="loadFavorites">搜索</el-button>
+    </div>
+
+    <div class="panel-card">
+      <el-table v-loading="loading" :data="favorites" stripe>
+        <el-table-column prop="productName" label="商品" min-width="180" show-overflow-tooltip />
+        <el-table-column prop="productCategory" label="分类" width="120" />
+        <el-table-column prop="username" label="用户" width="120" />
+        <el-table-column prop="createdAt" label="收藏时间" min-width="170" />
+        <el-table-column label="操作" width="100">
+          <template #default="{ row }"><el-button text type="danger" @click="removeFavorite(row.id)">删除</el-button></template>
+        </el-table-column>
+      </el-table>
+      <div class="table-footer">
+        <el-pagination v-model:current-page="page" v-model:page-size="size" :total="total" :page-sizes="[10,20,50]" layout="total, sizes, prev, pager, next, jumper" @current-change="loadFavorites" @size-change="loadFavorites" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { adminApi } from '@/api/modules/admin'
+import type { AdminFavoriteRow, AdminFavoriteStats } from '@/types/admin'
+
+const loading = ref(false)
+const keyword = ref('')
+const page = ref(1)
+const size = ref(10)
+const total = ref(0)
+const favorites = ref<AdminFavoriteRow[]>([])
+const stats = reactive<AdminFavoriteStats>({ totalFavorites: 0, favoriteUsers: 0, favoriteProducts: 0, todayFavorites: 0 })
+
+const loadStats = async () => {
+  const res = await adminApi.getFavoriteStats()
+  Object.assign(stats, res.data)
+}
+
+const loadFavorites = async () => {
+  loading.value = true
+  try {
+    const res = await adminApi.getFavorites({ page: page.value, size: size.value, keyword: keyword.value || undefined })
+    favorites.value = res.data.favorites
+    total.value = res.data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const removeFavorite = async (id: number) => {
+  await ElMessageBox.confirm('确定删除该收藏记录吗？', '提示', { type: 'warning' })
+  await adminApi.deleteFavorite(id)
+  ElMessage.success('删除成功')
+  loadStats(); loadFavorites()
+}
+
+const migrateItems = async () => {
+  const res = await adminApi.migrateLegacyOrderItems()
+  ElMessage.success(`迁移完成：迁移 ${res.data.migrated} 条，跳过 ${res.data.skipped} 条`)
+}
+
+const reloadData = async () => { await Promise.all([loadStats(), loadFavorites()]) }
+onMounted(() => { reloadData() })
+</script>
+
+<style scoped lang="scss">
+.page-shell { display:flex; flex-direction:column; gap:20px; }
+.page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
+.page-title { @apply text-2xl font-bold text-slate-900; }
+.page-subtitle { @apply text-sm text-slate-500 mt-1; }
+.actions { display:flex; gap:12px; }
+.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
+.mini-stat { @apply rounded-xl text-white p-5 shadow-sm; }
+.mini-stat.blue { background:linear-gradient(135deg,#3b82f6,#2563eb); }
+.mini-stat.green { background:linear-gradient(135deg,#10b981,#059669); }
+.mini-stat.orange { background:linear-gradient(135deg,#f59e0b,#ea580c); }
+.mini-stat.purple { background:linear-gradient(135deg,#8b5cf6,#7c3aed); }
+.mini-stat__value { @apply text-3xl font-bold; }
+.mini-stat__label { @apply text-sm opacity-90 mt-2; }
+.panel-card { @apply bg-white rounded-xl shadow-sm p-5; }
+.filter-card { display:grid; grid-template-columns:1fr 100px; gap:12px; }
+.table-footer { @apply flex justify-end mt-4; }
+</style>
diff --git a/flash-sale-frontend/src/pages/admin/flashsales.vue b/flash-sale-frontend/src/pages/admin/flashsales.vue
index 2711540..e5392ce 100644
--- a/flash-sale-frontend/src/pages/admin/flashsales.vue
+++ b/flash-sale-frontend/src/pages/admin/flashsales.vue
@@ -1,48 +1,533 @@
 <template>
-  <div class="admin-flashsales">
+  <div class="admin-flashsales page-shell">
     <div class="page-header">
-      <h2 class="page-title">秒杀活动管理</h2>
-      <el-button type="primary">
-        <el-icon class="mr-1"><Plus /></el-icon>
-        创建秒杀
-      </el-button>
+      <div>
+        <h2 class="page-title">秒杀管理</h2>
+        <p class="page-subtitle">覆盖 JSP 的活动列表、发布、暂停、恢复、结束与详情查看</p>
+      </div>
+      <div class="page-actions">
+        <el-button @click="reloadData">
+          <el-icon><Refresh /></el-icon>
+          刷新
+        </el-button>
+        <el-button type="primary" @click="openCreateDialog">
+          <el-icon><Plus /></el-icon>
+          创建秒杀
+        </el-button>
+      </div>
     </div>
-    
-    <div class="content-card">
-      <el-table :data="[]" stripe>
+
+    <div class="stats-grid">
+      <div class="mini-stat purple">
+        <div class="mini-stat__value">{{ stats.totalFlashSales }}</div>
+        <div class="mini-stat__label">活动总数</div>
+      </div>
+      <div class="mini-stat red">
+        <div class="mini-stat__value">{{ stats.activeFlashSales }}</div>
+        <div class="mini-stat__label">进行中</div>
+      </div>
+      <div class="mini-stat orange">
+        <div class="mini-stat__value">{{ stats.upcomingFlashSales }}</div>
+        <div class="mini-stat__label">即将开始</div>
+      </div>
+      <div class="mini-stat gray">
+        <div class="mini-stat__value">{{ stats.endedFlashSales }}</div>
+        <div class="mini-stat__label">已结束</div>
+      </div>
+    </div>
+
+    <div class="panel-card filter-card">
+      <el-input v-model="query.keyword" clearable placeholder="搜索商品名称" @keyup.enter="loadFlashSales">
+        <template #prefix><el-icon><Search /></el-icon></template>
+      </el-input>
+      <el-select v-model="query.status" clearable placeholder="全部状态" @change="handleSearch">
+        <el-option label="即将开始" value="UPCOMING" />
+        <el-option label="进行中" value="ACTIVE" />
+        <el-option label="已结束" value="ENDED" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">搜索</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <div class="panel-card">
+      <el-table v-loading="loading" :data="displayFlashSales" stripe>
         <el-table-column prop="id" label="ID" width="80" />
-        <el-table-column prop="productName" label="商品名称" />
-        <el-table-column prop="flashPrice" label="秒杀价" />
-        <el-table-column prop="flashStock" label="秒杀库存" />
-        <el-table-column prop="startTime" label="开始时间" />
-        <el-table-column prop="endTime" label="结束时间" />
-        <el-table-column prop="status" label="状态" />
-        <el-table-column label="操作" width="200">
-          <template #default>
-            <el-button text type="primary" size="small">编辑</el-button>
-            <el-button text type="danger" size="small">删除</el-button>
+        <el-table-column label="商品" min-width="240">
+          <template #default="{ row }">
+            <div class="product-cell">
+              <SafeImage :src="row.productImageUrl" :alt="row.productName" wrapper-class="product-image" img-class="product-image" />
+              <div>
+                <div class="product-name">{{ row.productName }}</div>
+                <div class="product-meta">商品ID：{{ row.productId }}</div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="originalPrice" label="原价" width="110">
+          <template #default="{ row }">¥{{ formatCurrency(row.originalPrice) }}</template>
+        </el-table-column>
+        <el-table-column prop="flashPrice" label="秒杀价" width="110">
+          <template #default="{ row }">¥{{ formatCurrency(row.flashPrice) }}</template>
+        </el-table-column>
+        <el-table-column prop="flashStock" label="总库存" width="100" />
+        <el-table-column prop="remainingStock" label="剩余库存" width="100" />
+        <el-table-column label="时间范围" min-width="220">
+          <template #default="{ row }">
+            <div>{{ formatTime(row.startTime) }}</div>
+            <div class="text-slate-400">至 {{ formatTime(row.endTime) }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="110">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="320" fixed="right">
+          <template #default="{ row }">
+            <el-button text type="primary" @click="openDetail(row)">查看</el-button>
+            <el-button text type="primary" @click="openEditDialog(row)">编辑</el-button>
+            <el-button v-if="row.status === 'UPCOMING'" text type="success" @click="changeStatus('publish', row)">发布</el-button>
+            <el-button v-if="row.status === 'ACTIVE'" text type="warning" @click="changeStatus('pause', row)">暂停</el-button>
+            <el-button v-if="row.status === 'ENDED'" text type="success" @click="changeStatus('resume', row)">恢复</el-button>
+            <el-button v-if="row.status !== 'ENDED'" text type="danger" @click="changeStatus('end', row)">结束</el-button>
+            <el-button text type="danger" @click="removeFlashSale(row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
+
+      <div class="table-footer">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.size"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="loadFlashSales"
+          @size-change="handlePageSizeChange"
+        />
+      </div>
     </div>
+
+    <el-dialog v-model="formVisible" :title="formMode === 'create' ? '创建秒杀活动' : '编辑秒杀活动'" width="760px">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="关联商品" prop="productId">
+          <el-select v-model="form.productId" filterable :disabled="formMode === 'edit'" placeholder="请选择商品">
+            <el-option v-for="item in productOptions" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="秒杀价格" prop="flashPrice">
+              <el-input-number v-model="form.flashPrice" :min="0.01" :precision="2" class="w-full" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="秒杀库存" prop="flashStock">
+              <el-input-number v-model="form.flashStock" :min="1" class="w-full" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="开始时间" prop="startTime">
+          <el-date-picker v-model="form.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" class="w-full" />
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endTime">
+          <el-date-picker v-model="form.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" class="w-full" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="formVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="submitForm">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="detailVisible" title="秒杀详情" width="760px">
+      <div v-if="currentItem" class="detail-layout">
+        <SafeImage :src="currentItem.productImageUrl" :alt="currentItem.productName" wrapper-class="detail-image" img-class="detail-image" />
+        <div class="detail-content">
+          <h3>{{ currentItem.productName }}</h3>
+          <div class="price-line">
+            <span class="flash-price">¥{{ formatCurrency(currentItem.flashPrice) }}</span>
+            <span class="origin-price">¥{{ formatCurrency(currentItem.originalPrice) }}</span>
+          </div>
+          <div class="detail-grid">
+            <div><span>活动状态：</span>{{ getStatusText(currentItem.status) }}</div>
+            <div><span>总库存：</span>{{ currentItem.flashStock }}</div>
+            <div><span>剩余库存：</span>{{ currentItem.remainingStock }}</div>
+            <div><span>限购：</span>{{ currentItem.limitPerUser }} 件</div>
+            <div><span>开始时间：</span>{{ formatTime(currentItem.startTime) }}</div>
+            <div><span>结束时间：</span>{{ formatTime(currentItem.endTime) }}</div>
+          </div>
+          <el-progress :percentage="getStockRate(currentItem)" :stroke-width="10" class="mt-5" />
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="detailVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import dayjs from 'dayjs'
+import { flashsaleApi } from '@/api/modules/flashsale'
+import { adminApi } from '@/api/modules/admin'
+import type { FlashSale } from '@/types/api'
+import SafeImage from '@/components/common/SafeImage.vue'
+import type { AdminFlashSaleStats, AdminProductRow } from '@/types/admin'
+
+const loading = ref(false)
+const saving = ref(false)
+const formVisible = ref(false)
+const detailVisible = ref(false)
+const formMode = ref<'create' | 'edit'>('create')
+const formRef = ref<FormInstance>()
+const flashSales = ref<FlashSale[]>([])
+const currentItem = ref<FlashSale | null>(null)
+const productOptions = ref<AdminProductRow[]>([])
+
+const query = reactive({
+  keyword: '',
+  status: '',
+})
+
+const pagination = reactive({
+  page: 1,
+  size: 10,
+  total: 0,
+})
+
+const stats = reactive<AdminFlashSaleStats>({
+  totalFlashSales: 0,
+  activeFlashSales: 0,
+  upcomingFlashSales: 0,
+  endedFlashSales: 0,
+})
+
+const form = reactive({
+  id: 0,
+  productId: undefined as number | undefined,
+  flashPrice: 0.01,
+  flashStock: 1,
+  startTime: '',
+  endTime: '',
+})
+
+const rules: FormRules = {
+  productId: [{ required: true, message: '请选择商品', trigger: 'change' }],
+  flashPrice: [{ required: true, message: '请输入秒杀价格', trigger: 'change' }],
+  flashStock: [{ required: true, message: '请输入秒杀库存', trigger: 'change' }],
+  startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
+  endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
+}
+
+const displayFlashSales = computed(() => {
+  if (!query.keyword) return flashSales.value
+  return flashSales.value.filter((item) => item.productName.toLowerCase().includes(query.keyword.toLowerCase()))
+})
+
+const formatCurrency = (value: number) => Number(value || 0).toFixed(2)
+const formatTime = (value: string) => dayjs(value).format('YYYY-MM-DD HH:mm:ss')
+
+const getStatusText = (status: string) => {
+  const map: Record<string, string> = {
+    UPCOMING: '即将开始',
+    ACTIVE: '进行中',
+    ENDED: '已结束',
+  }
+  return map[status] || status
+}
+
+const getStatusType = (status: string) => {
+  const map: Record<string, string> = {
+    UPCOMING: 'warning',
+    ACTIVE: 'danger',
+    ENDED: 'info',
+  }
+  return map[status] || 'info'
+}
+
+const getStockRate = (item: FlashSale) => {
+  if (!item.flashStock) return 0
+  return Math.round((item.remainingStock / item.flashStock) * 100)
+}
+
+const resetForm = () => {
+  form.id = 0
+  form.productId = undefined
+  form.flashPrice = 0.01
+  form.flashStock = 1
+  form.startTime = ''
+  form.endTime = ''
+}
+
+const loadStats = async () => {
+  const res = await adminApi.getFlashSaleStats()
+  Object.assign(stats, res.data)
+}
+
+const loadProducts = async () => {
+  const res = await adminApi.getProducts({ page: 1, size: 100 })
+  productOptions.value = res.data.products.filter((item) => item.status === 1)
+}
+
+const loadFlashSales = async () => {
+  loading.value = true
+  try {
+    const res = await flashsaleApi.getList({
+      page: pagination.page - 1,
+      size: pagination.size,
+      status: query.status || undefined,
+    })
+    flashSales.value = res.data.content
+    pagination.total = res.data.totalElements
+  } finally {
+    loading.value = false
+  }
+}
+
+const openCreateDialog = () => {
+  resetForm()
+  formMode.value = 'create'
+  formVisible.value = true
+}
+
+const openEditDialog = (row: FlashSale) => {
+  formMode.value = 'edit'
+  form.id = row.id
+  form.productId = row.productId
+  form.flashPrice = row.flashPrice
+  form.flashStock = row.flashStock
+  form.startTime = row.startTime
+  form.endTime = row.endTime
+  formVisible.value = true
+}
+
+const openDetail = (row: FlashSale) => {
+  currentItem.value = row
+  detailVisible.value = true
+}
+
+const submitForm = async () => {
+  if (!formRef.value) return
+
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+
+    saving.value = true
+    try {
+      const payload = {
+        productId: form.productId!,
+        flashPrice: form.flashPrice,
+        flashStock: form.flashStock,
+        startTime: form.startTime,
+        endTime: form.endTime,
+      }
+
+      if (formMode.value === 'create') {
+        await flashsaleApi.create(payload)
+        ElMessage.success('秒杀活动创建成功')
+      } else {
+        await flashsaleApi.update(form.id, {
+          flashPrice: form.flashPrice,
+          flashStock: form.flashStock,
+          startTime: form.startTime,
+          endTime: form.endTime,
+        })
+        ElMessage.success('秒杀活动更新成功')
+      }
+
+      formVisible.value = false
+      await reloadData()
+    } finally {
+      saving.value = false
+    }
+  })
+}
+
+const changeStatus = async (action: 'publish' | 'pause' | 'resume' | 'end', row: FlashSale) => {
+  const actionTextMap = {
+    publish: '发布',
+    pause: '暂停',
+    resume: '恢复',
+    end: '结束',
+  }
+  await ElMessageBox.confirm(`确定要${actionTextMap[action]}活动“${row.productName}”吗？`, '状态变更确认', {
+    type: 'warning',
+  })
+
+  if (action === 'publish') await flashsaleApi.publish(row.id)
+  if (action === 'pause') await flashsaleApi.pause(row.id)
+  if (action === 'resume') await flashsaleApi.resume(row.id)
+  if (action === 'end') await flashsaleApi.end(row.id)
+
+  ElMessage.success(`活动已${actionTextMap[action]}`)
+  await reloadData()
+}
+
+const removeFlashSale = async (row: FlashSale) => {
+  await ElMessageBox.confirm(`确定删除活动“${row.productName}”吗？`, '删除确认', {
+    type: 'warning',
+  })
+  await flashsaleApi.delete(row.id)
+  ElMessage.success('活动已删除')
+  await reloadData()
+}
+
+const handleSearch = () => {
+  pagination.page = 1
+  loadFlashSales()
+}
+
+const handleReset = () => {
+  query.keyword = ''
+  query.status = ''
+  handleSearch()
+}
+
+const handlePageSizeChange = () => {
+  pagination.page = 1
+  loadFlashSales()
+}
+
+const reloadData = async () => {
+  await Promise.all([loadStats(), loadProducts(), loadFlashSales()])
+}
+
+onMounted(() => {
+  reloadData()
+})
 </script>
 
 <style scoped lang="scss">
-.admin-flashsales {
-  .page-header {
-    @apply flex justify-between items-center mb-6;
-    
-    .page-title {
-      @apply text-2xl font-bold;
-    }
+.page-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+.page-title {
+  @apply text-2xl font-bold text-slate-900;
+}
+
+.page-subtitle {
+  @apply text-sm text-slate-500 mt-1;
+}
+
+.page-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.mini-stat {
+  @apply rounded-xl text-white p-5 shadow-sm;
+
+  &.purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
+  &.red { background: linear-gradient(135deg, #ef4444, #dc2626); }
+  &.orange { background: linear-gradient(135deg, #f59e0b, #ea580c); }
+  &.gray { background: linear-gradient(135deg, #64748b, #475569); }
+
+  &__value { @apply text-3xl font-bold; }
+  &__label { @apply text-sm opacity-90 mt-2; }
+}
+
+.panel-card {
+  @apply bg-white rounded-xl shadow-sm p-5;
+}
+
+.filter-card {
+  display: grid;
+  grid-template-columns: 1.4fr 180px 100px 100px;
+  gap: 12px;
+}
+
+.product-cell {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.product-image,
+.detail-image {
+  width: 56px;
+  height: 56px;
+  object-fit: cover;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+}
+
+.detail-image {
+  width: 220px;
+  height: 220px;
+}
+
+.product-name {
+  @apply font-medium text-slate-900;
+}
+
+.product-meta {
+  @apply text-xs text-slate-400 mt-1;
+}
+
+.table-footer {
+  @apply flex justify-end mt-4;
+}
+
+.detail-layout {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  gap: 20px;
+}
+
+.price-line {
+  @apply mt-4 mb-5 flex items-end gap-3;
+}
+
+.flash-price {
+  @apply text-3xl font-bold text-rose-500;
+}
+
+.origin-price {
+  @apply text-lg text-slate-400 line-through;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  color: #475569;
+}
+
+.detail-grid span {
+  color: #94a3b8;
+}
+
+@media (max-width: 1024px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-  
-  .content-card {
-    @apply bg-white rounded-lg shadow-sm p-6;
+
+  .filter-card {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .detail-layout {
+    grid-template-columns: 1fr;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/flash-sale-frontend/src/pages/admin/monitor.vue b/flash-sale-frontend/src/pages/admin/monitor.vue
new file mode 100644
index 0000000..2b45b7c
--- /dev/null
+++ b/flash-sale-frontend/src/pages/admin/monitor.vue
@@ -0,0 +1,514 @@
+<template>
+  <div class="admin-monitor page-shell">
+    <div class="page-header">
+      <div>
+        <h2 class="page-title">系统监控</h2>
+        <p class="page-subtitle">复刻 JSP 监控页的指标卡、服务状态、性能趋势与实时日志</p>
+      </div>
+      <div class="page-actions">
+        <el-switch v-model="autoRefresh" inline-prompt active-text="自动刷新" inactive-text="手动" @change="toggleAutoRefresh" />
+        <el-button @click="clearLogs">清空日志</el-button>
+        <el-button type="primary" @click="refreshAll">
+          <el-icon><Refresh /></el-icon>
+          刷新全部
+        </el-button>
+      </div>
+    </div>
+
+    <div class="stats-grid">
+      <div class="mini-stat blue">
+        <div class="mini-stat__value">{{ systemStatus.cpuUsage }}%</div>
+        <div class="mini-stat__label">CPU 使用率</div>
+      </div>
+      <div class="mini-stat green">
+        <div class="mini-stat__value">{{ systemStatus.memoryUsage }}%</div>
+        <div class="mini-stat__label">内存使用率</div>
+      </div>
+      <div class="mini-stat orange">
+        <div class="mini-stat__value">{{ userStats.onlineUsers }}</div>
+        <div class="mini-stat__label">在线用户</div>
+      </div>
+      <div class="mini-stat purple">
+        <div class="mini-stat__value">{{ systemStatus.requestCountToday || 0 }}</div>
+        <div class="mini-stat__label">今日请求量</div>
+      </div>
+    </div>
+
+    <div class="content-grid">
+      <div class="panel-card">
+        <div class="panel-header">
+          <div>
+            <h3 class="panel-title">服务状态</h3>
+            <p class="panel-subtitle">JSP 监控页中的服务检查模块</p>
+          </div>
+          <el-button text type="primary" @click="refreshAll">重新检查</el-button>
+        </div>
+        <div class="service-list">
+          <div class="service-row">
+            <div class="service-name"><span class="dot success"></span>应用服务</div>
+            <el-tag type="success">运行中</el-tag>
+          </div>
+          <div class="service-row">
+            <div class="service-name"><span :class="['dot', redisHealthy ? 'success' : 'danger']"></span>Redis 集群</div>
+            <el-tag :type="redisHealthy ? 'success' : 'danger'">{{ redisHealthy ? '正常' : '异常' }}</el-tag>
+          </div>
+          <div class="service-row">
+            <div class="service-name"><span :class="['dot', mysqlHealthy ? 'success' : 'danger']"></span>MySQL 服务</div>
+            <el-tag :type="mysqlHealthy ? 'success' : 'danger'">{{ mysqlHealthy ? '正常' : '异常' }}</el-tag>
+          </div>
+        </div>
+      </div>
+
+      <div class="panel-card">
+        <div class="panel-header">
+          <div>
+            <h3 class="panel-title">性能趋势</h3>
+            <p class="panel-subtitle">CPU / 内存 / 磁盘曲线</p>
+          </div>
+        </div>
+        <div ref="chartRef" class="chart-container"></div>
+      </div>
+    </div>
+
+    <div class="content-grid">
+      <div class="panel-card">
+        <div class="panel-header">
+          <div>
+            <h3 class="panel-title">Redis 节点</h3>
+            <p class="panel-subtitle">来源于 `/api/admin/monitor/redis`</p>
+          </div>
+        </div>
+        <el-table v-loading="loading" :data="redisNodes" stripe>
+          <el-table-column prop="node" label="节点" min-width="180" />
+          <el-table-column prop="status" label="状态" width="100">
+            <template #default="{ row }">
+              <el-tag :type="row.status === '正常' ? 'success' : 'danger'">{{ row.status }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="memory" label="内存" width="110" />
+          <el-table-column prop="connections" label="连接数" width="110" />
+        </el-table>
+      </div>
+
+      <div class="panel-card">
+        <div class="panel-header">
+          <div>
+            <h3 class="panel-title">秒杀业务监控</h3>
+            <p class="panel-subtitle">承接 JSP 中秒杀活动监控区域</p>
+          </div>
+        </div>
+        <div class="business-metrics">
+          <div class="business-item">
+            <span>活动总数</span>
+            <strong>{{ flashSaleStats.totalFlashSales }}</strong>
+          </div>
+          <div class="business-item">
+            <span>进行中</span>
+            <strong>{{ flashSaleStats.activeFlashSales }}</strong>
+          </div>
+          <div class="business-item">
+            <span>即将开始</span>
+            <strong>{{ flashSaleStats.upcomingFlashSales }}</strong>
+          </div>
+          <div class="business-item">
+            <span>已结束</span>
+            <strong>{{ flashSaleStats.endedFlashSales }}</strong>
+          </div>
+        </div>
+
+        <div class="alerts-box">
+          <el-alert
+            :title="systemAlert.title"
+            :description="systemAlert.description"
+            :type="systemAlert.type"
+            show-icon
+            :closable="false"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="panel-card">
+      <div class="panel-header">
+        <div>
+          <h3 class="panel-title">实时日志</h3>
+          <p class="panel-subtitle">模拟 JSP 监控页中的滚动日志面板</p>
+        </div>
+      </div>
+      <div class="log-list">
+        <div v-for="item in logs" :key="item.id" class="log-row">
+          <span class="log-time">{{ item.time }}</span>
+          <el-tag size="small" :type="item.level === 'error' ? 'danger' : item.level === 'warn' ? 'warning' : 'success'">{{ item.level.toUpperCase() }}</el-tag>
+          <span class="log-message">{{ item.message }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
+import * as echarts from 'echarts'
+import dayjs from 'dayjs'
+import { adminApi } from '@/api/modules/admin'
+import type { AdminFlashSaleStats, AdminUserStats, MonitorSystemStatus, RedisNodeStatus } from '@/types/admin'
+
+interface LogEntry {
+  id: number
+  time: string
+  level: 'info' | 'warn' | 'error'
+  message: string
+}
+
+const loading = ref(false)
+const autoRefresh = ref(true)
+const redisNodes = ref<RedisNodeStatus[]>([])
+const logs = ref<LogEntry[]>([])
+
+const systemStatus = reactive<MonitorSystemStatus>({
+  status: '未知',
+  cpuUsage: 0,
+  memoryUsage: 0,
+  diskUsage: 0,
+})
+
+const flashSaleStats = reactive<AdminFlashSaleStats>({
+  totalFlashSales: 0,
+  activeFlashSales: 0,
+  upcomingFlashSales: 0,
+  endedFlashSales: 0,
+})
+
+const userStats = reactive<AdminUserStats>({
+  totalUsers: 0,
+  activeUsers: 0,
+  newUsers: 0,
+  onlineUsers: 0,
+})
+
+const chartRef = ref<HTMLElement | null>(null)
+let chart: echarts.ECharts | null = null
+let timer: number | null = null
+const history = reactive({
+  time: [] as string[],
+  cpu: [] as number[],
+  memory: [] as number[],
+  disk: [] as number[],
+})
+
+const redisHealthy = computed(() => systemStatus.redisStatus === '正常' || (redisNodes.value.length > 0 && redisNodes.value.every((item) => item.status === '正常')))
+const mysqlHealthy = computed(() => systemStatus.dbStatus === '正常')
+
+const systemAlert = computed(() => {
+  if (systemStatus.cpuUsage > 85 || systemStatus.memoryUsage > 85) {
+    return {
+      type: 'warning' as const,
+      title: '资源占用偏高',
+      description: '请重点关注 CPU 或内存使用率，必要时扩容或检查热点接口。',
+    }
+  }
+
+  return {
+    type: 'success' as const,
+    title: '系统运行正常',
+    description: '当前各关键服务健康，未发现明显异常。',
+  }
+})
+
+const appendLog = (level: LogEntry['level'], message: string) => {
+  logs.value.unshift({
+    id: Date.now() + Math.random(),
+    time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+    level,
+    message,
+  })
+  logs.value = logs.value.slice(0, 16)
+}
+
+const renderChart = () => {
+  if (!chartRef.value) return
+  if (!chart) {
+    chart = echarts.init(chartRef.value)
+  }
+
+  chart.setOption({
+    tooltip: { trigger: 'axis' },
+    legend: { top: 0 },
+    grid: { left: 24, right: 24, top: 40, bottom: 24, containLabel: true },
+    xAxis: { type: 'category', data: history.time },
+    yAxis: { type: 'value', max: 100 },
+    series: [
+      { name: 'CPU', type: 'line', smooth: true, data: history.cpu },
+      { name: '内存', type: 'line', smooth: true, data: history.memory },
+      { name: '磁盘', type: 'line', smooth: true, data: history.disk },
+    ],
+  })
+}
+
+const pushHistory = () => {
+  history.time.push(dayjs().format('HH:mm:ss'))
+  history.cpu.push(systemStatus.cpuUsage)
+  history.memory.push(systemStatus.memoryUsage)
+  history.disk.push(systemStatus.diskUsage)
+
+  if (history.time.length > 12) {
+    history.time.shift()
+    history.cpu.shift()
+    history.memory.shift()
+    history.disk.shift()
+  }
+}
+
+const loadMetrics = async () => {
+  loading.value = true
+  try {
+    const [systemRes, redisRes, flashSaleRes, userRes] = await Promise.all([
+      adminApi.getSystemStatus(),
+      adminApi.getRedisStatus(),
+      adminApi.getFlashSaleStats(),
+      adminApi.getUserStats(),
+    ])
+
+    Object.assign(systemStatus, systemRes.data)
+    Object.assign(flashSaleStats, flashSaleRes.data)
+    Object.assign(userStats, userRes.data)
+    redisNodes.value = redisRes.data
+
+    pushHistory()
+    await nextTick()
+    renderChart()
+
+    appendLog('info', `系统状态刷新完成，CPU ${systemStatus.cpuUsage}% / 内存 ${systemStatus.memoryUsage}% / 今日请求 ${systemStatus.requestCountToday || 0}`)
+    if (!redisHealthy.value) {
+      appendLog('warn', '检测到 Redis 节点存在异常，请尽快排查')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+const refreshAll = async () => {
+  await loadMetrics()
+}
+
+const clearLogs = () => {
+  logs.value = []
+  appendLog('info', '日志面板已清空')
+}
+
+const setupTimer = () => {
+  if (timer) {
+    window.clearInterval(timer)
+    timer = null
+  }
+
+  if (autoRefresh.value) {
+    timer = window.setInterval(() => {
+      loadMetrics()
+    }, 10000)
+  }
+}
+
+const toggleAutoRefresh = () => {
+  setupTimer()
+  appendLog('info', autoRefresh.value ? '已开启自动刷新' : '已切换为手动刷新')
+}
+
+const handleResize = () => {
+  chart?.resize()
+}
+
+onMounted(() => {
+  appendLog('info', '监控模块已启动')
+  loadMetrics()
+  setupTimer()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  if (timer) {
+    window.clearInterval(timer)
+  }
+  window.removeEventListener('resize', handleResize)
+  chart?.dispose()
+})
+</script>
+
+<style scoped lang="scss">
+.page-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+.page-title {
+  @apply text-2xl font-bold text-slate-900;
+}
+
+.page-subtitle {
+  @apply text-sm text-slate-500 mt-1;
+}
+
+.page-actions {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.mini-stat {
+  @apply rounded-xl text-white p-5 shadow-sm;
+
+  &.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
+  &.green { background: linear-gradient(135deg, #10b981, #059669); }
+  &.orange { background: linear-gradient(135deg, #f59e0b, #ea580c); }
+  &.purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
+
+  &__value { @apply text-3xl font-bold; }
+  &__label { @apply text-sm opacity-90 mt-2; }
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  gap: 20px;
+}
+
+.panel-card {
+  @apply bg-white rounded-xl shadow-sm p-5;
+}
+
+.panel-header {
+  @apply flex items-center justify-between mb-4 gap-4;
+}
+
+.panel-title {
+  @apply text-lg font-semibold text-slate-900;
+}
+
+.panel-subtitle {
+  @apply text-sm text-slate-500 mt-1;
+}
+
+.service-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.service-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 16px;
+  background: #f8fafc;
+  border-radius: 14px;
+}
+
+.service-name {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #334155;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.dot.success { background: #10b981; }
+.dot.danger { background: #ef4444; }
+
+.chart-container {
+  height: 320px;
+}
+
+.business-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.business-item {
+  background: #f8fafc;
+  border-radius: 14px;
+  padding: 16px;
+  display: flex;
+  justify-content: space-between;
+  color: #475569;
+}
+
+.business-item strong {
+  color: #0f172a;
+}
+
+.alerts-box {
+  @apply mt-5;
+}
+
+.log-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 320px;
+  overflow: auto;
+}
+
+.log-row {
+  display: grid;
+  grid-template-columns: 160px 90px 1fr;
+  gap: 12px;
+  align-items: center;
+  padding: 12px 14px;
+  background: #0f172a;
+  color: #e2e8f0;
+  border-radius: 12px;
+}
+
+.log-time {
+  color: #94a3b8;
+  font-size: 12px;
+}
+
+.log-message {
+  word-break: break-word;
+}
+
+@media (max-width: 1024px) {
+  .stats-grid,
+  .content-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .stats-grid,
+  .content-grid,
+  .business-metrics {
+    grid-template-columns: 1fr;
+  }
+
+  .page-header {
+    flex-direction: column;
+  }
+
+  .log-row {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/flash-sale-frontend/src/pages/admin/orders.vue b/flash-sale-frontend/src/pages/admin/orders.vue
index 6d8ff0f..a4a1aaa 100644
--- a/flash-sale-frontend/src/pages/admin/orders.vue
+++ b/flash-sale-frontend/src/pages/admin/orders.vue
@@ -1,41 +1,416 @@
 <template>
-  <div class="admin-orders">
+  <div class="admin-orders page-shell">
     <div class="page-header">
-      <h2 class="page-title">订单管理</h2>
+      <div>
+        <h2 class="page-title">订单管理</h2>
+        <p class="page-subtitle">延续 JSP 后台的统计卡片、筛选表格与订单详情操作</p>
+      </div>
+      <div class="page-actions">
+        <el-button @click="reloadData">
+          <el-icon><Refresh /></el-icon>
+          刷新
+        </el-button>
+        <el-button type="primary" @click="migrateItems">迁移旧订单明细</el-button>
+        <el-button @click="exportCsv">
+          <el-icon><Download /></el-icon>
+          导出
+        </el-button>
+      </div>
     </div>
-    
-    <div class="content-card">
-      <el-table :data="[]" stripe>
-        <el-table-column prop="orderNo" label="订单号" />
-        <el-table-column prop="username" label="用户" />
-        <el-table-column prop="totalAmount" label="金额" />
-        <el-table-column prop="status" label="状态" />
-        <el-table-column prop="createdAt" label="创建时间" />
-        <el-table-column label="操作" width="150">
-          <template #default>
-            <el-button text type="primary" size="small">详情</el-button>
+
+    <div class="stats-grid">
+      <div class="mini-stat blue">
+        <div class="mini-stat__value">{{ stats.totalOrders }}</div>
+        <div class="mini-stat__label">订单总数</div>
+      </div>
+      <div class="mini-stat orange">
+        <div class="mini-stat__value">{{ stats.pendingOrders }}</div>
+        <div class="mini-stat__label">待处理</div>
+      </div>
+      <div class="mini-stat green">
+        <div class="mini-stat__value">{{ stats.paidOrders }}</div>
+        <div class="mini-stat__label">已支付</div>
+      </div>
+      <div class="mini-stat purple">
+        <div class="mini-stat__value">¥{{ formatCurrency(stats.totalAmount) }}</div>
+        <div class="mini-stat__label">成交总额</div>
+      </div>
+    </div>
+
+    <div class="panel-card filter-card">
+      <el-input v-model="query.keyword" clearable placeholder="搜索订单号 / 用户 / 商品" @keyup.enter="loadOrders">
+        <template #prefix><el-icon><Search /></el-icon></template>
+      </el-input>
+      <el-select v-model="query.status" clearable placeholder="全部状态" @change="handleSearch">
+        <el-option label="待支付" value="1" />
+        <el-option label="已支付" value="2" />
+        <el-option label="已发货" value="3" />
+        <el-option label="已完成" value="4" />
+        <el-option label="已取消" value="5" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">搜索</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <div class="panel-card">
+      <el-table v-loading="loading" :data="displayOrders" stripe>
+        <el-table-column prop="orderNo" label="订单号" min-width="120" />
+        <el-table-column prop="username" label="用户" min-width="100" />
+        <el-table-column prop="productName" label="商品" min-width="160" show-overflow-tooltip />
+        <el-table-column prop="quantity" label="数量" width="80" />
+        <el-table-column prop="totalAmount" label="金额" width="110">
+          <template #default="{ row }">¥{{ formatCurrency(row.totalAmount) }}</template>
+        </el-table-column>
+        <el-table-column label="类型" width="100">
+          <template #default="{ row }">
+            <el-tag :type="row.isFlashSale ? 'danger' : 'info'">{{ row.isFlashSale ? '秒杀订单' : '普通订单' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" min-width="170">
+          <template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="220" fixed="right">
+          <template #default="{ row }">
+            <el-button text type="primary" @click="openDetail(row.id)">详情</el-button>
+            <el-button v-if="row.status === 'PAID'" text type="success" @click="shipOrder(row)">发货</el-button>
+            <el-button v-if="row.status === 'PENDING' || row.status === 'PAID'" text type="danger" @click="cancelOrder(row)">取消</el-button>
           </template>
         </el-table-column>
       </el-table>
+
+      <div class="table-footer">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.size"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="loadOrders"
+          @size-change="handlePageSizeChange"
+        />
+      </div>
     </div>
+
+    <el-dialog v-model="detailVisible" title="订单详情" width="760px">
+      <div v-if="currentOrder" class="detail-shell">
+        <div class="detail-header">
+          <div>
+            <h3>{{ currentOrder.orderNo }}</h3>
+            <p>{{ currentOrder.username }} · {{ formatTime(currentOrder.createdAt) }}</p>
+          </div>
+          <el-tag :type="getStatusType(currentOrder.status)">{{ getStatusText(currentOrder.status) }}</el-tag>
+        </div>
+
+        <div class="item-card" v-for="item in currentOrder.items" :key="item.id">
+          <SafeImage :src="item.productImage" :alt="item.productName" wrapper-class="item-image" img-class="item-image" />
+          <div class="item-info">
+            <div class="item-name">{{ item.productName }}</div>
+            <div class="item-meta">¥{{ formatCurrency(item.price) }} × {{ item.quantity }}</div>
+          </div>
+          <div class="item-total">¥{{ formatCurrency(item.subtotal) }}</div>
+        </div>
+
+        <div class="detail-grid">
+          <div><span>订单编号：</span>{{ currentOrder.orderNo }}</div>
+          <div><span>支付方式：</span>{{ currentOrder.paymentMethod || '未支付' }}</div>
+          <div><span>创建时间：</span>{{ formatTime(currentOrder.createdAt) }}</div>
+          <div><span>更新时间：</span>{{ formatTime(currentOrder.updatedAt) }}</div>
+          <div><span>实付金额：</span>¥{{ formatCurrency(currentOrder.paymentAmount) }}</div>
+          <div><span>订单状态：</span>{{ getStatusText(currentOrder.status) }}</div>
+          <div v-if="currentOrder.paidAt"><span>支付时间：</span>{{ formatTime(currentOrder.paidAt) }}</div>
+          <div v-if="currentOrder.shippedAt"><span>发货时间：</span>{{ formatTime(currentOrder.shippedAt) }}</div>
+          <div v-if="currentOrder.completedAt"><span>完成时间：</span>{{ formatTime(currentOrder.completedAt) }}</div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import dayjs from 'dayjs'
+import { adminApi } from '@/api/modules/admin'
+import { orderApi } from '@/api/modules/order'
+import type { Order } from '@/types/api'
+import SafeImage from '@/components/common/SafeImage.vue'
+import type { AdminOrderRow, AdminOrderStats } from '@/types/admin'
+
+const loading = ref(false)
+const detailVisible = ref(false)
+const orders = ref<AdminOrderRow[]>([])
+const currentOrder = ref<Order | null>(null)
+
+const query = reactive({
+  keyword: '',
+  status: '',
+})
+
+const pagination = reactive({
+  page: 1,
+  size: 10,
+  total: 0,
+})
+
+const stats = reactive<AdminOrderStats>({
+  totalOrders: 0,
+  paidOrders: 0,
+  pendingOrders: 0,
+  completedOrders: 0,
+  cancelledOrders: 0,
+  totalAmount: 0,
+})
+
+const displayOrders = computed(() => {
+  if (!query.keyword) return orders.value
+  const keyword = query.keyword.toLowerCase()
+  return orders.value.filter((item) => [item.orderNo, item.username, item.productName].some((field) => field.toLowerCase().includes(keyword)))
+})
+
+const formatTime = (value: string) => dayjs(value).format('YYYY-MM-DD HH:mm:ss')
+const formatCurrency = (value: number) => Number(value || 0).toFixed(2)
+
+const getStatusText = (status: string) => {
+  const map: Record<string, string> = {
+    PENDING: '待支付',
+    PAID: '已支付',
+    SHIPPED: '已发货',
+    COMPLETED: '已完成',
+    CANCELLED: '已取消',
+  }
+  return map[status] || status
+}
+
+const getStatusType = (status: string) => {
+  const map: Record<string, string> = {
+    PENDING: 'warning',
+    PAID: 'primary',
+    SHIPPED: 'success',
+    COMPLETED: 'success',
+    CANCELLED: 'info',
+  }
+  return map[status] || 'info'
+}
+
+const loadStats = async () => {
+  const res = await adminApi.getOrderStats()
+  Object.assign(stats, res.data)
+}
+
+const loadOrders = async () => {
+  loading.value = true
+  try {
+    const res = await adminApi.getOrders({
+      page: pagination.page,
+      size: pagination.size,
+      status: query.status || undefined,
+      keyword: query.keyword || undefined,
+    })
+    orders.value = res.data.orders
+    pagination.total = res.data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const openDetail = async (id: number) => {
+  const res = await orderApi.getDetail(id)
+  currentOrder.value = res.data
+  detailVisible.value = true
+}
+
+const shipOrder = async (row: AdminOrderRow) => {
+  await ElMessageBox.confirm(`确定将订单 ${row.orderNo} 标记为已发货吗？`, '发货确认', { type: 'warning' })
+  await orderApi.ship(row.id)
+  ElMessage.success('订单已发货')
+  await reloadData()
+}
+
+const cancelOrder = async (row: AdminOrderRow) => {
+  await ElMessageBox.confirm(`确定取消订单 ${row.orderNo} 吗？`, '取消确认', { type: 'warning' })
+  await orderApi.updateStatus(row.id, 5, '管理后台取消订单')
+  ElMessage.success('订单已取消')
+  await reloadData()
+}
+
+const handleSearch = () => {
+  pagination.page = 1
+  loadOrders()
+}
+
+const handleReset = () => {
+  query.keyword = ''
+  query.status = ''
+  handleSearch()
+}
+
+const handlePageSizeChange = () => {
+  pagination.page = 1
+  loadOrders()
+}
+
+const exportCsv = () => {
+  const rows = displayOrders.value.map((item) => [item.orderNo, item.username, item.productName, item.quantity, item.totalAmount, getStatusText(item.status), formatTime(item.createdAt)])
+  const header = ['订单号', '用户', '商品', '数量', '金额', '状态', '创建时间']
+  const csv = [header, ...rows].map((row) => row.join(',')).join('\n')
+  const blob = new Blob([`\ufeff${csv}`], { type: 'text/csv;charset=utf-8;' })
+  const link = document.createElement('a')
+  link.href = URL.createObjectURL(blob)
+  link.download = `orders-${dayjs().format('YYYYMMDD-HHmmss')}.csv`
+  link.click()
+  URL.revokeObjectURL(link.href)
+}
+
+const migrateItems = async () => {
+  const res = await adminApi.migrateLegacyOrderItems()
+  ElMessage.success('迁移完成：迁移 ' + res.data.migrated + ' 条，跳过 ' + res.data.skipped + ' 条')
+  reloadData()
+}
+
+const reloadData = async () => {
+  await Promise.all([loadStats(), loadOrders()])
+}
+
+onMounted(() => {
+  reloadData()
+})
 </script>
 
 <style scoped lang="scss">
-.admin-orders {
-  .page-header {
-    @apply flex justify-between items-center mb-6;
-    
-    .page-title {
-      @apply text-2xl font-bold;
-    }
+.page-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+.page-title {
+  @apply text-2xl font-bold text-slate-900;
+}
+
+.page-subtitle {
+  @apply text-sm text-slate-500 mt-1;
+}
+
+.page-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.mini-stat {
+  @apply rounded-xl text-white p-5 shadow-sm;
+
+  &.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
+  &.orange { background: linear-gradient(135deg, #f59e0b, #ea580c); }
+  &.green { background: linear-gradient(135deg, #10b981, #059669); }
+  &.purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
+
+  &__value { @apply text-3xl font-bold; }
+  &__label { @apply text-sm opacity-90 mt-2; }
+}
+
+.panel-card {
+  @apply bg-white rounded-xl shadow-sm p-5;
+}
+
+.filter-card {
+  display: grid;
+  grid-template-columns: 1.4fr 180px 100px 100px;
+  gap: 12px;
+}
+
+.table-footer {
+  @apply flex justify-end mt-4;
+}
+
+.detail-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+}
+
+.detail-header h3 {
+  @apply text-xl font-semibold text-slate-900;
+}
+
+.detail-header p {
+  @apply text-sm text-slate-500 mt-1;
+}
+
+.item-card {
+  display: grid;
+  grid-template-columns: 72px 1fr auto;
+  gap: 16px;
+  align-items: center;
+  padding: 16px;
+  background: #f8fafc;
+  border-radius: 16px;
+}
+
+.item-image {
+  width: 72px;
+  height: 72px;
+  object-fit: cover;
+  border-radius: 14px;
+}
+
+.item-name {
+  @apply font-medium text-slate-900;
+}
+
+.item-meta {
+  @apply text-sm text-slate-500 mt-1;
+}
+
+.item-total {
+  @apply text-lg font-semibold text-rose-500;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.detail-grid span {
+  color: #94a3b8;
+}
+
+@media (max-width: 1024px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-  
-  .content-card {
-    @apply bg-white rounded-lg shadow-sm p-6;
+
+  .filter-card {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .item-card {
+    grid-template-columns: 1fr;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/flash-sale-frontend/src/pages/admin/products.vue b/flash-sale-frontend/src/pages/admin/products.vue
index 6e85163..4a25732 100644
--- a/flash-sale-frontend/src/pages/admin/products.vue
+++ b/flash-sale-frontend/src/pages/admin/products.vue
@@ -1,46 +1,500 @@
 <template>
-  <div class="admin-products">
+  <div class="admin-products page-shell">
     <div class="page-header">
-      <h2 class="page-title">商品管理</h2>
-      <el-button type="primary">
-        <el-icon class="mr-1"><Plus /></el-icon>
-        添加商品
-      </el-button>
+      <div>
+        <h2 class="page-title">商品管理</h2>
+        <p class="page-subtitle">复刻 JSP 后台的筛选、列表、查看与增改删流程</p>
+      </div>
+      <div class="page-actions">
+        <el-button @click="reloadData">
+          <el-icon><Refresh /></el-icon>
+          刷新
+        </el-button>
+        <el-button type="primary" @click="openCreateDialog">
+          <el-icon><Plus /></el-icon>
+          添加商品
+        </el-button>
+      </div>
     </div>
-    
-    <div class="content-card">
-      <el-table :data="[]" stripe>
+
+    <div class="stats-grid">
+      <div class="mini-stat blue">
+        <div class="mini-stat__value">{{ stats.totalProducts }}</div>
+        <div class="mini-stat__label">商品总数</div>
+      </div>
+      <div class="mini-stat green">
+        <div class="mini-stat__value">{{ stats.activeProducts }}</div>
+        <div class="mini-stat__label">上架商品</div>
+      </div>
+      <div class="mini-stat gray">
+        <div class="mini-stat__value">{{ stats.inactiveProducts }}</div>
+        <div class="mini-stat__label">下架商品</div>
+      </div>
+      <div class="mini-stat orange">
+        <div class="mini-stat__value">{{ stats.lowStockProducts }}</div>
+        <div class="mini-stat__label">低库存商品</div>
+      </div>
+    </div>
+
+    <div class="panel-card filter-card">
+      <el-input
+        v-model="query.keyword"
+        placeholder="搜索商品名称"
+        clearable
+        @keyup.enter="handleSearch"
+      >
+        <template #prefix>
+          <el-icon><Search /></el-icon>
+        </template>
+      </el-input>
+      <el-select v-model="query.category" clearable placeholder="全部分类" @change="handleSearch">
+        <el-option v-for="item in categories" :key="item" :label="item" :value="item" />
+      </el-select>
+      <el-select v-model="query.status" clearable placeholder="全部状态" @change="handleSearch">
+        <el-option label="上架" :value="1" />
+        <el-option label="下架" :value="0" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">搜索</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <div class="panel-card">
+      <el-table v-loading="loading" :data="products" stripe>
         <el-table-column prop="id" label="ID" width="80" />
-        <el-table-column prop="name" label="商品名称" />
-        <el-table-column prop="price" label="价格" />
-        <el-table-column prop="stock" label="库存" />
-        <el-table-column prop="status" label="状态" />
-        <el-table-column label="操作" width="200">
-          <template #default>
-            <el-button text type="primary" size="small">编辑</el-button>
-            <el-button text type="danger" size="small">删除</el-button>
+        <el-table-column label="商品图片" width="100">
+          <template #default="{ row }">
+            <SafeImage :src="row.imageUrl" :alt="row.name" wrapper-class="product-image" img-class="product-image" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="商品名称" min-width="180" show-overflow-tooltip />
+        <el-table-column prop="description" label="商品描述" min-width="220" show-overflow-tooltip />
+        <el-table-column prop="category" label="分类" width="120" />
+        <el-table-column prop="price" label="价格" width="110">
+          <template #default="{ row }">¥{{ formatCurrency(row.price) }}</template>
+        </el-table-column>
+        <el-table-column prop="stock" label="库存" width="90">
+          <template #default="{ row }">
+            <el-tag :type="row.stock > 10 ? 'success' : 'warning'">{{ row.stock }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 1 ? 'success' : 'info'">{{ row.status === 1 ? '上架' : '下架' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" min-width="170">
+          <template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="240" fixed="right">
+          <template #default="{ row }">
+            <el-button text type="primary" @click="openDetail(row.id)">查看</el-button>
+            <el-button text type="primary" @click="openEditDialog(row.id)">编辑</el-button>
+            <el-button text type="danger" @click="removeProduct(row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
+
+      <div class="table-footer">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.size"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="loadProducts"
+          @size-change="handlePageSizeChange"
+        />
+      </div>
     </div>
+
+    <el-dialog v-model="formVisible" :title="formMode === 'create' ? '添加商品' : '编辑商品'" width="720px">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
+        <el-form-item label="商品名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入商品名称" />
+        </el-form-item>
+        <el-form-item label="商品分类" prop="category">
+          <el-select v-model="form.category" placeholder="请选择分类" class="w-full" allow-create filterable default-first-option>
+            <el-option v-for="item in categories" :key="item" :label="item" :value="item" />
+          </el-select>
+        </el-form-item>
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="价格" prop="price">
+              <el-input-number v-model="form.price" :min="0.01" :precision="2" class="w-full" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="库存" prop="stock">
+              <el-input-number v-model="form.stock" :min="0" class="w-full" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio :label="1">上架</el-radio>
+            <el-radio :label="0">下架</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="商品图片" prop="imageUrl">
+          <ImageUpload v-model="form.imageUrl" />
+        </el-form-item>
+        <el-form-item label="商品描述" prop="description">
+          <el-input v-model="form.description" type="textarea" :rows="4" maxlength="500" show-word-limit />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="formVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="submitForm">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="detailVisible" title="商品详情" width="760px">
+      <div v-if="detail" class="detail-layout">
+        <SafeImage :src="detail.imageUrl" :alt="detail.name" wrapper-class="detail-image" img-class="detail-image" />
+        <div class="detail-content">
+          <h3>{{ detail.name }}</h3>
+          <div class="detail-price">¥{{ formatCurrency(detail.price) }}</div>
+          <div class="detail-grid">
+            <div><span>分类：</span>{{ detail.category }}</div>
+            <div><span>库存：</span>{{ detail.stock }}</div>
+            <div><span>状态：</span>{{ detail.status === 1 ? '上架' : '下架' }}</div>
+            <div><span>创建时间：</span>{{ formatTime(detail.createdAt) }}</div>
+            <div><span>更新时间：</span>{{ formatTime(detail.updatedAt || detail.createdAt) }}</div>
+            <div><span>总销量：</span>{{ detail.totalSales || 0 }}</div>
+            <div><span>浏览次数：</span>{{ detail.viewCount || 0 }}</div>
+            <div><span>总收入：</span>¥{{ formatCurrency(detail.totalRevenue || 0) }}</div>
+            <div><span>评分：</span>{{ Number(detail.rating || 0).toFixed(1) }}</div>
+          </div>
+          <div class="detail-description">{{ detail.description || '暂无描述' }}</div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="detailVisible = false">关闭</el-button>
+        <el-button v-if="detail" type="primary" @click="openEditDialog(detail.id)">编辑商品</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import dayjs from 'dayjs'
+import ImageUpload from '@/components/common/ImageUpload.vue'
+import SafeImage from '@/components/common/SafeImage.vue'
+import { adminApi } from '@/api/modules/admin'
+import { productApi } from '@/api/modules/product'
+import type { AdminProductRow, AdminProductStats } from '@/types/admin'
+
+const loading = ref(false)
+const saving = ref(false)
+const formVisible = ref(false)
+const detailVisible = ref(false)
+const formMode = ref<'create' | 'edit'>('create')
+const formRef = ref<FormInstance>()
+const detail = ref<AdminProductRow | null>(null)
+const products = ref<AdminProductRow[]>([])
+const categories = ref<string[]>([])
+
+const query = reactive({
+  keyword: '',
+  category: '',
+  status: '' as number | '',
+})
+
+const pagination = reactive({
+  page: 1,
+  size: 10,
+  total: 0,
+})
+
+const stats = reactive<AdminProductStats>({
+  totalProducts: 0,
+  activeProducts: 0,
+  inactiveProducts: 0,
+  lowStockProducts: 0,
+})
+
+const form = reactive({
+  id: 0,
+  name: '',
+  description: '',
+  category: '',
+  price: 0.01,
+  stock: 0,
+  status: 1,
+  imageUrl: '',
+})
+
+const rules: FormRules = {
+  name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
+  category: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
+  price: [{ required: true, message: '请输入商品价格', trigger: 'change' }],
+}
+
+const formatTime = (value: string) => dayjs(value).format('YYYY-MM-DD HH:mm:ss')
+const formatCurrency = (value: number) => Number(value || 0).toFixed(2)
+
+const resetForm = () => {
+  form.id = 0
+  form.name = ''
+  form.description = ''
+  form.category = ''
+  form.price = 0.01
+  form.stock = 0
+  form.status = 1
+  form.imageUrl = ''
+}
+
+const loadStats = async () => {
+  const res = await adminApi.getProductStats()
+  Object.assign(stats, res.data)
+}
+
+const loadCategories = async () => {
+  const res = await productApi.getCategories()
+  categories.value = res.success ? res.data : []
+}
+
+const loadProducts = async () => {
+  loading.value = true
+  try {
+    const res = await adminApi.getProducts({
+      page: pagination.page,
+      size: pagination.size,
+      keyword: query.keyword || undefined,
+      status: query.status === '' ? undefined : query.status,
+      category: query.category || undefined,
+    })
+    products.value = res.data.products
+    pagination.total = res.data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const loadProductDetail = async (id: number) => {
+  const res = await adminApi.getProduct(id)
+  return res.data
+}
+
+const openCreateDialog = () => {
+  resetForm()
+  formMode.value = 'create'
+  formVisible.value = true
+}
+
+const openEditDialog = async (id: number) => {
+  const product = await loadProductDetail(id)
+  detail.value = product
+  formMode.value = 'edit'
+  form.id = product.id
+  form.name = product.name
+  form.description = product.description
+  form.category = product.category
+  form.price = product.price
+  form.stock = product.stock
+  form.status = product.status
+  form.imageUrl = product.imageUrl
+  formVisible.value = true
+  detailVisible.value = false
+}
+
+const openDetail = async (id: number) => {
+  detail.value = await loadProductDetail(id)
+  detailVisible.value = true
+}
+
+const submitForm = async () => {
+  if (!formRef.value) return
+
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+
+    saving.value = true
+    try {
+      const payload = {
+        name: form.name,
+        description: form.description,
+        category: form.category,
+        price: form.price,
+        stock: form.stock,
+        status: form.status,
+        imageUrl: form.imageUrl,
+      }
+
+      if (formMode.value === 'create') {
+        await adminApi.createProduct(payload)
+        ElMessage.success('商品添加成功')
+      } else {
+        await adminApi.updateProduct(form.id, payload)
+        ElMessage.success('商品更新成功')
+      }
+
+      formVisible.value = false
+      await reloadData()
+    } finally {
+      saving.value = false
+    }
+  })
+}
+
+const removeProduct = async (row: AdminProductRow) => {
+  await ElMessageBox.confirm(`确定删除商品“${row.name}”吗？`, '删除确认', {
+    type: 'warning',
+  })
+  await adminApi.deleteProduct(row.id)
+  ElMessage.success('商品已删除')
+  await reloadData()
+}
+
+const handleSearch = () => {
+  pagination.page = 1
+  loadProducts()
+}
+
+const handleReset = () => {
+  query.keyword = ''
+  query.category = ''
+  query.status = ''
+  handleSearch()
+}
+
+const handlePageSizeChange = () => {
+  pagination.page = 1
+  loadProducts()
+}
+
+const reloadData = async () => {
+  await Promise.all([loadStats(), loadCategories(), loadProducts()])
+}
+
+onMounted(() => {
+  reloadData()
+})
 </script>
 
 <style scoped lang="scss">
-.admin-products {
-  .page-header {
-    @apply flex justify-between items-center mb-6;
-    
-    .page-title {
-      @apply text-2xl font-bold;
-    }
+.page-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+.page-title {
+  @apply text-2xl font-bold text-slate-900;
+}
+
+.page-subtitle {
+  @apply text-sm text-slate-500 mt-1;
+}
+
+.page-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.mini-stat {
+  @apply rounded-xl text-white p-5 shadow-sm;
+
+  &.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
+  &.green { background: linear-gradient(135deg, #10b981, #059669); }
+  &.gray { background: linear-gradient(135deg, #64748b, #475569); }
+  &.orange { background: linear-gradient(135deg, #f59e0b, #ea580c); }
+
+  &__value {
+    @apply text-3xl font-bold;
   }
-  
-  .content-card {
-    @apply bg-white rounded-lg shadow-sm p-6;
+
+  &__label {
+    @apply text-sm opacity-90 mt-2;
   }
 }
-</style>
\ No newline at end of file
+
+.panel-card {
+  @apply bg-white rounded-xl shadow-sm p-5;
+}
+
+.filter-card {
+  display: grid;
+  grid-template-columns: 1.4fr 180px 180px 100px 100px;
+  gap: 12px;
+}
+
+.product-image {
+  width: 54px;
+  height: 54px;
+  object-fit: cover;
+  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+}
+
+.table-footer {
+  @apply flex justify-end mt-4;
+}
+
+.detail-layout {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  gap: 20px;
+}
+
+.detail-image {
+  width: 220px;
+  height: 220px;
+  object-fit: cover;
+  border-radius: 16px;
+  border: 1px solid #e2e8f0;
+}
+
+.detail-content h3 {
+  @apply text-2xl font-semibold text-slate-900;
+}
+
+.detail-price {
+  @apply text-3xl font-bold text-rose-500 mt-3 mb-4;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  color: #475569;
+}
+
+.detail-grid span {
+  color: #94a3b8;
+}
+
+.detail-description {
+  @apply mt-5 text-sm leading-6 text-slate-600 bg-slate-50 rounded-xl p-4;
+}
+
+@media (max-width: 1024px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .filter-card {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .detail-layout {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/flash-sale-frontend/src/pages/admin/reviews.vue b/flash-sale-frontend/src/pages/admin/reviews.vue
new file mode 100644
index 0000000..e51de69
--- /dev/null
+++ b/flash-sale-frontend/src/pages/admin/reviews.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="page-shell">
+    <div class="page-header">
+      <div>
+        <h2 class="page-title">评价管理</h2>
+        <p class="page-subtitle">查看、隐藏和回复用户评价</p>
+      </div>
+      <el-button @click="reloadData"><el-icon><Refresh /></el-icon>刷新</el-button>
+    </div>
+
+    <div class="stats-grid">
+      <div class="mini-stat blue"><div class="mini-stat__value">{{ stats.totalReviews }}</div><div class="mini-stat__label">评价总数</div></div>
+      <div class="mini-stat green"><div class="mini-stat__value">{{ stats.todayReviews }}</div><div class="mini-stat__label">今日新增</div></div>
+      <div class="mini-stat orange"><div class="mini-stat__value">{{ stats.averageRating.toFixed(1) }}</div><div class="mini-stat__label">平均评分</div></div>
+      <div class="mini-stat purple"><div class="mini-stat__value">{{ stats.fiveStarReviews }}</div><div class="mini-stat__label">五星评价</div></div>
+    </div>
+
+    <div class="panel-card filter-card">
+      <el-input v-model="keyword" clearable placeholder="搜索用户 / 商品 / 评价内容" @keyup.enter="loadReviews" />
+      <el-button type="primary" @click="loadReviews">搜索</el-button>
+    </div>
+
+    <div class="panel-card">
+      <el-table v-loading="loading" :data="reviews" stripe>
+        <el-table-column prop="productName" label="商品" min-width="160" show-overflow-tooltip />
+        <el-table-column prop="username" label="用户" width="120" />
+        <el-table-column prop="rating" label="评分" width="120"><template #default="{ row }"><el-rate :model-value="row.rating" disabled /></template></el-table-column>
+        <el-table-column prop="content" label="评价内容" min-width="240" show-overflow-tooltip />
+        <el-table-column prop="statusText" label="状态" width="90" />
+        <el-table-column prop="adminReply" label="回复" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="createdAt" label="时间" min-width="170" />
+        <el-table-column label="操作" width="200">
+          <template #default="{ row }">
+            <el-button text type="primary" @click="openReply(row)">回复</el-button>
+            <el-button text :type="row.status === 1 ? 'warning' : 'success'" @click="toggleStatus(row)">{{ row.status === 1 ? '隐藏' : '显示' }}</el-button>
+            <el-button text type="danger" @click="removeReview(row.id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="table-footer">
+        <el-pagination v-model:current-page="page" v-model:page-size="size" :total="total" :page-sizes="[10,20,50]" layout="total, sizes, prev, pager, next, jumper" @current-change="loadReviews" @size-change="loadReviews" />
+      </div>
+    </div>
+
+    <el-dialog v-model="replyVisible" title="评价回复" width="600px">
+      <el-input v-model="replyText" type="textarea" :rows="5" maxlength="500" show-word-limit placeholder="请输入管理员回复" />
+      <template #footer>
+        <el-button @click="replyVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitReply">保存回复</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { adminApi } from '@/api/modules/admin'
+import type { AdminReviewRow, AdminReviewStats } from '@/types/admin'
+
+const loading = ref(false)
+const keyword = ref('')
+const page = ref(1)
+const size = ref(10)
+const total = ref(0)
+const reviews = ref<AdminReviewRow[]>([])
+const stats = reactive<AdminReviewStats>({ totalReviews: 0, todayReviews: 0, averageRating: 0, fiveStarReviews: 0 })
+const replyVisible = ref(false)
+const currentReviewId = ref<number | null>(null)
+const replyText = ref('')
+
+const loadStats = async () => {
+  const res = await adminApi.getReviewStats()
+  Object.assign(stats, res.data)
+}
+const loadReviews = async () => {
+  loading.value = true
+  try {
+    const res = await adminApi.getReviews({ page: page.value, size: size.value, keyword: keyword.value || undefined })
+    reviews.value = res.data.reviews
+    total.value = res.data.total
+  } finally { loading.value = false }
+}
+const openReply = (row: AdminReviewRow) => { currentReviewId.value = row.id; replyText.value = row.adminReply || ''; replyVisible.value = true }
+const submitReply = async () => {
+  if (!currentReviewId.value) return
+  await adminApi.updateReview(currentReviewId.value, { adminReply: replyText.value, status: 1 })
+  ElMessage.success('回复已保存')
+  replyVisible.value = false
+  loadReviews()
+}
+const toggleStatus = async (row: AdminReviewRow) => {
+  await adminApi.updateReview(row.id, { status: row.status === 1 ? 0 : 1 })
+  ElMessage.success('状态已更新')
+  loadStats(); loadReviews()
+}
+const removeReview = async (id: number) => {
+  await ElMessageBox.confirm('确定删除该评价吗？', '提示', { type: 'warning' })
+  await adminApi.deleteReview(id)
+  ElMessage.success('删除成功')
+  loadStats(); loadReviews()
+}
+const reloadData = async () => { await Promise.all([loadStats(), loadReviews()]) }
+onMounted(() => { reloadData() })
+</script>
+
+<style scoped lang="scss">
+.page-shell { display:flex; flex-direction:column; gap:20px; }
+.page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
+.page-title { @apply text-2xl font-bold text-slate-900; }
+.page-subtitle { @apply text-sm text-slate-500 mt-1; }
+.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
+.mini-stat { @apply rounded-xl text-white p-5 shadow-sm; }
+.mini-stat.blue { background:linear-gradient(135deg,#3b82f6,#2563eb); }
+.mini-stat.green { background:linear-gradient(135deg,#10b981,#059669); }
+.mini-stat.orange { background:linear-gradient(135deg,#f59e0b,#ea580c); }
+.mini-stat.purple { background:linear-gradient(135deg,#8b5cf6,#7c3aed); }
+.mini-stat__value { @apply text-3xl font-bold; }
+.mini-stat__label { @apply text-sm opacity-90 mt-2; }
+.panel-card { @apply bg-white rounded-xl shadow-sm p-5; }
+.filter-card { display:grid; grid-template-columns:1fr 100px; gap:12px; }
+.table-footer { @apply flex justify-end mt-4; }
+</style>
diff --git a/flash-sale-frontend/src/pages/admin/users.vue b/flash-sale-frontend/src/pages/admin/users.vue
index 04de29f..0c5d17a 100644
--- a/flash-sale-frontend/src/pages/admin/users.vue
+++ b/flash-sale-frontend/src/pages/admin/users.vue
@@ -1,42 +1,286 @@
 <template>
-  <div class="admin-users">
+  <div class="admin-users page-shell">
     <div class="page-header">
-      <h2 class="page-title">用户管理</h2>
+      <div>
+        <h2 class="page-title">用户管理</h2>
+        <p class="page-subtitle">对应 JSP 的用户统计、筛选检索和分页列表</p>
+      </div>
+      <div class="page-actions">
+        <el-button @click="reloadData">
+          <el-icon><Refresh /></el-icon>
+          刷新
+        </el-button>
+        <el-button @click="exportCsv">
+          <el-icon><Download /></el-icon>
+          导出
+        </el-button>
+      </div>
     </div>
-    
-    <div class="content-card">
-      <el-table :data="[]" stripe>
+
+    <div class="stats-grid">
+      <div class="mini-stat blue">
+        <div class="mini-stat__value">{{ stats.totalUsers }}</div>
+        <div class="mini-stat__label">总用户数</div>
+      </div>
+      <div class="mini-stat green">
+        <div class="mini-stat__value">{{ stats.activeUsers }}</div>
+        <div class="mini-stat__label">活跃用户</div>
+      </div>
+      <div class="mini-stat orange">
+        <div class="mini-stat__value">{{ stats.newUsers }}</div>
+        <div class="mini-stat__label">今日新增</div>
+      </div>
+      <div class="mini-stat purple">
+        <div class="mini-stat__value">{{ stats.onlineUsers }}</div>
+        <div class="mini-stat__label">在线用户</div>
+      </div>
+    </div>
+
+    <div class="panel-card filter-card">
+      <el-input v-model="query.keyword" clearable placeholder="搜索用户名 / 邮箱 / 手机号" @keyup.enter="handleSearch">
+        <template #prefix><el-icon><Search /></el-icon></template>
+      </el-input>
+      <el-select v-model="query.status" clearable placeholder="全部状态" @change="handleSearch">
+        <el-option label="正常" :value="1" />
+        <el-option label="禁用" :value="0" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">搜索</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <div class="panel-card">
+      <el-table v-loading="loading" :data="users" stripe>
         <el-table-column prop="id" label="ID" width="80" />
-        <el-table-column prop="username" label="用户名" />
-        <el-table-column prop="email" label="邮箱" />
-        <el-table-column prop="role" label="角色" />
-        <el-table-column prop="status" label="状态" />
-        <el-table-column prop="createdAt" label="注册时间" />
-        <el-table-column label="操作" width="150">
-          <template #default>
-            <el-button text type="primary" size="small">编辑</el-button>
+        <el-table-column prop="username" label="用户名" min-width="120" />
+        <el-table-column prop="email" label="邮箱" min-width="180" show-overflow-tooltip />
+        <el-table-column prop="phone" label="手机号" min-width="130" />
+        <el-table-column prop="role" label="角色" width="100">
+          <template #default="{ row }">
+            <el-tag :type="row.role === 'ADMIN' ? 'danger' : 'info'">{{ row.role === 'ADMIN' ? '管理员' : '普通用户' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 1 ? 'success' : 'info'">{{ row.statusText }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="在线" width="100">
+          <template #default="{ row }">
+            <el-tag :type="row.isOnline ? 'success' : 'info'">{{ row.isOnline ? '在线' : '离线' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdAt" label="注册时间" min-width="170">
+          <template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
+        </el-table-column>
+        <el-table-column prop="lastLogin" label="最后登录" min-width="170">
+          <template #default="{ row }">{{ row.lastLogin ? formatTime(row.lastLogin) : '-' }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="100" fixed="right">
+          <template #default="{ row }">
+            <el-button text type="primary" @click="viewUser(row)">查看</el-button>
           </template>
         </el-table-column>
       </el-table>
+
+      <div class="table-footer">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.size"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="loadUsers"
+          @size-change="handlePageSizeChange"
+        />
+      </div>
     </div>
+
+    <el-dialog v-model="detailVisible" title="用户详情" width="620px">
+      <div v-if="currentUser" class="detail-grid">
+        <div><span>用户ID：</span>{{ currentUser.id }}</div>
+        <div><span>用户名：</span>{{ currentUser.username }}</div>
+        <div><span>邮箱：</span>{{ currentUser.email || '-' }}</div>
+        <div><span>手机号：</span>{{ currentUser.phone || '-' }}</div>
+        <div><span>角色：</span>{{ currentUser.role === 'ADMIN' ? '管理员' : '普通用户' }}</div>
+        <div><span>状态：</span>{{ currentUser.statusText }}</div>
+        <div><span>在线状态：</span>{{ currentUser.isOnline ? '在线' : '离线' }}</div>
+        <div><span>注册时间：</span>{{ formatTime(currentUser.createdAt) }}</div>
+        <div v-if="currentUser.lastLogin"><span>最后登录：</span>{{ formatTime(currentUser.lastLogin) }}</div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import dayjs from 'dayjs'
+import { adminApi } from '@/api/modules/admin'
+import type { AdminUserRow, AdminUserStats } from '@/types/admin'
+
+const loading = ref(false)
+const detailVisible = ref(false)
+const users = ref<AdminUserRow[]>([])
+const currentUser = ref<AdminUserRow | null>(null)
+
+const query = reactive({
+  keyword: '',
+  status: '' as number | '',
+})
+
+const pagination = reactive({
+  page: 1,
+  size: 10,
+  total: 0,
+})
+
+const stats = reactive<AdminUserStats>({
+  totalUsers: 0,
+  activeUsers: 0,
+  newUsers: 0,
+  onlineUsers: 0,
+})
+
+const formatTime = (value: string) => dayjs(value).format('YYYY-MM-DD HH:mm:ss')
+
+const loadStats = async () => {
+  const res = await adminApi.getUserStats()
+  Object.assign(stats, res.data)
+}
+
+const loadUsers = async () => {
+  loading.value = true
+  try {
+    const res = await adminApi.getUsers({
+      page: pagination.page,
+      size: pagination.size,
+      keyword: query.keyword || undefined,
+      status: query.status === '' ? undefined : query.status,
+    })
+    users.value = res.data.users
+    pagination.total = res.data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const viewUser = (row: AdminUserRow) => {
+  currentUser.value = row
+  detailVisible.value = true
+}
+
+const handleSearch = () => {
+  pagination.page = 1
+  loadUsers()
+}
+
+const handleReset = () => {
+  query.keyword = ''
+  query.status = ''
+  handleSearch()
+}
+
+const handlePageSizeChange = () => {
+  pagination.page = 1
+  loadUsers()
+}
+
+const exportCsv = () => {
+  const rows = users.value.map((item) => [item.id, item.username, item.email, item.phone, item.role, item.statusText, item.isOnline ? '在线' : '离线', formatTime(item.createdAt), item.lastLogin ? formatTime(item.lastLogin) : ''])
+  const header = ['ID', '用户名', '邮箱', '手机号', '角色', '状态', '在线', '注册时间', '最后登录']
+  const csv = [header, ...rows].map((row) => row.join(',')).join('\n')
+  const blob = new Blob([`\ufeff${csv}`], { type: 'text/csv;charset=utf-8;' })
+  const link = document.createElement('a')
+  link.href = URL.createObjectURL(blob)
+  link.download = `users-${dayjs().format('YYYYMMDD-HHmmss')}.csv`
+  link.click()
+  URL.revokeObjectURL(link.href)
+}
+
+const reloadData = async () => {
+  await Promise.all([loadStats(), loadUsers()])
+}
+
+onMounted(() => {
+  reloadData()
+})
 </script>
 
 <style scoped lang="scss">
-.admin-users {
-  .page-header {
-    @apply flex justify-between items-center mb-6;
-    
-    .page-title {
-      @apply text-2xl font-bold;
-    }
+.page-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+.page-title {
+  @apply text-2xl font-bold text-slate-900;
+}
+
+.page-subtitle {
+  @apply text-sm text-slate-500 mt-1;
+}
+
+.page-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.mini-stat {
+  @apply rounded-xl text-white p-5 shadow-sm;
+
+  &.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
+  &.green { background: linear-gradient(135deg, #10b981, #059669); }
+  &.orange { background: linear-gradient(135deg, #f59e0b, #ea580c); }
+  &.purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
+
+  &__value { @apply text-3xl font-bold; }
+  &__label { @apply text-sm opacity-90 mt-2; }
+}
+
+.panel-card {
+  @apply bg-white rounded-xl shadow-sm p-5;
+}
+
+.filter-card {
+  display: grid;
+  grid-template-columns: 1.4fr 180px 100px 100px;
+  gap: 12px;
+}
+
+.table-footer {
+  @apply flex justify-end mt-4;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.detail-grid span {
+  color: #94a3b8;
+}
+
+@media (max-width: 1024px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-  
-  .content-card {
-    @apply bg-white rounded-lg shadow-sm p-6;
+
+  .filter-card {
+    grid-template-columns: 1fr 1fr;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/flash-sale-frontend/src/pages/cart/index.vue b/flash-sale-frontend/src/pages/cart/index.vue
index 409c731..9a00de7 100644
--- a/flash-sale-frontend/src/pages/cart/index.vue
+++ b/flash-sale-frontend/src/pages/cart/index.vue
@@ -62,12 +62,7 @@
                   />
                   
                   <!-- 商品图片 -->
-                  <img 
-                    :src="item.productImage || '/default-product.png'"
-                    :alt="item.productName"
-                    class="w-24 h-24 object-cover rounded"
-                    @error="handleImageError"
-                  >
+                  <SafeImage :src="item.productImage" :alt="item.productName" wrapper-class="w-24 h-24 rounded-lg overflow-hidden bg-gray-100" img-class="w-24 h-24 object-cover rounded-lg" />
                   
                   <!-- 商品信息 -->
                   <div class="flex-1">
@@ -192,11 +187,7 @@
                   class="flex gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded"
                   @click="router.push(`/product/${item.id}`)"
                 >
-                  <img 
-                    :src="item.imageUrl"
-                    :alt="item.name"
-                    class="w-16 h-16 object-cover rounded"
-                  >
+                  <SafeImage :src="item.imageUrl" :alt="item.name" wrapper-class="w-16 h-16 rounded overflow-hidden bg-gray-100" img-class="w-16 h-16 object-cover rounded" />
                   <div class="flex-1">
                     <p class="text-sm line-clamp-2">{{ item.name }}</p>
                     <p class="text-red-500 font-semibold">¥{{ item.price }}</p>
@@ -217,7 +208,9 @@ import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useCartStore } from '@/stores/cart'
 import { productApi } from '@/api/modules/product'
+import { cartApi } from '@/api/modules/cart'
 import type { Product } from '@/types/api'
+import SafeImage from '@/components/common/SafeImage.vue'
 
 const router = useRouter()
 const cartStore = useCartStore()
@@ -239,10 +232,7 @@ const indeterminate = computed(() => {
 })
 
 // 处理图片错误
-const handleImageError = (e: Event) => {
-  const target = e.target as HTMLImageElement
-  target.src = '/default-product.png'
-}
+
 
 // 全选/取消全选
 const handleSelectAll = () => {
@@ -304,9 +294,18 @@ const handleCheckout = async () => {
     ElMessage.warning('请选择要结算的商品')
     return
   }
-  
-  // TODO: 跳转到订单确认页
-  ElMessage.info('功能开发中...')
+
+  try {
+    const selectedIds = cartStore.selectedItems.map((item) => item.id)
+    const res = await cartApi.checkout(selectedIds)
+    if (res.success) {
+      ElMessage.success('下单成功，请及时支付')
+      await cartStore.fetchCart()
+      router.push(`/order/${res.data.id}`)
+    }
+  } catch (error) {
+    console.error('购物车结算失败:', error)
+  }
 }
 
 // 加载推荐商品
@@ -339,4 +338,4 @@ onMounted(() => {
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/flash-sale-frontend/src/pages/flashsale/detail.vue b/flash-sale-frontend/src/pages/flashsale/detail.vue
index ceaf15c..8b553d7 100644
--- a/flash-sale-frontend/src/pages/flashsale/detail.vue
+++ b/flash-sale-frontend/src/pages/flashsale/detail.vue
@@ -1,38 +1,32 @@
 <template>
   <div class="flashsale-detail-page">
     <div class="container mx-auto px-4 py-8">
-      <!-- 面包屑 -->
       <el-breadcrumb separator="/" class="mb-6">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item :to="{ path: '/flashsale' }">秒杀活动</el-breadcrumb-item>
         <el-breadcrumb-item>{{ flashSale?.productName || '详情' }}</el-breadcrumb-item>
       </el-breadcrumb>
-      
+
       <div v-if="loading" class="text-center py-12">
         <el-icon :size="40" class="animate-spin"><Loading /></el-icon>
         <p class="mt-2 text-gray-500">加载中...</p>
       </div>
-      
+
       <div v-else-if="!flashSale" class="text-center py-12">
         <el-empty description="秒杀活动不存在" />
-        <el-button type="primary" @click="router.push('/flashsale')">
-          返回秒杀列表
-        </el-button>
+        <el-button type="primary" @click="router.push('/flashsale')">返回秒杀列表</el-button>
       </div>
-      
+
       <div v-else class="bg-white rounded-lg shadow-lg overflow-hidden">
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 p-8">
-          <!-- 左侧：商品图片 -->
           <div>
             <div class="relative">
-              <img 
-                :src="flashSale.productImageUrl || '/default-product.png'" 
+              <SafeImage
+                :src="flashSale.productImageUrl"
                 :alt="flashSale.productName"
-                class="w-full rounded-lg"
-                @error="handleImageError"
-              >
-              
-              <!-- 状态标签 -->
+                wrapper-class="w-full rounded-lg overflow-hidden bg-gray-100"
+                img-class="w-full rounded-lg object-cover"
+              />
               <div class="absolute top-4 left-4">
                 <el-tag :type="statusType" size="large" effect="dark">
                   <el-icon class="mr-1"><Lightning /></el-icon>
@@ -41,104 +35,70 @@
               </div>
             </div>
           </div>
-          
-          <!-- 右侧：商品信息 -->
+
           <div>
             <h1 class="text-3xl font-bold mb-4">{{ flashSale.productName }}</h1>
-            
-            <!-- 价格信息 -->
+
             <div class="bg-red-50 rounded-lg p-6 mb-6">
               <div class="flex items-end mb-2">
                 <span class="text-sm text-gray-500 mr-2">秒杀价</span>
                 <span class="text-4xl font-bold text-red-500">¥{{ flashSale.flashPrice }}</span>
                 <span class="ml-4 text-lg text-gray-400 line-through">¥{{ flashSale.originalPrice }}</span>
-                <span class="ml-2 px-2 py-1 bg-red-500 text-white text-sm rounded">
-                  {{ discountPercent }}% OFF
-                </span>
+                <span class="ml-2 px-2 py-1 bg-red-500 text-white text-sm rounded">{{ discountPercent }}% OFF</span>
               </div>
-              
-              <!-- 活动时间 -->
               <div class="text-sm text-gray-600 mt-4">
                 <p>开始时间：{{ formatTime(flashSale.startTime) }}</p>
                 <p>结束时间：{{ formatTime(flashSale.endTime) }}</p>
               </div>
             </div>
-            
-            <!-- 库存信息 -->
+
             <div class="mb-6">
               <div class="flex justify-between items-center mb-2">
                 <span class="text-gray-600">库存情况</span>
-                <span class="text-sm text-gray-500">
-                  剩余 {{ flashSale.remainingStock }} / {{ flashSale.flashStock }} 件
-                </span>
+                <span class="text-sm text-gray-500">剩余 {{ flashSale.remainingStock }} / {{ flashSale.flashStock }} 件</span>
               </div>
-              <el-progress 
-                :percentage="stockPercent" 
-                :stroke-width="10"
-                :color="progressColor"
-              />
+              <el-progress :percentage="stockPercent" :stroke-width="10" :color="progressColor" />
             </div>
-            
-            <!-- 倒计时 -->
+
             <div v-if="flashSale.status === 'ACTIVE'" class="mb-6">
               <div class="text-center p-4 bg-gray-50 rounded-lg">
                 <p class="text-sm text-gray-600 mb-2">距离结束还有</p>
-                <CountDown 
-                  :end-time="endTime"
-                  @finish="handleFinish"
-                />
+                <CountDown :end-time="endTime" @finish="handleFinish" />
               </div>
             </div>
-            
-            <!-- 限购信息 -->
+
             <div class="mb-6 p-4 bg-blue-50 rounded-lg">
               <div class="flex items-center text-blue-700">
                 <el-icon class="mr-2"><InfoFilled /></el-icon>
                 <span>每人限购 {{ flashSale.limitPerUser }} 件</span>
               </div>
             </div>
-            
-            <!-- 操作按钮 -->
+
             <div class="space-y-4">
-              <el-button
-                type="danger"
-                size="large"
-                class="w-full"
-                :disabled="!canParticipate"
-                :loading="participating"
-                @click="handleParticipate"
-              >
+              <el-button type="danger" size="large" class="w-full" :disabled="!canParticipate" :loading="participating" @click="handleParticipate">
                 <el-icon class="mr-2"><Lightning /></el-icon>
                 {{ buttonText }}
               </el-button>
-              
               <div class="flex gap-4">
-                <el-button size="large" class="flex-1" @click="handleViewProduct">
-                  查看商品详情
-                </el-button>
-                <el-button size="large" class="flex-1" @click="handleShare">
-                  <el-icon class="mr-1"><Share /></el-icon>
-                  分享
-                </el-button>
+                <el-button size="large" class="flex-1" @click="handleViewProduct">查看商品详情</el-button>
+                <el-button size="large" class="flex-1" @click="handleShare"><el-icon class="mr-1"><Share /></el-icon>分享活动</el-button>
               </div>
             </div>
-            
-            <!-- 活动说明 -->
-            <div class="mt-6 p-4 bg-gray-50 rounded-lg">
-              <h3 class="font-semibold mb-2">活动说明</h3>
-              <div class="text-sm text-gray-600 space-y-1">
-                <p>• 秒杀商品数量有限，先到先得</p>
-                <p>• 每个用户限购{{ flashSale.limitPerUser }}件</p>
-                <p>• 秒杀成功后请在30分钟内完成支付</p>
-                <p>• 商品售出后不支持退换</p>
-              </div>
+
+            <div class="mt-8 p-4 bg-yellow-50 rounded-lg">
+              <h3 class="font-semibold mb-2">抢购说明</h3>
+              <ul class="text-sm text-gray-600 space-y-1">
+                <li>• 秒杀商品数量有限，先到先得</li>
+                <li>• 每个用户限购{{ flashSale.limitPerUser }}件</li>
+                <li>• 下单后请在30分钟内完成支付</li>
+                <li>• 商品一经售出，非质量问题不支持退换</li>
+              </ul>
             </div>
           </div>
         </div>
-        
-        <!-- 商品描述 -->
+
         <div v-if="flashSale.description" class="border-t px-8 py-6">
-          <h3 class="text-xl font-semibold mb-4">活动详情</h3>
+          <h3 class="text-xl font-semibold mb-4">活动说明</h3>
           <div class="text-gray-600" v-html="flashSale.description"></div>
         </div>
       </div>
@@ -151,6 +111,7 @@ import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import CountDown from '@/components/business/CountDown.vue'
+import SafeImage from '@/components/common/SafeImage.vue'
 import { flashsaleApi } from '@/api/modules/flashsale'
 import { useUserStore } from '@/stores/user'
 import type { FlashSale } from '@/types/api'
@@ -164,7 +125,8 @@ const loading = ref(false)
 const participating = ref(false)
 const flashSale = ref<FlashSale | null>(null)
 
-// 计算属性
+const formatTime = (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss')
+
 const statusType = computed(() => {
   if (!flashSale.value) return 'info'
   switch (flashSale.value.status) {
@@ -179,9 +141,9 @@ const statusText = computed(() => {
   if (!flashSale.value) return ''
   switch (flashSale.value.status) {
     case 'UPCOMING': return '即将开始'
-    case 'ACTIVE': return '秒杀进行中'
+    case 'ACTIVE': return '秒杀中'
     case 'ENDED': return '已结束'
-    default: return '未知'
+    default: return ''
   }
 })
 
@@ -192,7 +154,7 @@ const discountPercent = computed(() => {
 
 const stockPercent = computed(() => {
   if (!flashSale.value || flashSale.value.flashStock === 0) return 0
-  return Math.round(flashSale.value.remainingStock / flashSale.value.flashStock * 100)
+  return Math.round((flashSale.value.remainingStock / flashSale.value.flashStock) * 100)
 })
 
 const progressColor = computed(() => {
@@ -219,27 +181,11 @@ const buttonText = computed(() => {
   return '立即抢购'
 })
 
-// 格式化时间
-const formatTime = (time: string) => {
-  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
-}
-
-// 处理图片错误
-const handleImageError = (e: Event) => {
-  const target = e.target as HTMLImageElement
-  target.src = '/default-product.png'
-}
-
-// 加载秒杀详情
-const loadFlashSaleDetail = async () => {
+const loadDetail = async () => {
   loading.value = true
   try {
-    const id = Number(route.params.id)
-    const res = await flashsaleApi.getDetail(id)
-    
-    if (res.success) {
-      flashSale.value = res.data
-    }
+    const res = await flashsaleApi.getDetail(Number(route.params.id))
+    if (res.success) flashSale.value = res.data
   } catch (error) {
     console.error('加载秒杀详情失败:', error)
     ElMessage.error('加载失败')
@@ -248,81 +194,49 @@ const loadFlashSaleDetail = async () => {
   }
 }
 
-// 参与秒杀
 const handleParticipate = async () => {
   if (!userStore.isLoggedIn) {
     ElMessage.warning('请先登录')
-    router.push({
-      path: '/login',
-      query: { redirect: route.fullPath }
-    })
+    router.push({ path: '/login', query: { redirect: route.fullPath } })
     return
   }
-  
   if (!flashSale.value || !canParticipate.value) return
-  
+
+  await ElMessageBox.confirm(`确定要抢购该商品吗？\n秒杀价：¥${flashSale.value.flashPrice}`, '抢购确认', {
+    confirmButtonText: '立即抢购',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+
+  participating.value = true
   try {
-    await ElMessageBox.confirm(
-      `确定要抢购该商品吗？\n秒杀价：¥${flashSale.value.flashPrice}`,
-      '确认抢购',
-      {
-        confirmButtonText: '确定抢购',
-        cancelButtonText: '再想想',
-        type: 'warning',
-      }
-    )
-    
-    participating.value = true
-    const startTime = Date.now()
-    
-    const res = await flashsaleApi.participate({
-      flashSaleId: flashSale.value.id,
-      quantity: 1,
-      timestamp: startTime
-    })
-    
+    const res = await flashsaleApi.participate({ flashSaleId: flashSale.value.id, quantity: 1 })
     if (res.success) {
-      const duration = Date.now() - startTime
-      ElMessage.success(`抢购成功！耗时${duration}ms`)
-      
-      // 跳转到订单页面
-      setTimeout(() => {
-        router.push('/orders')
-      }, 1500)
-    }
-  } catch (error: any) {
-    if (error !== 'cancel') {
-      ElMessage.error(error.message || '抢购失败')
+      ElMessage.success('抢购成功')
+      router.push(`/order/${res.data.orderId}`)
     }
+  } catch (error) {
+    console.error('参与秒杀失败:', error)
   } finally {
     participating.value = false
-    // 重新加载详情
-    loadFlashSaleDetail()
   }
 }
 
-// 查看商品详情
 const handleViewProduct = () => {
-  if (flashSale.value) {
-    router.push(`/product/${flashSale.value.productId}`)
-  }
+  if (flashSale.value) router.push(`/product/${flashSale.value.productId}`)
 }
 
-// 分享
-const handleShare = () => {
-  ElMessage.success('分享链接已复制')
-  // 实际实现复制链接到剪贴板
-  const url = window.location.href
-  navigator.clipboard.writeText(url)
+const handleShare = async () => {
+  await navigator.clipboard.writeText(window.location.href)
+  ElMessage.success('链接已复制，快去分享吧')
 }
 
-// 倒计时结束
 const handleFinish = () => {
-  loadFlashSaleDetail()
+  loadDetail()
 }
 
 onMounted(() => {
-  loadFlashSaleDetail()
+  loadDetail()
 })
 </script>
 
@@ -331,4 +245,4 @@ onMounted(() => {
   min-height: calc(100vh - 60px);
   background-color: #f5f5f5;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/flash-sale-frontend/src/pages/home/index.vue b/flash-sale-frontend/src/pages/home/index.vue
index f8f0441..fb6665d 100644
--- a/flash-sale-frontend/src/pages/home/index.vue
+++ b/flash-sale-frontend/src/pages/home/index.vue
@@ -133,12 +133,11 @@ import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import FlashSaleCard from '@/components/business/FlashSaleCard.vue'
 import ProductCard from '@/components/business/ProductCard.vue'
-import flashsaleApi from '@/api/flashsale'
-import productApi from '@/api/product'
+import { flashsaleApi } from '@/api/modules/flashsale'
+import { productApi } from '@/api/modules/product'
 import { useCartStore } from '@/stores/cart'
 import { useUserStore } from '@/stores/user'
-import type { FlashSale } from '@/types/flashsale'
-import type { Product } from '@/types/product'
+import type { FlashSale, Product } from '@/types/api'
 
 const router = useRouter()
 const cartStore = useCartStore()
@@ -151,7 +150,7 @@ const banners = [
     title: '秒杀系统',
     subtitle: '基于Redis集群构建的高并发秒杀系统',
     buttonText: '立即抢购',
-    link: '/flashsale',
+    link: '/flashsales',
     bgColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
     icon: 'Lightning'
   },
@@ -160,7 +159,7 @@ const banners = [
     title: '防超卖机制',
     subtitle: '采用分布式锁和Lua脚本，确保数据一致性',
     buttonText: '了解更多',
-    link: '/flashsale',
+    link: '/flashsales',
     bgColor: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
     icon: 'Lock'
   },
@@ -258,4 +257,4 @@ onMounted(() => {
 :deep(.el-carousel__item) {
   overflow: hidden;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/flash-sale-frontend/src/pages/order/detail.vue b/flash-sale-frontend/src/pages/order/detail.vue
index 61bcd6c..103909c 100644
--- a/flash-sale-frontend/src/pages/order/detail.vue
+++ b/flash-sale-frontend/src/pages/order/detail.vue
@@ -1,167 +1,95 @@
 <template>
   <div class="order-detail-page">
     <div class="container mx-auto px-4 py-8">
-      <!-- 面包屑 -->
       <el-breadcrumb separator="/" class="mb-6">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item :to="{ path: '/orders' }">我的订单</el-breadcrumb-item>
         <el-breadcrumb-item>订单详情</el-breadcrumb-item>
       </el-breadcrumb>
-      
+
       <div v-if="loading" class="text-center py-12">
         <el-icon :size="40" class="animate-spin"><Loading /></el-icon>
         <p class="mt-2 text-gray-500">加载中...</p>
       </div>
-      
+
       <div v-else-if="!order" class="text-center py-12">
         <el-empty description="订单不存在" />
-        <el-button type="primary" @click="router.push('/orders')">
-          返回订单列表
-        </el-button>
+        <el-button type="primary" @click="router.push('/orders')">返回订单列表</el-button>
       </div>
-      
+
       <div v-else>
-        <!-- 订单状态 -->
         <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
           <div class="flex justify-between items-center mb-4">
             <h2 class="text-xl font-semibold">订单状态</h2>
-            <el-tag :type="getStatusType(order.status)" size="large">
-              {{ getStatusText(order.status) }}
-            </el-tag>
+            <el-tag :type="getStatusType(order.status)" size="large">{{ getStatusText(order.status) }}</el-tag>
           </div>
-          
-          <!-- 订单进度 -->
+
           <el-steps :active="getActiveStep()" finish-status="success">
             <el-step title="提交订单" :description="formatTime(order.createdAt)" />
             <el-step title="支付订单" :description="order.paidAt ? formatTime(order.paidAt) : ''" />
             <el-step title="商家发货" :description="order.shippedAt ? formatTime(order.shippedAt) : ''" />
             <el-step title="确认收货" :description="order.completedAt ? formatTime(order.completedAt) : ''" />
           </el-steps>
-          
-          <!-- 操作按钮 -->
+
           <div class="mt-6 flex gap-2">
             <template v-if="order.status === 'PENDING'">
               <el-button type="primary" @click="handlePay">立即付款</el-button>
               <el-button @click="handleCancel">取消订单</el-button>
             </template>
-            
             <template v-else-if="order.status === 'SHIPPED'">
               <el-button type="primary" @click="handleConfirm">确认收货</el-button>
             </template>
-            
             <template v-else-if="order.status === 'COMPLETED'">
               <el-button @click="handleReview">评价</el-button>
               <el-button @click="handleRebuy">再次购买</el-button>
+              <el-button text type="danger" @click="handleDelete">删除订单</el-button>
+            </template>
+            <template v-else-if="order.status === 'CANCELLED'">
+              <el-button text type="danger" @click="handleDelete">删除订单</el-button>
             </template>
           </div>
         </div>
-        
-        <!-- 收货信息 -->
+
         <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
           <h3 class="text-lg font-semibold mb-4">收货信息</h3>
           <div v-if="order.address" class="text-sm space-y-2">
-            <div>
-              <span class="text-gray-500">收货人：</span>
-              <span>{{ order.address.name }} {{ order.address.phone }}</span>
-            </div>
-            <div>
-              <span class="text-gray-500">收货地址：</span>
-              <span>
-                {{ order.address.province }}
-                {{ order.address.city }}
-                {{ order.address.district }}
-                {{ order.address.address }}
-              </span>
-            </div>
-          </div>
-          <div v-else class="text-gray-500">
-            暂无收货信息
+            <div><span class="text-gray-500">收货人：</span><span>{{ order.address.name }} {{ order.address.phone }}</span></div>
+            <div><span class="text-gray-500">收货地址：</span><span>{{ order.address.province }} {{ order.address.city }} {{ order.address.district }} {{ order.address.address }}</span></div>
           </div>
+          <div v-else class="text-gray-500">暂无收货信息</div>
         </div>
-        
-        <!-- 商品信息 -->
+
         <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
           <h3 class="text-lg font-semibold mb-4">商品信息</h3>
           <div class="space-y-4">
-            <div 
-              v-for="item in order.items" 
-              :key="item.id"
-              class="flex gap-4 pb-4 border-b last:border-0"
-            >
-              <img 
-                :src="item.productImage || '/default-product.png'"
-                :alt="item.productName"
-                class="w-24 h-24 object-cover rounded"
-                @error="handleImageError"
-              >
+            <div v-for="item in order.items" :key="item.id" class="flex gap-4 pb-4 border-b last:border-0">
+              <SafeImage :src="item.productImage" :alt="item.productName" wrapper-class="w-24 h-24 rounded" img-class="w-24 h-24 object-cover rounded" />
               <div class="flex-1">
                 <h4 class="font-semibold mb-2">{{ item.productName }}</h4>
-                <div class="text-sm text-gray-500">
-                  单价：¥{{ item.price }} × {{ item.quantity }}
-                </div>
-              </div>
-              <div class="text-right">
-                <div class="font-semibold text-lg">¥{{ item.subtotal }}</div>
+                <div class="text-sm text-gray-500">单价：¥{{ item.price }} × {{ item.quantity }}</div>
               </div>
+              <div class="text-right"><div class="font-semibold text-lg">¥{{ item.subtotal }}</div></div>
             </div>
           </div>
-          
-          <!-- 费用明细 -->
+
           <div class="border-t pt-4 mt-4 space-y-2">
-            <div class="flex justify-between text-sm">
-              <span class="text-gray-500">商品总额</span>
-              <span>¥{{ order.totalAmount }}</span>
-            </div>
-            <div class="flex justify-between text-sm">
-              <span class="text-gray-500">运费</span>
-              <span>¥0.00</span>
-            </div>
-            <div class="flex justify-between text-sm">
-              <span class="text-gray-500">优惠</span>
-              <span class="text-red-500">-¥{{ (order.totalAmount - order.paymentAmount).toFixed(2) }}</span>
-            </div>
-            <div class="flex justify-between pt-2 border-t">
-              <span class="font-semibold">实付金额</span>
-              <span class="text-xl font-bold text-red-500">¥{{ order.paymentAmount }}</span>
-            </div>
+            <div class="flex justify-between text-sm"><span class="text-gray-500">商品总额</span><span>¥{{ order.totalAmount }}</span></div>
+            <div class="flex justify-between text-sm"><span class="text-gray-500">运费</span><span>¥0.00</span></div>
+            <div class="flex justify-between text-sm"><span class="text-gray-500">优惠</span><span class="text-red-500">-¥0.00</span></div>
+            <div class="flex justify-between text-lg font-semibold pt-2 border-t"><span>实付金额</span><span class="text-red-500">¥{{ order.paymentAmount }}</span></div>
           </div>
         </div>
-        
-        <!-- 订单信息 -->
+
         <div class="bg-white rounded-lg shadow-sm p-6">
           <h3 class="text-lg font-semibold mb-4">订单信息</h3>
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-            <div>
-              <span class="text-gray-500">订单编号：</span>
-              <span>{{ order.orderNo }}</span>
-              <el-button text type="primary" size="small" @click="copyOrderNo">
-                复制
-              </el-button>
-            </div>
-            <div>
-              <span class="text-gray-500">创建时间：</span>
-              <span>{{ formatTime(order.createdAt) }}</span>
-            </div>
-            <div v-if="order.paidAt">
-              <span class="text-gray-500">付款时间：</span>
-              <span>{{ formatTime(order.paidAt) }}</span>
-            </div>
-            <div v-if="order.paymentMethod">
-              <span class="text-gray-500">支付方式：</span>
-              <span>{{ getPaymentMethodText(order.paymentMethod) }}</span>
-            </div>
-            <div v-if="order.shippedAt">
-              <span class="text-gray-500">发货时间：</span>
-              <span>{{ formatTime(order.shippedAt) }}</span>
-            </div>
-            <div v-if="order.completedAt">
-              <span class="text-gray-500">完成时间：</span>
-              <span>{{ formatTime(order.completedAt) }}</span>
-            </div>
-            <div v-if="order.remark" class="md:col-span-2">
-              <span class="text-gray-500">订单备注：</span>
-              <span>{{ order.remark }}</span>
-            </div>
+            <div><span class="text-gray-500">订单编号：</span><span>{{ order.orderNo }}</span><el-button text type="primary" size="small" @click="copyOrderNo">复制</el-button></div>
+            <div><span class="text-gray-500">创建时间：</span><span>{{ formatTime(order.createdAt) }}</span></div>
+            <div v-if="order.paidAt"><span class="text-gray-500">付款时间：</span><span>{{ formatTime(order.paidAt) }}</span></div>
+            <div v-if="order.paymentMethod"><span class="text-gray-500">支付方式：</span><span>{{ getPaymentMethodText(order.paymentMethod) }}</span></div>
+            <div v-if="order.shippedAt"><span class="text-gray-500">发货时间：</span><span>{{ formatTime(order.shippedAt) }}</span></div>
+            <div v-if="order.completedAt"><span class="text-gray-500">完成时间：</span><span>{{ formatTime(order.completedAt) }}</span></div>
+            <div v-if="order.remark" class="md:col-span-2"><span class="text-gray-500">订单备注：</span><span>{{ order.remark }}</span></div>
           </div>
         </div>
       </div>
@@ -174,88 +102,40 @@ import { ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { orderApi } from '@/api/modules/order'
+import { reviewApi } from '@/api/modules/review'
+import { useCartStore } from '@/stores/cart'
 import type { Order } from '@/types/api'
 import dayjs from 'dayjs'
+import SafeImage from '@/components/common/SafeImage.vue'
 
 const route = useRoute()
 const router = useRouter()
+const cartStore = useCartStore()
 
 const loading = ref(false)
 const order = ref<Order | null>(null)
 
-// 格式化时间
-const formatTime = (time: string) => {
-  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
-}
+const formatTime = (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss')
+const getStatusType = (status: string) => ({ PENDING: 'warning', PAID: 'primary', SHIPPED: 'primary', COMPLETED: 'success', CANCELLED: 'info', REFUNDED: 'danger' }[status] || 'info')
+const getStatusText = (status: string) => ({ PENDING: '待付款', PAID: '待发货', SHIPPED: '待收货', COMPLETED: '已完成', CANCELLED: '已取消', REFUNDED: '已退款' }[status] || status)
+const getPaymentMethodText = (method: string) => ({ ONLINE: '在线支付', ALIPAY: '支付宝', WECHAT: '微信支付', CASH: '货到付款', default: '默认支付' }[method] || method)
 
-// 处理图片错误
-const handleImageError = (e: Event) => {
-  const target = e.target as HTMLImageElement
-  target.src = '/default-product.png'
-}
-
-// 获取状态类型
-const getStatusType = (status: string) => {
-  const map: Record<string, string> = {
-    'PENDING': 'warning',
-    'PAID': 'primary',
-    'SHIPPED': 'primary',
-    'COMPLETED': 'success',
-    'CANCELLED': 'info',
-    'REFUNDED': 'danger'
-  }
-  return map[status] || 'info'
-}
-
-// 获取状态文本
-const getStatusText = (status: string) => {
-  const map: Record<string, string> = {
-    'PENDING': '待付款',
-    'PAID': '待发货',
-    'SHIPPED': '待收货',
-    'COMPLETED': '已完成',
-    'CANCELLED': '已取消',
-    'REFUNDED': '已退款'
-  }
-  return map[status] || status
-}
-
-// 获取支付方式文本
-const getPaymentMethodText = (method: string) => {
-  const map: Record<string, string> = {
-    'ONLINE': '在线支付',
-    'ALIPAY': '支付宝',
-    'WECHAT': '微信支付',
-    'CASH': '货到付款'
-  }
-  return map[method] || method
-}
-
-// 获取当前步骤
 const getActiveStep = () => {
   if (!order.value) return 0
-  
   switch (order.value.status) {
     case 'PENDING': return 1
     case 'PAID': return 2
     case 'SHIPPED': return 3
     case 'COMPLETED': return 4
-    case 'CANCELLED':
-    case 'REFUNDED': return -1
     default: return 0
   }
 }
 
-// 加载订单详情
 const loadOrderDetail = async () => {
   loading.value = true
   try {
-    const id = Number(route.params.id)
-    const res = await orderApi.getDetail(id)
-    
-    if (res.success) {
-      order.value = res.data
-    }
+    const res = await orderApi.getDetail(Number(route.params.id))
+    if (res.success) order.value = res.data
   } catch (error) {
     console.error('加载订单详情失败:', error)
     ElMessage.error('加载失败')
@@ -264,89 +144,58 @@ const loadOrderDetail = async () => {
   }
 }
 
-// 复制订单号
 const copyOrderNo = () => {
-  if (order.value) {
-    navigator.clipboard.writeText(order.value.orderNo)
-    ElMessage.success('订单号已复制')
-  }
+  if (!order.value) return
+  navigator.clipboard.writeText(order.value.orderNo)
+  ElMessage.success('订单号已复制')
 }
 
-// 付款
 const handlePay = async () => {
   if (!order.value) return
-  
-  await ElMessageBox.confirm(
-    `订单金额：¥${order.value.paymentAmount}，确认付款？`,
-    '付款确认',
-    {
-      confirmButtonText: '确认付款',
-      cancelButtonText: '取消',
-      type: 'warning',
-    }
-  )
-  
-  try {
-    await orderApi.pay(order.value.id, 'ONLINE')
-    ElMessage.success('付款成功')
-    loadOrderDetail()
-  } catch (error) {
-    console.error('付款失败:', error)
-  }
+  await ElMessageBox.confirm(`订单金额：¥${order.value.paymentAmount}，确认付款？`, '付款确认', { confirmButtonText: '确认付款', cancelButtonText: '取消', type: 'warning' })
+  try { await orderApi.pay(order.value.id, 'ONLINE'); ElMessage.success('付款成功'); loadOrderDetail() } catch (error) { console.error('付款失败:', error) }
 }
 
-// 取消订单
 const handleCancel = async () => {
   if (!order.value) return
-  
-  await ElMessageBox.confirm('确定要取消该订单吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  })
-  
-  try {
-    await orderApi.cancel(order.value.id)
-    ElMessage.success('订单已取消')
-    loadOrderDetail()
-  } catch (error) {
-    console.error('取消订单失败:', error)
-  }
+  await ElMessageBox.confirm('确定要取消该订单吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
+  try { await orderApi.cancel(order.value.id); ElMessage.success('订单已取消'); loadOrderDetail() } catch (error) { console.error('取消订单失败:', error) }
 }
 
-// 确认收货
 const handleConfirm = async () => {
   if (!order.value) return
-  
-  await ElMessageBox.confirm('确定已收到商品？', '确认收货', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  })
-  
+  await ElMessageBox.confirm('确定已收到商品？', '确认收货', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
+  try { await orderApi.confirm(order.value.id); ElMessage.success('已确认收货'); loadOrderDetail() } catch (error) { console.error('确认收货失败:', error) }
+}
+
+const handleReview = async () => {
+  if (!order.value) return
+  const firstItem = order.value.items[0]
+  if (!firstItem) return
   try {
-    await orderApi.confirm(order.value.id)
-    ElMessage.success('已确认收货')
-    loadOrderDetail()
+    const { value } = await ElMessageBox.prompt('请输入本次购物评价', '商品评价', { inputType: 'textarea', inputPlaceholder: '分享一下你的使用感受吧', confirmButtonText: '提交评价', cancelButtonText: '取消' })
+    await reviewApi.create({ orderId: order.value.id, productId: firstItem.productId, rating: 5, content: value })
+    ElMessage.success('评价提交成功')
   } catch (error) {
-    console.error('确认收货失败:', error)
+    if (error) console.error('提交评价失败:', error)
   }
 }
 
-// 评价
-const handleReview = () => {
-  ElMessage.info('评价功能开发中...')
-}
-
-// 再次购买
-const handleRebuy = () => {
-  ElMessage.success('商品已加入购物车')
+const handleRebuy = async () => {
+  if (!order.value) return
+  const firstItem = order.value.items[0]
+  if (!firstItem) return
+  await cartStore.addToCart(firstItem.productId, firstItem.quantity)
   router.push('/cart')
 }
 
-onMounted(() => {
-  loadOrderDetail()
-})
+const handleDelete = async () => {
+  if (!order.value) return
+  await ElMessageBox.confirm('确定删除该订单吗？删除后不可恢复。', '删除确认', { confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' })
+  try { await orderApi.delete(order.value.id); ElMessage.success('订单已删除'); router.push('/orders') } catch (error) { console.error('删除订单失败:', error) }
+}
+
+onMounted(() => { loadOrderDetail() })
 </script>
 
 <style scoped lang="scss">
@@ -354,4 +203,4 @@ onMounted(() => {
   min-height: calc(100vh - 60px);
   background-color: #f5f5f5;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/flash-sale-frontend/src/pages/order/index.vue b/flash-sale-frontend/src/pages/order/index.vue
index 62e33e8..17eff86 100644
--- a/flash-sale-frontend/src/pages/order/index.vue
+++ b/flash-sale-frontend/src/pages/order/index.vue
@@ -1,34 +1,23 @@
 <template>
   <div class="orders-page">
     <div class="container mx-auto px-4 py-8">
-      <!-- 页面标题 -->
       <div class="mb-6">
         <h1 class="text-3xl font-bold flex items-center">
           <el-icon class="text-blue-500 mr-2"><List /></el-icon>
           我的订单
         </h1>
       </div>
-      
-      <!-- 订单统计 -->
+
       <div class="grid grid-cols-2 md:grid-cols-6 gap-4 mb-6">
-        <div 
-          v-for="stat in orderStats" 
-          :key="stat.key"
-          class="bg-white rounded-lg p-4 text-center cursor-pointer hover:shadow-md transition-shadow"
-          @click="handleStatusFilter(stat.key)"
-        >
-          <el-icon :size="24" :class="stat.color" class="mb-2">
-            <component :is="stat.icon" />
-          </el-icon>
+        <div v-for="stat in orderStats" :key="stat.key" class="bg-white rounded-lg p-4 text-center cursor-pointer hover:shadow-md transition-shadow" @click="handleStatusFilter(stat.key)">
+          <el-icon :size="24" :class="stat.color" class="mb-2"><component :is="stat.icon" /></el-icon>
           <div class="text-2xl font-bold">{{ stat.count }}</div>
           <div class="text-sm text-gray-500">{{ stat.label }}</div>
         </div>
       </div>
-      
-      <!-- 筛选栏 -->
+
       <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
         <div class="flex flex-wrap gap-4 items-center">
-          <!-- 状态筛选 -->
           <el-radio-group v-model="filters.status" @change="loadOrders">
             <el-radio-button label="">全部</el-radio-button>
             <el-radio-button label="PENDING">待付款</el-radio-button>
@@ -37,144 +26,80 @@
             <el-radio-button label="COMPLETED">已完成</el-radio-button>
             <el-radio-button label="CANCELLED">已取消</el-radio-button>
           </el-radio-group>
-          
-          <!-- 搜索 -->
-          <el-input
-            v-model="filters.keyword"
-            placeholder="搜索订单号或商品名称"
-            style="width: 250px"
-            clearable
-            @keyup.enter="loadOrders"
-          >
+
+          <el-input v-model="filters.keyword" placeholder="搜索订单号或商品名称" style="width: 250px" clearable @keyup.enter="loadOrders">
             <template #suffix>
-              <el-icon class="cursor-pointer" @click="loadOrders">
-                <Search />
-              </el-icon>
+              <el-icon class="cursor-pointer" @click="loadOrders"><Search /></el-icon>
             </template>
           </el-input>
         </div>
       </div>
-      
-      <!-- 订单列表 -->
+
       <div v-if="loading" class="text-center py-12">
         <el-icon :size="40" class="animate-spin"><Loading /></el-icon>
         <p class="mt-2 text-gray-500">加载中...</p>
       </div>
-      
+
       <div v-else-if="orders.length === 0" class="bg-white rounded-lg shadow-sm p-12">
         <el-empty description="暂无订单">
-          <el-button type="primary" @click="router.push('/products')">
-            去购物
-          </el-button>
+          <el-button type="primary" @click="router.push('/products')">去购物</el-button>
         </el-empty>
       </div>
-      
+
       <div v-else class="space-y-4">
-        <!-- 订单卡片 -->
-        <div 
-          v-for="order in orders" 
-          :key="order.id"
-          class="bg-white rounded-lg shadow-sm overflow-hidden"
-        >
-          <!-- 订单头部 -->
+        <div v-for="order in orders" :key="order.id" class="bg-white rounded-lg shadow-sm overflow-hidden">
           <div class="bg-gray-50 px-6 py-3 flex justify-between items-center">
             <div class="flex items-center gap-4 text-sm text-gray-600">
               <span>订单号：{{ order.orderNo }}</span>
               <span>{{ formatTime(order.createdAt) }}</span>
             </div>
-            <el-tag :type="getStatusType(order.status)">
-              {{ getStatusText(order.status) }}
-            </el-tag>
+            <el-tag :type="getStatusType(order.status)">{{ getStatusText(order.status) }}</el-tag>
           </div>
-          
-          <!-- 订单商品 -->
+
           <div class="p-6">
-            <div 
-              v-for="item in order.items" 
-              :key="item.id"
-              class="flex gap-4 mb-4 last:mb-0"
-            >
-              <img 
-                :src="item.productImage || '/default-product.png'"
-                :alt="item.productName"
-                class="w-20 h-20 object-cover rounded"
-                @error="handleImageError"
-              >
+            <div v-for="item in order.items" :key="item.id" class="flex gap-4 mb-4 last:mb-0">
+              <SafeImage :src="item.productImage" :alt="item.productName" wrapper-class="w-20 h-20 rounded" img-class="w-20 h-20 object-cover rounded" />
               <div class="flex-1">
                 <h4 class="font-semibold">{{ item.productName }}</h4>
-                <div class="text-sm text-gray-500 mt-1">
-                  ¥{{ item.price }} × {{ item.quantity }}
-                </div>
-              </div>
-              <div class="text-right">
-                <div class="font-semibold">¥{{ item.subtotal }}</div>
+                <div class="text-sm text-gray-500 mt-1">¥{{ item.price }} × {{ item.quantity }}</div>
               </div>
+              <div class="text-right"><div class="font-semibold">¥{{ item.subtotal }}</div></div>
             </div>
           </div>
-          
-          <!-- 订单底部 -->
+
           <div class="border-t px-6 py-4 flex justify-between items-center">
             <div>
               <span class="text-sm text-gray-500">实付金额：</span>
-              <span class="text-xl font-bold text-red-500">
-                ¥{{ order.paymentAmount || order.totalAmount }}
-              </span>
+              <span class="text-xl font-bold text-red-500">¥{{ order.paymentAmount || order.totalAmount }}</span>
             </div>
             <div class="space-x-2">
-              <el-button 
-                text 
-                type="primary"
-                @click="handleViewDetail(order.id)"
-              >
-                查看详情
-              </el-button>
-              
-              <!-- 根据状态显示不同操作 -->
+              <el-button text type="primary" @click="handleViewDetail(order.id)">查看详情</el-button>
+
               <template v-if="order.status === 'PENDING'">
-                <el-button type="primary" size="small" @click="handlePay(order)">
-                  立即付款
-                </el-button>
-                <el-button size="small" @click="handleCancel(order)">
-                  取消订单
-                </el-button>
+                <el-button type="primary" size="small" @click="handlePay(order)">立即付款</el-button>
+                <el-button size="small" @click="handleCancel(order)">取消订单</el-button>
               </template>
-              
+
               <template v-else-if="order.status === 'SHIPPED'">
-                <el-button type="primary" size="small" @click="handleConfirm(order)">
-                  确认收货
-                </el-button>
+                <el-button type="primary" size="small" @click="handleConfirm(order)">确认收货</el-button>
               </template>
-              
+
               <template v-else-if="order.status === 'COMPLETED'">
-                <el-button size="small" @click="handleReview(order)">
-                  评价
-                </el-button>
-                <el-button size="small" @click="handleRebuy(order)">
-                  再次购买
-                </el-button>
+                <el-button size="small" @click="handleReview(order)">评价</el-button>
+                <el-button size="small" @click="handleRebuy(order)">再次购买</el-button>
+                <el-button text type="danger" size="small" @click="handleDelete(order)">删除订单</el-button>
               </template>
-              
-              <template v-else-if="order.status === 'CANCELLED' || order.status === 'REFUNDED'">
-                <el-button text type="danger" size="small" @click="handleDelete(order)">
-                  删除订单
-                </el-button>
+
+              <template v-else-if="order.status === 'CANCELLED'">
+                <el-button text type="danger" size="small" @click="handleDelete(order)">删除订单</el-button>
               </template>
             </div>
           </div>
         </div>
       </div>
-      
-      <!-- 分页 -->
+
       <div v-if="orders.length > 0" class="mt-8 flex justify-center">
-        <el-pagination
-          v-model:current-page="pagination.page"
-          v-model:page-size="pagination.size"
-          :total="pagination.total"
-          :page-sizes="[10, 20, 30, 50]"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="loadOrders"
-          @current-change="loadOrders"
-        />
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.size" :total="pagination.total" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" @size-change="loadOrders" @current-change="loadOrders" />
       </div>
     </div>
   </div>
@@ -185,29 +110,21 @@ import { ref, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { orderApi } from '@/api/modules/order'
+import { reviewApi } from '@/api/modules/review'
+import { useCartStore } from '@/stores/cart'
 import type { Order } from '@/types/api'
 import dayjs from 'dayjs'
+import SafeImage from '@/components/common/SafeImage.vue'
 
 const router = useRouter()
+const cartStore = useCartStore()
 
-// 数据状态
 const loading = ref(false)
 const orders = ref<Order[]>([])
 
-// 筛选条件
-const filters = reactive({
-  status: '',
-  keyword: ''
-})
+const filters = reactive({ status: '', keyword: '' })
+const pagination = reactive({ page: 1, size: 10, total: 0 })
 
-// 分页
-const pagination = reactive({
-  page: 1,
-  size: 10,
-  total: 0
-})
-
-// 订单统计
 const orderStats = ref([
   { key: '', label: '全部', count: 0, icon: 'List', color: 'text-gray-500' },
   { key: 'PENDING', label: '待付款', count: 0, icon: 'Clock', color: 'text-orange-500' },
@@ -217,186 +134,93 @@ const orderStats = ref([
   { key: 'CANCELLED', label: '已取消', count: 0, icon: 'CircleClose', color: 'text-gray-400' },
 ])
 
-// 格式化时间
-const formatTime = (time: string) => {
-  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
-}
+const formatTime = (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss')
 
-// 处理图片错误
-const handleImageError = (e: Event) => {
-  const target = e.target as HTMLImageElement
-  target.src = '/default-product.png'
-}
+const getStatusType = (status: string) => ({ PENDING: 'warning', PAID: 'primary', SHIPPED: 'primary', COMPLETED: 'success', CANCELLED: 'info', REFUNDED: 'danger' }[status] || 'info')
+const getStatusText = (status: string) => ({ PENDING: '待付款', PAID: '待发货', SHIPPED: '待收货', COMPLETED: '已完成', CANCELLED: '已取消', REFUNDED: '已退款' }[status] || status)
 
-// 获取状态类型
-const getStatusType = (status: string) => {
-  const map: Record<string, string> = {
-    'PENDING': 'warning',
-    'PAID': 'primary',
-    'SHIPPED': 'primary',
-    'COMPLETED': 'success',
-    'CANCELLED': 'info',
-    'REFUNDED': 'danger'
-  }
-  return map[status] || 'info'
-}
-
-// 获取状态文本
-const getStatusText = (status: string) => {
-  const map: Record<string, string> = {
-    'PENDING': '待付款',
-    'PAID': '待发货',
-    'SHIPPED': '待收货',
-    'COMPLETED': '已完成',
-    'CANCELLED': '已取消',
-    'REFUNDED': '已退款'
-  }
-  return map[status] || status
-}
-
-// 加载订单列表
 const loadOrders = async () => {
   loading.value = true
   try {
-    const res = await orderApi.getList({
-      ...filters,
-      page: pagination.page - 1,
-      size: pagination.size
-    })
-    
+    const res = await orderApi.getList({ page: pagination.page - 1, size: pagination.size, status: filters.status || undefined })
     if (res.success) {
-      orders.value = res.data.content
+      const keyword = filters.keyword.trim().toLowerCase()
+      const list = res.data.content
+      orders.value = keyword
+        ? list.filter((order) => order.orderNo.toLowerCase().includes(keyword) || order.items.some((item) => item.productName.toLowerCase().includes(keyword)))
+        : list
       pagination.total = res.data.totalElements
     }
-  } catch (error) {
-    console.error('加载订单失败:', error)
   } finally {
     loading.value = false
   }
 }
 
-// 加载订单统计
 const loadStatistics = async () => {
   try {
     const res = await orderApi.getStatistics()
     if (res.success) {
-      const stats = res.data
-      orderStats.value[0].count = stats.total
-      orderStats.value[1].count = stats.pending
-      orderStats.value[2].count = stats.paid
-      orderStats.value[3].count = stats.shipped
-      orderStats.value[4].count = stats.completed
-      orderStats.value[5].count = stats.cancelled
+      orderStats.value[0].count = res.data.total
+      orderStats.value[1].count = res.data.pending
+      orderStats.value[2].count = res.data.paid
+      orderStats.value[3].count = res.data.shipped
+      orderStats.value[4].count = res.data.completed
+      orderStats.value[5].count = res.data.cancelled
     }
   } catch (error) {
     console.error('加载统计失败:', error)
   }
 }
 
-// 状态筛选
-const handleStatusFilter = (status: string) => {
-  filters.status = status
-  pagination.page = 1
-  loadOrders()
+const handleStatusFilter = (status: string) => { filters.status = status; pagination.page = 1; loadOrders() }
+const handleViewDetail = (orderId: number) => router.push(`/order/${orderId}`)
+
+const handlePay = async (order: Order) => {
+  await ElMessageBox.confirm(`订单金额：¥${order.paymentAmount || order.totalAmount}，确认付款？`, '付款确认', { confirmButtonText: '确认付款', cancelButtonText: '取消', type: 'warning' })
+  try { await orderApi.pay(order.id, 'ONLINE'); ElMessage.success('付款成功'); loadOrders(); loadStatistics() } catch (error) { console.error('付款失败:', error) }
 }
 
-// 查看详情
-const handleViewDetail = (orderId: number) => {
-  router.push(`/order/${orderId}`)
-}
-
-// 付款
-const handlePay = (order: Order) => {
-  ElMessageBox.confirm(
-    `订单金额：¥${order.totalAmount}，确认付款？`,
-    '付款确认',
-    {
-      confirmButtonText: '确认付款',
-      cancelButtonText: '取消',
-      type: 'warning',
-    }
-  ).then(async () => {
-    try {
-      await orderApi.pay(order.id, 'ONLINE')
-      ElMessage.success('付款成功')
-      loadOrders()
-      loadStatistics()
-    } catch (error) {
-      console.error('付款失败:', error)
-    }
-  })
-}
-
-// 取消订单
 const handleCancel = async (order: Order) => {
-  await ElMessageBox.confirm('确定要取消该订单吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  })
-  
-  try {
-    await orderApi.cancel(order.id)
-    ElMessage.success('订单已取消')
-    loadOrders()
-    loadStatistics()
-  } catch (error) {
-    console.error('取消订单失败:', error)
-  }
+  await ElMessageBox.confirm('确定要取消该订单吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
+  try { await orderApi.cancel(order.id); ElMessage.success('订单已取消'); loadOrders(); loadStatistics() } catch (error) { console.error('取消订单失败:', error) }
 }
 
-// 确认收货
 const handleConfirm = async (order: Order) => {
-  await ElMessageBox.confirm('确定已收到商品？', '确认收货', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  })
-  
+  await ElMessageBox.confirm('确定已收到商品？', '确认收货', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
+  try { await orderApi.confirm(order.id); ElMessage.success('已确认收货'); loadOrders(); loadStatistics() } catch (error) { console.error('确认收货失败:', error) }
+}
+
+const handleReview = async (order: Order) => {
+  const firstItem = order.items[0]
+  if (!firstItem) return
+
   try {
-    await orderApi.confirm(order.id)
-    ElMessage.success('已确认收货')
-    loadOrders()
-    loadStatistics()
+    const { value } = await ElMessageBox.prompt('请输入本次购物评价', '商品评价', {
+      inputType: 'textarea',
+      inputPlaceholder: '分享一下你的使用感受吧',
+      confirmButtonText: '提交评价',
+      cancelButtonText: '取消',
+    })
+    await reviewApi.create({ orderId: order.id, productId: firstItem.productId, rating: 5, content: value })
+    ElMessage.success('评价提交成功')
   } catch (error) {
-    console.error('确认收货失败:', error)
+    if (error) console.error('提交评价失败:', error)
   }
 }
 
-// 评价
-const handleReview = (order: Order) => {
-  ElMessage.info('评价功能开发中...')
-}
-
-// 再次购买
-const handleRebuy = (order: Order) => {
-  // 将商品重新加入购物车
-  ElMessage.success('商品已加入购物车')
+const handleRebuy = async (order: Order) => {
+  const firstItem = order.items[0]
+  if (!firstItem) return
+  await cartStore.addToCart(firstItem.productId, firstItem.quantity)
   router.push('/cart')
 }
 
-// 删除订单
 const handleDelete = async (order: Order) => {
-  await ElMessageBox.confirm('确定要删除该订单吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  })
-  
-  try {
-    await orderApi.delete(order.id)
-    ElMessage.success('订单已删除')
-    loadOrders()
-    loadStatistics()
-  } catch (error) {
-    console.error('删除订单失败:', error)
-  }
+  await ElMessageBox.confirm('确定删除该订单吗？删除后不可恢复。', '删除确认', { confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' })
+  try { await orderApi.delete(order.id); ElMessage.success('订单已删除'); loadOrders(); loadStatistics() } catch (error) { console.error('删除订单失败:', error) }
 }
 
-onMounted(() => {
-  loadOrders()
-  loadStatistics()
-})
+onMounted(() => { loadOrders(); loadStatistics() })
 </script>
 
 <style scoped lang="scss">
@@ -404,4 +228,4 @@ onMounted(() => {
   min-height: calc(100vh - 60px);
   background-color: #f5f5f5;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/flash-sale-frontend/src/pages/product/detail.vue b/flash-sale-frontend/src/pages/product/detail.vue
index 2f8d215..165d1f4 100644
--- a/flash-sale-frontend/src/pages/product/detail.vue
+++ b/flash-sale-frontend/src/pages/product/detail.vue
@@ -25,12 +25,7 @@
           <!-- 左侧：商品图片 -->
           <div>
             <div class="relative">
-              <img 
-                :src="currentImage || '/default-product.png'" 
-                :alt="product.name"
-                class="w-full rounded-lg"
-                @error="handleImageError"
-              >
+              <SafeImage :src="currentImage" :alt="product?.name || '商品图片'" wrapper-class="w-full h-[420px] rounded-2xl overflow-hidden bg-gray-100" img-class="w-full h-[420px] object-cover" />
               
               <!-- 商品状态 -->
               <div v-if="product.stock === 0" class="absolute top-4 right-4">
@@ -140,6 +135,10 @@
                   <dt class="text-gray-500">商品分类</dt>
                   <dd class="font-medium">{{ product.category }}</dd>
                 </div>
+                <div>
+                  <dt class="text-gray-500">用户评分</dt>
+                  <dd class="font-medium">{{ reviewSummary.averageRating.toFixed(1) }} / 5（{{ reviewSummary.totalReviews }} 条）</dd>
+                </div>
                 <div>
                   <dt class="text-gray-500">上架时间</dt>
                   <dd class="font-medium">{{ formatTime(product.createdAt) }}</dd>
@@ -162,6 +161,33 @@
               </div>
             </el-tab-pane>
             
+            <el-tab-pane label="用户评价" name="reviews">
+              <div class="py-6">
+                <div class="mb-4 flex items-center justify-between bg-gray-50 rounded-lg p-4">
+                  <div>
+                    <div class="text-2xl font-bold text-yellow-500">{{ reviewSummary.averageRating.toFixed(1) }}</div>
+                    <div class="text-sm text-gray-500">累计 {{ reviewSummary.totalReviews }} 条评价</div>
+                  </div>
+                  <el-rate :model-value="reviewSummary.averageRating" disabled show-score text-color="#f59e0b" />
+                </div>
+                <div v-if="reviewSummary.reviews.length > 0" class="space-y-4">
+                  <div v-for="review in reviewSummary.reviews" :key="review.id" class="border rounded-lg p-4">
+                    <div class="flex items-center justify-between mb-2">
+                      <div class="font-semibold">{{ review.username }}</div>
+                      <div class="text-sm text-gray-400">{{ formatTime(review.createdAt) }}</div>
+                    </div>
+                    <el-rate :model-value="review.rating" disabled />
+                    <p class="text-gray-600 mt-3 leading-6">{{ review.content }}</p>
+                    <div v-if="review.adminReply" class="mt-3 rounded-lg bg-gray-50 border border-gray-200 p-3 text-sm text-gray-600">
+                      <div class="font-medium text-gray-800 mb-1">商家回复</div>
+                      <div>{{ review.adminReply }}</div>
+                    </div>
+                  </div>
+                </div>
+                <el-empty v-else description="暂无评价" />
+              </div>
+            </el-tab-pane>
+
             <el-tab-pane label="规格参数" name="specs">
               <div class="py-6">
                 <p class="text-gray-500">暂无规格参数</p>
@@ -190,10 +216,14 @@ import { ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { productApi } from '@/api/modules/product'
+import { reviewApi } from '@/api/modules/review'
+import { favoriteApi } from '@/api/modules/favorite'
 import { useCartStore } from '@/stores/cart'
 import { useUserStore } from '@/stores/user'
 import type { Product } from '@/types/api'
 import dayjs from 'dayjs'
+import SafeImage from '@/components/common/SafeImage.vue'
+import { DEFAULT_PRODUCT_IMAGE, resolveImageUrl } from '@/utils/image'
 
 const route = useRoute()
 const router = useRouter()
@@ -206,6 +236,8 @@ const currentImage = ref('')
 const quantity = ref(1)
 const activeTab = ref('detail')
 const isFavorited = ref(false)
+const reviewSummary = ref({ averageRating: 0, totalReviews: 0, reviews: [] as Array<{ id: number; username: string; rating: number; content: string; adminReply?: string; createdAt: string }> })
+const defaultProductImage = DEFAULT_PRODUCT_IMAGE
 
 // 格式化时间
 const formatTime = (time: string) => {
@@ -213,10 +245,6 @@ const formatTime = (time: string) => {
 }
 
 // 处理图片错误
-const handleImageError = (e: Event) => {
-  const target = e.target as HTMLImageElement
-  target.src = '/default-product.png'
-}
 
 // 加载商品详情
 const loadProductDetail = async () => {
@@ -227,7 +255,14 @@ const loadProductDetail = async () => {
     
     if (res.success) {
       product.value = res.data
-      currentImage.value = res.data.imageUrl || res.data.images?.[0] || ''
+      currentImage.value = resolveImageUrl(res.data.imageUrl || res.data.images?.[0] || '')
+      await loadReviews(res.data.id)
+      if (userStore.isLoggedIn) {
+        const favoriteRes = await favoriteApi.check(res.data.id)
+        if (favoriteRes.success) {
+          isFavorited.value = favoriteRes.data.favorited
+        }
+      }
     }
   } catch (error) {
     console.error('加载商品详情失败:', error)
@@ -237,6 +272,17 @@ const loadProductDetail = async () => {
   }
 }
 
+const loadReviews = async (productId: number) => {
+  try {
+    const res = await reviewApi.getProductReviews(productId)
+    if (res.success) {
+      reviewSummary.value = res.data
+    }
+  } catch (error) {
+    console.error('加载评价失败:', error)
+  }
+}
+
 // 加入购物车
 const handleAddToCart = async () => {
   if (!userStore.isLoggedIn) {
@@ -278,7 +324,7 @@ const handleBuyNow = async () => {
 }
 
 // 收藏/取消收藏
-const handleFavorite = () => {
+const handleFavorite = async () => {
   if (!userStore.isLoggedIn) {
     ElMessage.warning('请先登录')
     router.push({
@@ -287,9 +333,14 @@ const handleFavorite = () => {
     })
     return
   }
-  
-  isFavorited.value = !isFavorited.value
-  ElMessage.success(isFavorited.value ? '已收藏' : '已取消收藏')
+
+  if (!product.value) return
+
+  const res = await favoriteApi.toggle(product.value.id)
+  if (res.success) {
+    isFavorited.value = res.data.favorited
+    ElMessage.success(isFavorited.value ? '已收藏' : '已取消收藏')
+  }
 }
 
 onMounted(() => {
diff --git a/flash-sale-frontend/src/pages/product/index.vue b/flash-sale-frontend/src/pages/product/index.vue
index a971c6b..a218412 100644
--- a/flash-sale-frontend/src/pages/product/index.vue
+++ b/flash-sale-frontend/src/pages/product/index.vue
@@ -168,7 +168,7 @@ const loadProducts = async () => {
       params.sort = 'price'
       params.order = 'desc'
     } else if (filters.sort === 'sales') {
-      params.sort = 'sales'
+      params.sort = 'createdAt'
       params.order = 'desc'
     }
     
diff --git a/flash-sale-frontend/src/pages/user/favorites.vue b/flash-sale-frontend/src/pages/user/favorites.vue
new file mode 100644
index 0000000..bd6b56f
--- /dev/null
+++ b/flash-sale-frontend/src/pages/user/favorites.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="favorites-page">
+    <div class="container mx-auto px-4 py-8">
+      <div class="mb-8">
+        <h1 class="text-3xl font-bold mb-2 flex items-center">
+          <el-icon class="text-pink-500 mr-2"><StarFilled /></el-icon>
+          我的收藏
+        </h1>
+        <p class="text-gray-600">收藏你感兴趣的商品，随时回来查看</p>
+      </div>
+
+      <div v-if="loading" class="text-center py-12">
+        <el-icon :size="40" class="animate-spin"><Loading /></el-icon>
+        <p class="mt-2 text-gray-500">加载中...</p>
+      </div>
+
+      <div v-else-if="favorites.length === 0" class="bg-white rounded-lg shadow-sm p-12">
+        <el-empty description="暂无收藏商品">
+          <el-button type="primary" @click="router.push('/products')">去逛逛</el-button>
+        </el-empty>
+      </div>
+
+      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        <div v-for="item in favorites" :key="item.id" class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow">
+          <SafeImage
+            :src="item.productImageUrl"
+            :alt="item.productName"
+            wrapper-class="w-full h-48 bg-gray-100"
+            img-class="w-full h-48 object-cover"
+            :clickable="true"
+            @click="router.push(`/product/${item.productId}`)"
+          />
+          <div class="p-4">
+            <h3 class="font-semibold mb-2 line-clamp-1">{{ item.productName }}</h3>
+            <p class="text-sm text-gray-500 mb-3">{{ item.productCategory || '默认分类' }}</p>
+            <div class="flex justify-between items-center mb-4">
+              <span class="text-xl font-bold text-red-500">¥{{ item.productPrice }}</span>
+              <span class="text-xs text-gray-400">收藏于 {{ formatTime(item.createdAt) }}</span>
+            </div>
+            <div class="flex gap-2">
+              <el-button type="primary" class="flex-1" @click="addToCart(item.productId)">加入购物车</el-button>
+              <el-button @click="toggleFavorite(item.productId)">取消收藏</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import dayjs from 'dayjs'
+import { ElMessage } from 'element-plus'
+import { favoriteApi, type FavoriteItem } from '@/api/modules/favorite'
+import { useCartStore } from '@/stores/cart'
+import SafeImage from '@/components/common/SafeImage.vue'
+
+const router = useRouter()
+const cartStore = useCartStore()
+const loading = ref(false)
+const favorites = ref<FavoriteItem[]>([])
+
+const formatTime = (value: string) => dayjs(value).format('YYYY-MM-DD')
+
+const loadFavorites = async () => {
+  loading.value = true
+  try {
+    const res = await favoriteApi.getList()
+    if (res.success) favorites.value = res.data || []
+  } finally {
+    loading.value = false
+  }
+}
+
+const addToCart = async (productId: number) => {
+  await cartStore.addToCart(productId)
+}
+
+const toggleFavorite = async (productId: number) => {
+  const res = await favoriteApi.toggle(productId)
+  if (res.success) {
+    ElMessage.success(res.data.favorited ? '收藏成功' : '已取消收藏')
+    loadFavorites()
+  }
+}
+
+onMounted(() => {
+  loadFavorites()
+})
+</script>
+
+<style scoped lang="scss">
+.favorites-page {
+  min-height: calc(100vh - 60px);
+  background-color: #f5f5f5;
+}
+
+.line-clamp-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>
diff --git a/flash-sale-frontend/src/pages/user/login.vue b/flash-sale-frontend/src/pages/user/login.vue
index bd1e714..7bb8f65 100644
--- a/flash-sale-frontend/src/pages/user/login.vue
+++ b/flash-sale-frontend/src/pages/user/login.vue
@@ -86,8 +86,8 @@
       <div class="mt-4 p-4 bg-blue-50 rounded-lg">
         <h3 class="font-semibold text-blue-900 mb-2">测试账号</h3>
         <div class="text-sm text-blue-700">
-          <p>普通用户: user / 123456</p>
-          <p>管理员: admin / 123456</p>
+          <p>普通用户: demo1 / 123456</p>
+          <p>管理员: admin / admin123</p>
         </div>
       </div>
     </div>
@@ -96,13 +96,10 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import { ElMessage, ElForm } from 'element-plus'
 import type { FormInstance, FormRules } from 'element-plus'
 import { useUserStore } from '@/stores/user'
 import type { LoginParams } from '@/types/api'
 
-const router = useRouter()
 const userStore = useUserStore()
 
 const formRef = ref<FormInstance>()
@@ -147,11 +144,11 @@ const handleLogin = async () => {
 // 快速登录
 const quickLogin = (type: 'user' | 'admin') => {
   if (type === 'user') {
-    loginForm.username = 'user'
+    loginForm.username = 'demo1'
     loginForm.password = '123456'
   } else {
     loginForm.username = 'admin'
-    loginForm.password = '123456'
+    loginForm.password = 'admin123'
   }
   loginForm.rememberMe = true
   handleLogin()
@@ -162,4 +159,4 @@ const quickLogin = (type: 'user' | 'admin') => {
 .login-page {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/flash-sale-frontend/src/pages/user/profile.vue b/flash-sale-frontend/src/pages/user/profile.vue
index 0bc4fe5..299d3bf 100644
--- a/flash-sale-frontend/src/pages/user/profile.vue
+++ b/flash-sale-frontend/src/pages/user/profile.vue
@@ -1,303 +1,325 @@
 <template>
   <div class="profile-page">
     <div class="container mx-auto px-4 py-8">
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+        <div class="stat-card blue">
+          <div class="stat-value">{{ profileStats.totalOrders }}</div>
+          <div class="stat-label">总订单数</div>
+        </div>
+        <div class="stat-card green">
+          <div class="stat-value">¥{{ Number(profileStats.totalAmount || 0).toFixed(2) }}</div>
+          <div class="stat-label">累计消费</div>
+        </div>
+        <div class="stat-card orange">
+          <div class="stat-value">{{ profileStats.flashSaleSuccess }}</div>
+          <div class="stat-label">秒杀成功</div>
+        </div>
+        <div class="stat-card purple">
+          <div class="stat-value">{{ profileStats.favoriteCount }}</div>
+          <div class="stat-label">收藏商品</div>
+        </div>
+      </div>
+
       <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
-        <!-- 左侧菜单 -->
         <div class="lg:col-span-1">
           <div class="bg-white rounded-lg shadow-sm p-6">
-            <!-- 用户头像 -->
             <div class="text-center mb-6">
-              <el-avatar :size="80" :src="userStore.user?.avatar">
-                {{ userStore.username[0] }}
+              <el-avatar :size="80" :src="infoForm.avatar">
+                {{ (userStore.username || 'U')[0] }}
               </el-avatar>
               <h3 class="mt-3 font-semibold">{{ userStore.username }}</h3>
               <p class="text-sm text-gray-500">{{ userStore.user?.email }}</p>
             </div>
-            
-            <!-- 菜单列表 -->
-            <el-menu
-              :default-active="activeMenu"
-              @select="handleMenuSelect"
-            >
-              <el-menu-item index="info">
-                <el-icon><User /></el-icon>
-                <span>基本信息</span>
-              </el-menu-item>
-              <el-menu-item index="security">
-                <el-icon><Lock /></el-icon>
-                <span>账号安全</span>
-              </el-menu-item>
-              <el-menu-item index="address">
-                <el-icon><Location /></el-icon>
-                <span>收货地址</span>
-              </el-menu-item>
-              <el-menu-item index="orders">
-                <el-icon><List /></el-icon>
-                <span>我的订单</span>
-              </el-menu-item>
+
+            <el-menu :default-active="activeMenu" @select="handleMenuSelect">
+              <el-menu-item index="info"><el-icon><User /></el-icon><span>基本信息</span></el-menu-item>
+              <el-menu-item index="security"><el-icon><Lock /></el-icon><span>账号安全</span></el-menu-item>
+              <el-menu-item index="address"><el-icon><Location /></el-icon><span>收货地址</span></el-menu-item>
+              <el-menu-item index="orders"><el-icon><List /></el-icon><span>我的订单</span></el-menu-item>
+              <el-menu-item index="favorites"><el-icon><Star /></el-icon><span>我的收藏</span></el-menu-item>
             </el-menu>
           </div>
         </div>
-        
-        <!-- 右侧内容 -->
+
         <div class="lg:col-span-3">
           <div class="bg-white rounded-lg shadow-sm p-6">
-            <!-- 基本信息 -->
             <div v-if="activeMenu === 'info'">
               <h2 class="text-xl font-semibold mb-6">基本信息</h2>
-              
-              <el-form
-                ref="infoFormRef"
-                :model="infoForm"
-                :rules="infoRules"
-                label-width="100px"
-              >
-                <el-form-item label="用户名" prop="username">
-                  <el-input v-model="infoForm.username" disabled />
-                </el-form-item>
-                
-                <el-form-item label="邮箱" prop="email">
-                  <el-input v-model="infoForm.email" />
-                </el-form-item>
-                
-                <el-form-item label="手机号" prop="phone">
-                  <el-input v-model="infoForm.phone" />
-                </el-form-item>
-                
+              <el-form ref="infoFormRef" :model="infoForm" :rules="infoRules" label-width="100px">
+                <el-form-item label="用户名"><el-input v-model="infoForm.username" disabled /></el-form-item>
+                <el-form-item label="邮箱" prop="email"><el-input v-model="infoForm.email" /></el-form-item>
+                <el-form-item label="手机号" prop="phone"><el-input v-model="infoForm.phone" /></el-form-item>
                 <el-form-item label="头像">
                   <div class="flex items-center gap-4">
-                    <el-avatar :size="60" :src="infoForm.avatar">
-                      {{ infoForm.username[0] }}
-                    </el-avatar>
-                    <el-button>更换头像</el-button>
+                    <el-avatar :size="60" :src="infoForm.avatar">{{ (infoForm.username || 'U')[0] }}</el-avatar>
+                    <el-button @click="handleUpdateAvatar">更换头像</el-button>
                   </div>
                 </el-form-item>
-                
-                <el-form-item>
-                  <el-button type="primary" @click="handleSaveInfo">
-                    保存修改
-                  </el-button>
-                </el-form-item>
+                <el-form-item><el-button type="primary" @click="handleSaveInfo">保存修改</el-button></el-form-item>
               </el-form>
             </div>
-            
-            <!-- 账号安全 -->
+
             <div v-else-if="activeMenu === 'security'">
               <h2 class="text-xl font-semibold mb-6">账号安全</h2>
-              
-              <el-form
-                ref="passwordFormRef"
-                :model="passwordForm"
-                :rules="passwordRules"
-                label-width="100px"
-              >
-                <el-form-item label="原密码" prop="oldPassword">
-                  <el-input
-                    v-model="passwordForm.oldPassword"
-                    type="password"
-                    show-password
-                  />
-                </el-form-item>
-                
-                <el-form-item label="新密码" prop="newPassword">
-                  <el-input
-                    v-model="passwordForm.newPassword"
-                    type="password"
-                    show-password
-                  />
-                </el-form-item>
-                
-                <el-form-item label="确认密码" prop="confirmPassword">
-                  <el-input
-                    v-model="passwordForm.confirmPassword"
-                    type="password"
-                    show-password
-                  />
-                </el-form-item>
-                
-                <el-form-item>
-                  <el-button type="primary" @click="handleChangePassword">
-                    修改密码
-                  </el-button>
-                </el-form-item>
+              <el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" label-width="100px">
+                <el-form-item label="原密码" prop="oldPassword"><el-input v-model="passwordForm.oldPassword" type="password" show-password /></el-form-item>
+                <el-form-item label="新密码" prop="newPassword"><el-input v-model="passwordForm.newPassword" type="password" show-password /></el-form-item>
+                <el-form-item label="确认密码" prop="confirmPassword"><el-input v-model="passwordForm.confirmPassword" type="password" show-password /></el-form-item>
+                <el-form-item><el-button type="primary" @click="handleChangePassword">修改密码</el-button></el-form-item>
               </el-form>
             </div>
-            
-            <!-- 收货地址 -->
+
             <div v-else-if="activeMenu === 'address'">
               <div class="flex justify-between items-center mb-6">
                 <h2 class="text-xl font-semibold">收货地址</h2>
-                <el-button type="primary" @click="handleAddAddress">
-                  <el-icon class="mr-1"><Plus /></el-icon>
-                  添加地址
-                </el-button>
+                <el-button type="primary" @click="openAddressDialog()"><el-icon class="mr-1"><Plus /></el-icon>添加地址</el-button>
               </div>
-              
               <div class="space-y-4">
-                <div 
-                  v-for="addr in addresses" 
-                  :key="addr.id"
-                  class="border rounded-lg p-4"
-                >
-                  <div class="flex justify-between items-start">
+                <div v-for="addr in addresses" :key="addr.id" class="border rounded-lg p-4">
+                  <div class="flex justify-between items-start gap-4">
                     <div>
-                      <div class="flex items-center gap-2 mb-2">
+                      <div class="flex items-center gap-2 mb-2 flex-wrap">
                         <span class="font-semibold">{{ addr.name }}</span>
                         <span class="text-gray-500">{{ addr.phone }}</span>
-                        <el-tag v-if="addr.isDefault" type="primary" size="small">
-                          默认
-                        </el-tag>
+                        <el-tag v-if="addr.isDefault" type="primary" size="small">默认</el-tag>
                       </div>
-                      <p class="text-gray-600">
-                        {{ addr.province }} {{ addr.city }} {{ addr.district }} {{ addr.address }}
-                      </p>
+                      <p class="text-gray-600">{{ addr.province }} {{ addr.city }} {{ addr.district }} {{ addr.address }}</p>
                     </div>
-                    <div class="space-x-2">
-                      <el-button text type="primary" size="small">编辑</el-button>
-                      <el-button text type="danger" size="small">删除</el-button>
+                    <div class="space-x-2 whitespace-nowrap">
+                      <el-button v-if="!addr.isDefault" text type="success" size="small" @click="setDefaultAddress(addr.id)">设为默认</el-button>
+                      <el-button text type="primary" size="small" @click="openAddressDialog(addr)">编辑</el-button>
+                      <el-button text type="danger" size="small" @click="removeAddress(addr.id)">删除</el-button>
                     </div>
                   </div>
                 </div>
-                
                 <el-empty v-if="addresses.length === 0" description="暂无收货地址" />
               </div>
             </div>
-            
-            <!-- 我的订单 -->
+
             <div v-else-if="activeMenu === 'orders'">
               <h2 class="text-xl font-semibold mb-6">我的订单</h2>
-              <p class="text-gray-500">请访问 <router-link to="/orders" class="text-primary-500">订单页面</router-link> 查看详细订单信息</p>
+              <p class="text-gray-500">正在跳转到订单列表页...</p>
+            </div>
+
+            <div v-else-if="activeMenu === 'favorites'">
+              <h2 class="text-xl font-semibold mb-6">我的收藏</h2>
+              <p class="text-gray-500">正在跳转到收藏页...</p>
             </div>
           </div>
         </div>
       </div>
     </div>
+
+    <el-dialog v-model="addressDialogVisible" :title="editingAddressId ? '编辑地址' : '新增地址'" width="620px">
+      <el-form ref="addressFormRef" :model="addressForm" :rules="addressRules" label-width="90px">
+        <el-row :gutter="16">
+          <el-col :span="12"><el-form-item label="收货人" prop="name"><el-input v-model="addressForm.name" /></el-form-item></el-col>
+          <el-col :span="12"><el-form-item label="手机号" prop="phone"><el-input v-model="addressForm.phone" /></el-form-item></el-col>
+        </el-row>
+        <el-row :gutter="16">
+          <el-col :span="8"><el-form-item label="省份" prop="province"><el-input v-model="addressForm.province" /></el-form-item></el-col>
+          <el-col :span="8"><el-form-item label="城市" prop="city"><el-input v-model="addressForm.city" /></el-form-item></el-col>
+          <el-col :span="8"><el-form-item label="区县" prop="district"><el-input v-model="addressForm.district" /></el-form-item></el-col>
+        </el-row>
+        <el-form-item label="详细地址" prop="address"><el-input v-model="addressForm.address" type="textarea" :rows="3" /></el-form-item>
+        <el-form-item><el-checkbox v-model="addressForm.isDefault">设为默认地址</el-checkbox></el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="addressDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="saveAddress">保存</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { ElMessage, ElForm } from 'element-plus'
+import { onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import type { FormInstance, FormRules } from 'element-plus'
 import { useUserStore } from '@/stores/user'
 import { userApi } from '@/api/modules/user'
+import { addressApi, type AddressItem } from '@/api/modules/address'
 
+const route = useRoute()
 const router = useRouter()
 const userStore = useUserStore()
 
 const activeMenu = ref('info')
 const infoFormRef = ref<FormInstance>()
 const passwordFormRef = ref<FormInstance>()
+const addressFormRef = ref<FormInstance>()
+const addressDialogVisible = ref(false)
+const editingAddressId = ref<number | null>(null)
+const addresses = ref<AddressItem[]>([])
+const profileStats = reactive({ totalOrders: 0, totalAmount: 0, flashSaleSuccess: 0, favoriteCount: 0 })
 
-// 基本信息表单
-const infoForm = reactive({
-  username: userStore.user?.username || '',
-  email: userStore.user?.email || '',
-  phone: userStore.user?.phone || '',
-  avatar: userStore.user?.avatar || ''
-})
+const infoForm = reactive({ username: '', email: '', phone: '', avatar: '' })
+const passwordForm = reactive({ oldPassword: '', newPassword: '', confirmPassword: '' })
+const addressForm = reactive<AddressItem>({ id: 0, name: '', phone: '', province: '', city: '', district: '', address: '', isDefault: false })
 
 const infoRules: FormRules = {
-  email: [
-    { required: true, message: '请输入邮箱', trigger: 'blur' },
-    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
-  ],
-  phone: [
-    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
-  ]
+  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }],
+  phone: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
 }
 
-// 修改密码表单
-const passwordForm = reactive({
-  oldPassword: '',
-  newPassword: '',
-  confirmPassword: ''
-})
-
-const validatePassword = (rule: any, value: any, callback: any) => {
-  if (value === '') {
-    callback(new Error('请再次输入密码'))
-  } else if (value !== passwordForm.newPassword) {
-    callback(new Error('两次输入密码不一致'))
-  } else {
-    callback()
-  }
+const validatePassword = (_rule: any, value: string, callback: (error?: Error) => void) => {
+  if (!value) callback(new Error('请再次输入密码'))
+  else if (value !== passwordForm.newPassword) callback(new Error('两次输入密码不一致'))
+  else callback()
 }
 
 const passwordRules: FormRules = {
-  oldPassword: [
-    { required: true, message: '请输入原密码', trigger: 'blur' }
-  ],
-  newPassword: [
-    { required: true, message: '请输入新密码', trigger: 'blur' },
-    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
-  ],
-  confirmPassword: [
-    { required: true, validator: validatePassword, trigger: 'blur' }
-  ]
+  oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
+  newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }],
+  confirmPassword: [{ required: true, validator: validatePassword, trigger: 'blur' }],
 }
 
-// 收货地址
-const addresses = ref<any[]>([])
+const addressRules: FormRules = {
+  name: [{ required: true, message: '请输入收货人', trigger: 'blur' }],
+  phone: [{ required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入正确手机号', trigger: 'blur' }],
+  province: [{ required: true, message: '请输入省份', trigger: 'blur' }],
+  city: [{ required: true, message: '请输入城市', trigger: 'blur' }],
+  district: [{ required: true, message: '请输入区县', trigger: 'blur' }],
+  address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
+}
 
-// 菜单选择
-const handleMenuSelect = (index: string) => {
-  activeMenu.value = index
-  if (index === 'orders') {
-    router.push('/orders')
+const syncInfoForm = () => {
+  infoForm.username = userStore.user?.username || ''
+  infoForm.email = userStore.user?.email || ''
+  infoForm.phone = userStore.user?.phone || ''
+  infoForm.avatar = userStore.user?.avatar || ''
+}
+
+const syncActiveMenu = () => {
+  if (route.path.endsWith('/addresses')) activeMenu.value = 'address'
+  else activeMenu.value = (route.query.tab as string) || 'info'
+}
+
+const loadAddresses = async () => {
+  try {
+    const res = await addressApi.getList()
+    if (res.success) addresses.value = res.data || []
+  } catch (error) {
+    console.error('加载地址失败:', error)
   }
 }
 
-// 保存基本信息
+const loadProfileStats = async () => {
+  try {
+    const res = await userApi.getProfileStats()
+    if (res.success) Object.assign(profileStats, res.data)
+  } catch (error) {
+    console.error('加载个人中心统计失败:', error)
+  }
+}
+
+const resetAddressForm = () => {
+  editingAddressId.value = null
+  Object.assign(addressForm, { id: 0, name: '', phone: '', province: '', city: '', district: '', address: '', isDefault: false })
+}
+
+const handleMenuSelect = (index: string) => {
+  activeMenu.value = index
+  if (index === 'orders') router.push('/orders')
+  else if (index === 'favorites') router.push('/favorites')
+  else if (index === 'address') router.push('/addresses')
+  else router.push({ path: '/profile', query: { tab: index } })
+}
+
 const handleSaveInfo = async () => {
   if (!infoFormRef.value) return
-  
   await infoFormRef.value.validate(async (valid) => {
-    if (valid) {
-      try {
-        const res = await userApi.updateInfo(infoForm)
-        if (res.success) {
-          userStore.updateUserInfo(infoForm)
-          ElMessage.success('保存成功')
-        }
-      } catch (error) {
-        console.error('保存失败:', error)
+    if (!valid) return
+    try {
+      const res = await userApi.updateInfo({ email: infoForm.email, phone: infoForm.phone, avatar: infoForm.avatar })
+      if (res.success) {
+        userStore.updateUserInfo(res.data)
+        ElMessage.success('保存成功')
       }
+    } catch (error) {
+      console.error('保存失败:', error)
     }
   })
 }
 
-// 修改密码
+const handleUpdateAvatar = async () => {
+  try {
+    const { value } = await ElMessageBox.prompt('请输入新的头像图片 URL', '更换头像', { inputValue: infoForm.avatar, confirmButtonText: '保存', cancelButtonText: '取消' })
+    infoForm.avatar = value || ''
+    userStore.updateUserInfo({ avatar: infoForm.avatar })
+    ElMessage.success('头像已更新')
+  } catch {}
+}
+
 const handleChangePassword = async () => {
   if (!passwordFormRef.value) return
-  
   await passwordFormRef.value.validate(async (valid) => {
-    if (valid) {
-      try {
-        const res = await userApi.changePassword({
-          oldPassword: passwordForm.oldPassword,
-          newPassword: passwordForm.newPassword
-        })
-        if (res.success) {
-          ElMessage.success('密码修改成功，请重新登录')
-          userStore.logout()
-        }
-      } catch (error) {
-        console.error('修改密码失败:', error)
+    if (!valid) return
+    try {
+      const res = await userApi.changePassword({ oldPassword: passwordForm.oldPassword, newPassword: passwordForm.newPassword, confirmPassword: passwordForm.confirmPassword })
+      if (res.success) {
+        ElMessage.success('密码修改成功，请重新登录')
+        await userStore.logout()
       }
+    } catch (error) {
+      console.error('修改密码失败:', error)
     }
   })
 }
 
-// 添加地址
-const handleAddAddress = () => {
-  ElMessage.info('功能开发中...')
+const openAddressDialog = (item?: AddressItem) => {
+  resetAddressForm()
+  if (item) {
+    editingAddressId.value = item.id
+    Object.assign(addressForm, item)
+  }
+  addressDialogVisible.value = true
 }
 
-onMounted(() => {
-  // 加载用户信息
-  userStore.getUserInfo()
+const saveAddress = async () => {
+  if (!addressFormRef.value) return
+  await addressFormRef.value.validate(async (valid) => {
+    if (!valid) return
+    const payload = { name: addressForm.name, phone: addressForm.phone, province: addressForm.province, city: addressForm.city, district: addressForm.district, address: addressForm.address, isDefault: addressForm.isDefault }
+    try {
+      if (editingAddressId.value) {
+        await addressApi.update(editingAddressId.value, payload)
+        ElMessage.success('地址已更新')
+      } else {
+        await addressApi.create(payload)
+        ElMessage.success('地址已新增')
+      }
+      addressDialogVisible.value = false
+      loadAddresses()
+    } catch (error) {
+      console.error('保存地址失败:', error)
+    }
+  })
+}
+
+const setDefaultAddress = async (id: number) => {
+  await addressApi.setDefault(id)
+  ElMessage.success('默认地址已更新')
+  loadAddresses()
+}
+
+const removeAddress = async (id: number) => {
+  await ElMessageBox.confirm('确定删除这个地址吗？', '提示', { type: 'warning' })
+  await addressApi.delete(id)
+  ElMessage.success('地址已删除')
+  loadAddresses()
+}
+
+watch(() => userStore.user, syncInfoForm, { immediate: true })
+watch(() => route.fullPath, syncActiveMenu, { immediate: true })
+
+onMounted(async () => {
+  if (userStore.token) await userStore.getUserInfo()
+  syncInfoForm()
+  syncActiveMenu()
+  loadAddresses()
+  loadProfileStats()
 })
 </script>
 
@@ -306,4 +328,21 @@ onMounted(() => {
   min-height: calc(100vh - 60px);
   background-color: #f5f5f5;
 }
-</style>
\ No newline at end of file
+
+.stat-card {
+  @apply rounded-lg p-5 text-white shadow-sm;
+
+  &.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
+  &.green { background: linear-gradient(135deg, #10b981, #059669); }
+  &.orange { background: linear-gradient(135deg, #f59e0b, #ea580c); }
+  &.purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
+}
+
+.stat-value {
+  @apply text-2xl font-bold;
+}
+
+.stat-label {
+  @apply text-sm mt-2 opacity-90;
+}
+</style>