From 9d6651eb656acde97a7fc9fc4284645be3b898e3 Mon Sep 17 00:00:00 2001
From: Renyye <1457077123@qq.com>
Date: Mon, 19 May 2025 14:37:08 +0800
Subject: [PATCH 01/16] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB=E3=80=81=E4=BA=A7=E5=93=81=E5=92=8C=E5=BA=97=E9=93=BA?=
 =?UTF-8?q?=E7=9A=84=20API=20=E6=8E=A5=E5=8F=A3=E5=8F=8A=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/api/category.ts              |  18 ++
 src/frontend/src/api/product.ts               |  27 +++
 src/frontend/src/api/shop.ts                  |  31 ++++
 .../src/components/cards/product_card.vue     |  57 ++++++
 .../src/components/explore/FilterSidebar.vue  | 145 ++++++++++++++++
 .../src/components/explore/ProductGrid.vue    |  29 ++++
 .../src/components/home/CategoryList.vue      |  27 ++-
 .../src/components/layout/NaviBar.vue         |  23 ++-
 src/frontend/src/main.js                      |  12 ++
 src/frontend/src/router/index.js              |  37 +++-
 src/frontend/src/views/Explore.vue            |  74 ++++++++
 src/frontend/src/views/Login.vue              |  48 ++++--
 src/package-lock.json                         | 163 ++++++++++++++++++
 13 files changed, 653 insertions(+), 38 deletions(-)
 create mode 100644 src/frontend/src/api/category.ts
 create mode 100644 src/frontend/src/api/product.ts
 create mode 100644 src/frontend/src/api/shop.ts
 create mode 100644 src/frontend/src/components/cards/product_card.vue
 create mode 100644 src/frontend/src/components/explore/FilterSidebar.vue
 create mode 100644 src/frontend/src/components/explore/ProductGrid.vue
 create mode 100644 src/frontend/src/views/Explore.vue
 create mode 100644 src/package-lock.json

diff --git a/src/frontend/src/api/category.ts b/src/frontend/src/api/category.ts
new file mode 100644
index 0000000..b2829d1
--- /dev/null
+++ b/src/frontend/src/api/category.ts
@@ -0,0 +1,18 @@
+import axios from 'axios'
+
+/** 后端返回的分类结构 */
+export interface Category {
+  CategoryID: number
+  CategoryName: string
+  CategoryDescription?: string
+  ParentCategoryID?: number | null
+}
+
+/**
+ * 获取分类列表  
+ * @param parent_id   父分类 ID；不传则取所有一级分类
+ */
+export const fetchCategories = (parent_id?: number) =>
+  axios.get<Category[]>('/category', {
+    params: parent_id ? { parent_id } : {}
+  })
diff --git a/src/frontend/src/api/product.ts b/src/frontend/src/api/product.ts
new file mode 100644
index 0000000..da4e1c7
--- /dev/null
+++ b/src/frontend/src/api/product.ts
@@ -0,0 +1,27 @@
+import axios from 'axios'
+
+export interface Product {
+  ProductID: number
+  ProductName: string
+  ProductDescription: string
+  Price: string
+  CategoryID: number
+  StockQuantity: number
+  MainImageURL: string
+  StoreID: number
+  ProductStatus: string
+  CreationDate: string
+  LastUpdatedDate: string
+}
+
+export interface ProductQuery {
+  store_id?: number
+  category_id?: number
+  search?: string
+  limit?: number
+  offset?: number
+  current_user_id?: number
+}
+
+export const fetchProducts = (query: ProductQuery) =>
+  axios.get<Product[]>('/product', { params: query })
diff --git a/src/frontend/src/api/shop.ts b/src/frontend/src/api/shop.ts
new file mode 100644
index 0000000..504d2bd
--- /dev/null
+++ b/src/frontend/src/api/shop.ts
@@ -0,0 +1,31 @@
+// Todo: align with backend API
+// 写此文件时还缺少 get all shop 接口
+import axios from 'axios'
+
+/** 后端返回的店铺（Shop）结构 */
+export interface Shop {
+  StoreID: number
+  StoreName: string
+  StoreDescription?: string
+  StoreLogoURL?: string
+  // 可以根据后端实际扩展其他字段
+}
+
+/**
+ * 获取店铺列表（临时接口）  
+ * 注意：后端实际路径可能是 `/store` 或 `/shop`，这里先用 `/shop` 协议
+ * @param params  可选过滤条件，将被拼到 querystring
+ */
+export const fetchShops = (params?: {
+  // 未来可按地区、状态、关键字等筛选
+  search?: string
+  limit?: number
+  offset?: number
+}) =>
+  axios.get<Shop[]>('/shop', {
+    params: params ?? {}
+  })
+
+// 示例：
+// fetchShops({ search: 'Official', limit: 50, offset: 0 })
+//   .then(res => console.log(res.data))
diff --git a/src/frontend/src/components/cards/product_card.vue b/src/frontend/src/components/cards/product_card.vue
new file mode 100644
index 0000000..8192440
--- /dev/null
+++ b/src/frontend/src/components/cards/product_card.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import type { Product } from '@/api/product'
+
+const props = defineProps<{ product: Product }>()
+const router = useRouter()
+
+function goDetail() {
+  router.push({ name: 'Product', params: { product_id: props.product.ProductID } })
+}
+</script>
+
+<template>
+  <div class="card" @click="goDetail">
+    <img
+      :src="product.MainImageURL || '/placeholder.png'"
+      :alt="product.ProductName"
+      class="card-img"
+    />
+    <h4 class="card-name" :title="product.ProductName">
+      {{ product.ProductName }}
+    </h4>
+    <p class="card-price">¥ {{ product.Price }}</p>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  cursor: pointer;
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px;
+  transition: box-shadow 0.2s;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.card:hover {
+  box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
+}
+.card-img {
+  width: 100%;
+  height: 160px;
+  object-fit: contain;
+  margin-bottom: 8px;
+}
+.card-name {
+  flex: 1;
+  font-size: 14px;
+  margin: 0 0 4px;
+}
+.card-price {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-color-danger);
+}
+</style>
diff --git a/src/frontend/src/components/explore/FilterSidebar.vue b/src/frontend/src/components/explore/FilterSidebar.vue
new file mode 100644
index 0000000..d452e6e
--- /dev/null
+++ b/src/frontend/src/components/explore/FilterSidebar.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import { ElInput, ElSelect, ElOption, ElButton, ElMessage } from 'element-plus'
+import { fetchCategories, type Category } from '@/api/category'
+
+interface Props {
+  selected: Record<string, any>
+}
+const props = defineProps<Props>()
+const emit  = defineEmits<{
+  (e: 'update', query: Record<string, any>): void
+}>()
+
+/* ----------------- 分类数据 ----------------- */
+const categories = ref<Category[]>([])
+const loadingCat = ref(false)
+
+async function loadCategories() {
+  try {
+    loadingCat.value = true
+    const { data } = await fetchCategories()           // 取一级分类
+    categories.value = data
+  } catch (err) {
+    ElMessage.error('分类加载失败')
+  } finally {
+    loadingCat.value = false
+  }
+}
+
+/* ----------------- 店铺（暂用静态） --------- */
+const stores = ref([
+  { id: 1, name: 'Official Store' },
+  { id: 2, name: 'BestBuy' }
+])
+
+/* ----------------- 本地表单模型 ------------- */
+const form = ref({
+  category_id: undefined as number | undefined,
+  store_id:    undefined as number | undefined,
+  search:      ''
+})
+
+/* UI 与 URL Query 同步 */
+watch(
+  () => props.selected,
+  (q) => {
+    form.value.category_id = q.category_id ? Number(q.category_id) : undefined
+    form.value.store_id    = q.store_id    ? Number(q.store_id)    : undefined
+    form.value.search      = (q.search as string) || ''
+  },
+  { immediate: true, deep: true }
+)
+
+/* 提交 / 重置操作 */
+function apply() {
+  emit('update', { ...form.value })
+}
+function reset() {
+  form.value = { category_id: undefined, store_id: undefined, search: '' }
+  emit('update', { ...form.value })
+}
+
+/* 初始化加载分类 */
+onMounted(() => loadCategories())
+</script>
+
+<template>
+  <aside class="filter-box">
+    <h3 class="filter-title">Filters</h3>
+
+    <!-- 搜索 -->
+    <div class="filter-block">
+      <el-input
+        v-model="form.search"
+        placeholder="Search keyword"
+        clearable
+        @keyup.enter="apply"
+      />
+    </div>
+
+    <!-- 分类下拉 -->
+    <div class="filter-block">
+      <label class="filter-label">Category</label>
+      <el-select
+        v-model="form.category_id"
+        :loading="loadingCat"
+        placeholder="All"
+        clearable
+      >
+        <el-option
+          v-for="c in categories"
+          :key="c.CategoryID"
+          :label="c.CategoryName"
+          :value="c.CategoryID"
+        />
+      </el-select>
+    </div>
+
+    <!-- 店铺下拉 -->
+    <div class="filter-block">
+      <label class="filter-label">Store</label>
+      <el-select v-model="form.store_id" placeholder="All" clearable>
+        <el-option
+          v-for="s in stores"
+          :key="s.id"
+          :label="s.name"
+          :value="s.id"
+        />
+      </el-select>
+    </div>
+
+    <!-- 操作按钮 -->
+    <el-button type="primary" class="w-full mt-2" @click="apply">
+      Apply
+    </el-button>
+    <el-button class="w-full mt-1" @click="reset">
+      Reset
+    </el-button>
+  </aside>
+</template>
+
+<style scoped>
+.filter-box {
+  background: #fff;
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
+}
+
+.filter-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+.filter-block {
+  margin-bottom: 16px;
+}
+
+.filter-label {
+  display: block;
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+</style>
diff --git a/src/frontend/src/components/explore/ProductGrid.vue b/src/frontend/src/components/explore/ProductGrid.vue
new file mode 100644
index 0000000..694564d
--- /dev/null
+++ b/src/frontend/src/components/explore/ProductGrid.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import ProductCard from '@/components/cards/product_card.vue'
+import type { Product } from '@/api/product'
+
+interface Props {
+  products: Product[]
+  loading: boolean
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <el-skeleton v-if="loading" rows="8" animated />
+
+  <el-row v-else :gutter="24">
+    <el-col
+      v-for="p in products"
+      :key="p.ProductID"
+      :xs="12"
+      :sm="8"
+      :md="6"
+      :lg="6"
+    >
+      <ProductCard :product="p" />
+    </el-col>
+
+    <el-empty v-if="!loading && products.length === 0" description="No Data" />
+  </el-row>
+</template>
diff --git a/src/frontend/src/components/home/CategoryList.vue b/src/frontend/src/components/home/CategoryList.vue
index 704092f..015a1db 100644
--- a/src/frontend/src/components/home/CategoryList.vue
+++ b/src/frontend/src/components/home/CategoryList.vue
@@ -1,14 +1,23 @@
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
 import CategoryCard from '@/components/cards/category_card.vue'
-const categories = [
-  { id: 1, name: 'Laptops', price: 'from $149', icon: '/ciallo.jpeg' },
-  { id: 2, name: 'Smartphones', price: 'from $99', icon: '/ciallo.jpeg' },
-  { id: 3, name: 'Tablets', price: 'from $129', icon: '/ciallo.jpeg' },
-  { id: 4, name: 'Smart Watches', price: 'from $49', icon: '/ciallo.jpeg' },
-  { id: 5, name: 'Gaming Consoles', price: 'from $399', icon: '/ciallo.jpeg' },
-  { id: 6, name: 'Cameras', price: 'from $129', icon: '/ciallo.jpeg' }
-];
-// Todo: Fetch categories from API
+
+const categories = ref<any[]>([])
+
+onMounted(async () => {
+  try {
+    const res = await axios.get('/category')
+    categories.value = res.data.slice(0, 6).map((cat: any) => ({
+      id: cat.CategoryID,
+      name: cat.CategoryName,
+      price: '', // 如有价格字段可补充
+      icon: '/ciallo.jpeg' // 如有图片字段可替换
+    }))
+  } catch (e) {
+    categories.value = []
+  }
+})
 </script>
 
 <template>
diff --git a/src/frontend/src/components/layout/NaviBar.vue b/src/frontend/src/components/layout/NaviBar.vue
index 86d5560..2504ca8 100644
--- a/src/frontend/src/components/layout/NaviBar.vue
+++ b/src/frontend/src/components/layout/NaviBar.vue
@@ -1,13 +1,27 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { Search, ShoppingCart, User } from '@element-plus/icons-vue'
 
 const router = useRouter()
-const activeIndex = ref('0')
+const activeIndex = ref(router.currentRoute.value.path)
+
 const handleSelect = (key: string) => {
   activeIndex.value = key
   router.push(key)
 }
+
+// 判断是否已登录（示例，实际可根据你的登录状态实现）
+const isLoggedIn = !!localStorage.getItem('access_token')
+
+// 用户菜单点击
+const handleUserClick = () => {
+  if (isLoggedIn) {
+    router.push('/user/profile')
+  } else {
+    router.push('/login')
+  }
+}
 </script>
 
 <template>
@@ -41,12 +55,15 @@ const handleSelect = (key: string) => {
               <Search />
             </el-icon>
           </el-menu-item>
-          <el-menu-item index="/cart">
+          <el-menu-item index="/user/cart">
             <el-icon>
               <ShoppingCart />
             </el-icon>
           </el-menu-item>
-          <el-menu-item index="/login">
+          <el-menu-item
+            :index="isLoggedIn ? '/user/profile' : '/login'"
+            @click.stop="handleUserClick"
+          >
             <el-icon>
               <User />
             </el-icon>
diff --git a/src/frontend/src/main.js b/src/frontend/src/main.js
index e10305d..3e98ea8 100644
--- a/src/frontend/src/main.js
+++ b/src/frontend/src/main.js
@@ -5,6 +5,18 @@ import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import axios from 'axios'
+
+// API base URL
+axios.defaults.baseURL = 'http://127.0.0.1:8000/api/v1'
+// Authentication token interceptor
+axios.interceptors.request.use(config => {
+  const token = localStorage.getItem('access_token')
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  return config
+})
 
 
 import App from './App.vue'
diff --git a/src/frontend/src/router/index.js b/src/frontend/src/router/index.js
index af53d23..1b14bb4 100644
--- a/src/frontend/src/router/index.js
+++ b/src/frontend/src/router/index.js
@@ -18,22 +18,45 @@ const router = createRouter({
       name: 'Product',
       component: () => import('../views/ProductDetail.vue')
     },
+    // 用户相关路由
     {
-      path: '/cart',
-      name: 'Cart',
-      component: () => import('../views/Cart.vue')
+      path: '/user/order',
+      name: 'UserOrder',
+      component: () => import('../views/Order.vue')
     },
     {
-      path: '/order',
-      name: 'Order',
-      component: () => import('../views/Order.vue')
+      path: '/user/cart',
+      name: 'UserCart',
+      component: () => import('../views/Cart.vue')
     },
+    // {
+    //   path: '/user/profile',
+    //   name: 'UserProfile',
+    //   component: () => import('../views/UserProfile.vue')
+    // },
     {
       path: '/admin',
       name: 'Admin',
       component: () => import('../views/Analysis/Dashboard.vue'),
+    },
+    {
+      path: '/explore',
+      name: 'Explore',
+      component: () => import('../views/Explore.vue')
     }
   ],
 })
 
-export default router
+// 路由守卫：未登录跳转到 /login
+router.beforeEach((to, from, next) => {
+  const publicPages = ['/login']
+  const authRequired = to.path.startsWith('/user/')
+  const token = localStorage.getItem('access_token')
+  if (authRequired && !token) {
+    next('/login')
+  } else {
+    next()
+  }
+})
+
+export default router
\ No newline at end of file
diff --git a/src/frontend/src/views/Explore.vue b/src/frontend/src/views/Explore.vue
new file mode 100644
index 0000000..daabdc6
--- /dev/null
+++ b/src/frontend/src/views/Explore.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import FilterSidebar from '@/components/explore/FilterSidebar.vue'
+import ProductGrid from '@/components/explore/ProductGrid.vue'
+import { fetchProducts, type Product } from '@/api/product'
+
+const route = useRoute()
+const router = useRouter()
+
+/* 列表数据 & 加载状态 */
+const products = ref<Product[]>([])
+const loading  = ref(false)
+const total    = ref(0)          // 如果后端未来支持返回总数可使用
+const limit    =  ref(30)
+
+/* 把查询参数解析成 API Query */
+function buildQuery() {
+  const { store_id, category_id, search, offset = 0 } = route.query
+  return {
+    store_id:   store_id ? Number(store_id) : undefined,
+    category_id:category_id ? Number(category_id) : undefined,
+    search:     search as string | undefined,
+    limit:      limit.value,
+    offset:     Number(offset)
+  }
+}
+
+/* 请求列表 */
+async function loadProducts() {
+  loading.value = true
+  try {
+    const { data } = await fetchProducts(buildQuery())
+    products.value = data
+    // total.value = Number(resp.headers['x-total'] ?? 0)
+  } finally {
+    loading.value = false
+  }
+}
+
+/* query 变化时重新加载 */
+watch(() => route.query, () => loadProducts(), { deep: true })
+
+/* 首次进入页面加载 */
+onMounted(() => loadProducts())
+
+/* 处理筛选更新: 把筛选值写入 URL 查询参数即可 */
+function updateQuery(q: Record<string, any>) {
+  router.push({ path: '/explore', query: { ...route.query, ...q, offset: 0 } })
+}
+</script>
+
+<template>
+  <el-row :gutter="24" class="explore-page">
+    <!-- 左侧筛选栏 -->
+    <el-col :xs="24" :sm="6" :md="5" :lg="4">
+      <FilterSidebar
+        :selected="route.query"
+        @update="updateQuery"
+      />
+    </el-col>
+
+    <!-- 右侧列表 -->
+    <el-col :xs="24" :sm="18" :md="19" :lg="20">
+      <ProductGrid :products="products" :loading="loading" />
+    </el-col>
+  </el-row>
+</template>
+
+<style scoped>
+.explore-page {
+  padding: 24px;
+}
+</style>
diff --git a/src/frontend/src/views/Login.vue b/src/frontend/src/views/Login.vue
index 1eee6d6..03d0eeb 100644
--- a/src/frontend/src/views/Login.vue
+++ b/src/frontend/src/views/Login.vue
@@ -159,23 +159,29 @@ const handleTabClick = (tab: any) => {
   activeTab.value = tab.name
 }
 
+import qs from 'qs'
+
 const login = async () => {
-  await loginFormRef.value?.validate(async (valid: boolean) => {
-    if (!valid) return
-    loginLoading.value = true
-    try {
-      await axios.post('/user/login', {
-        Username: loginForm.username,
-        Password: loginForm.password,
-      })
-      ElMessage.success('登录成功')
-      router.push('/')
-    } catch {
-      ElMessage.error('登录失败')
-    } finally {
-      loginLoading.value = false
-    }
-  })
+  loginLoading.value = true
+  try {
+    const res = await axios.post(
+      '/auth/token',
+      qs.stringify({
+        grant_type: 'password',
+        username: loginForm.username,
+        password: loginForm.password,
+      }),
+      { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
+    )
+    const token = res.data.access_token
+    localStorage.setItem('access_token', token)
+    ElMessage.success('登录成功')
+    router.push('/')
+  } catch {
+    ElMessage.error('登录失败')
+  } finally {
+    loginLoading.value = false
+  }
 }
 
 const register = async () => {
@@ -187,12 +193,16 @@ const register = async () => {
     }
     registerLoading.value = true
     try {
-      await axios.post('/user/register', {
+      // 构造提交数据，手机号为空时不提交 phone 字段
+      const data: Record<string, any> = {
         Username: registerForm.username,
         Email: registerForm.email,
-        PhoneNumber: registerForm.phone,
         Password: registerForm.password,
-      })
+      }
+      if (registerForm.phone && registerForm.phone.trim() !== '') {
+        data.PhoneNumber = registerForm.phone
+      }
+      await axios.post('/user/register', data)
       ElMessage.success('注册成功，正在跳转…')
       router.push('/')
     } catch (error) {
diff --git a/src/package-lock.json b/src/package-lock.json
new file mode 100644
index 0000000..1c967c5
--- /dev/null
+++ b/src/package-lock.json
@@ -0,0 +1,163 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "requires": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      }
+    },
+    "call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "requires": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      }
+    },
+    "dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "requires": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      }
+    },
+    "es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g=="
+    },
+    "es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="
+    },
+    "es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "requires": {
+        "es-errors": "^1.3.0"
+      }
+    },
+    "function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
+    },
+    "get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "requires": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      }
+    },
+    "get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "requires": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      }
+    },
+    "gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="
+    },
+    "has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="
+    },
+    "hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "requires": {
+        "function-bind": "^1.1.2"
+      }
+    },
+    "math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="
+    },
+    "object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew=="
+    },
+    "qs": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
+      "requires": {
+        "side-channel": "^1.1.0"
+      }
+    },
+    "side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "requires": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      }
+    },
+    "side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "requires": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      }
+    },
+    "side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "requires": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      }
+    },
+    "side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "requires": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      }
+    }
+  }
+}

From 4f30e47f7f801d4f1a2ae2dc280bbfe0cb4f7fc5 Mon Sep 17 00:00:00 2001
From: Renyye <1457077123@qq.com>
Date: Mon, 19 May 2025 17:49:39 +0800
Subject: [PATCH 02/16] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E7=9B=B8=E5=85=B3=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=8C=85?=
 =?UTF-8?q?=E6=8B=AC=E8=B4=AD=E7=89=A9=E8=BD=A6=E3=80=81=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E3=80=81=E5=9C=B0=E5=9D=80=E7=AE=A1=E7=90=86=E5=8F=8A=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/api/cart.ts                  |  29 +++
 src/frontend/src/api/user.ts                  |  18 ++
 .../src/components/User/UserAddress.vue       |  38 ++++
 src/frontend/src/components/User/UserCart.vue |  74 ++++++++
 .../src/components/User/UserOrder.vue         |  45 +++++
 .../src/components/User/UserProfile.vue       |  34 ++++
 .../src/components/User/cart/CartSummary.vue  |  30 +++
 .../src/components/cards/cart_item_card.vue   | 172 +++++++++---------
 .../src/components/cards/user_info.vue        |  19 +-
 .../src/components/cart/CartSummary.vue       |  52 ------
 .../src/components/layout/UserLayout.vue      |  60 ++++++
 src/frontend/src/main.js                      |  36 +++-
 src/frontend/src/router/index.js              |  22 +--
 src/frontend/src/views/Cart.vue               |   2 +-
 src/frontend/src/views/Merchant_manage.vue    |   0
 src/frontend/src/views/Order.vue              |  65 -------
 16 files changed, 470 insertions(+), 226 deletions(-)
 create mode 100644 src/frontend/src/api/cart.ts
 create mode 100644 src/frontend/src/api/user.ts
 create mode 100644 src/frontend/src/components/User/UserAddress.vue
 create mode 100644 src/frontend/src/components/User/UserCart.vue
 create mode 100644 src/frontend/src/components/User/UserOrder.vue
 create mode 100644 src/frontend/src/components/User/UserProfile.vue
 create mode 100644 src/frontend/src/components/User/cart/CartSummary.vue
 delete mode 100644 src/frontend/src/components/cart/CartSummary.vue
 create mode 100644 src/frontend/src/components/layout/UserLayout.vue
 delete mode 100644 src/frontend/src/views/Merchant_manage.vue
 delete mode 100644 src/frontend/src/views/Order.vue

diff --git a/src/frontend/src/api/cart.ts b/src/frontend/src/api/cart.ts
new file mode 100644
index 0000000..af4098a
--- /dev/null
+++ b/src/frontend/src/api/cart.ts
@@ -0,0 +1,29 @@
+import axios from 'axios'
+
+export interface CartItem {
+  CartItemID: number
+  UserID: number
+  ProductID: number
+  Quantity: number
+  PriceAtAddition: number
+  AddedDate: string
+  ProductName: string
+  MainImageURL: string
+  Price: number
+}
+
+export interface CartResponse {
+  Items: CartItem[]
+  TotalItems: number
+}
+
+/** 获取购物车 */
+export const fetchCart = () => axios.get<CartResponse>('/cart')
+
+/** 更新购物车条目数量（Quantity 必须 >0） */
+export const updateCartItem = (cartItemId: number, qty: number) =>
+    axios.put(`/cart/items/${cartItemId}`, { Quantity: qty })
+  
+  /** 删除购物车条目 */
+  export const deleteCartItem = (cartItemId: number) =>
+    axios.delete(`/cart/items/${cartItemId}`)
diff --git a/src/frontend/src/api/user.ts b/src/frontend/src/api/user.ts
new file mode 100644
index 0000000..5a4199c
--- /dev/null
+++ b/src/frontend/src/api/user.ts
@@ -0,0 +1,18 @@
+import axios from 'axios'
+
+/** 后端返回的用户信息结构 */
+export interface UserInfo {
+  UserID: number
+  Username: string
+  Email: string
+  PhoneNumber: string
+  RegistrationDate: string
+  LastLoginDate: string
+}
+
+/**
+ * 获取当前用户信息
+ * @param token  “Bearer xxx” 形式的授权头，会被自动注入 axios
+ */
+export const fetchCurrentUser = () =>
+  axios.get<UserInfo>('/user/me')
diff --git a/src/frontend/src/components/User/UserAddress.vue b/src/frontend/src/components/User/UserAddress.vue
new file mode 100644
index 0000000..f291253
--- /dev/null
+++ b/src/frontend/src/components/User/UserAddress.vue
@@ -0,0 +1,38 @@
+<template>
+    <div>
+      <h2 class="section-title">Addresses</h2>
+      <!-- 假设用户有多地址 -->
+      <el-card
+        v-for="addr in addresses"
+        :key="addr.id"
+        class="addr-card"
+      >
+        <p><strong>{{ addr.label }}</strong></p>
+        <p>{{ addr.detail }}</p>
+        <div style="margin-top: 8px">
+          <el-button size="mini">Edit</el-button>
+          <el-button size="mini" type="danger">Delete</el-button>
+        </div>
+      </el-card>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref } from 'vue'
+  const addresses = ref([
+    { id: 1, label: 'Home',   detail: '123 Main St, City, Country' },
+    { id: 2, label: 'Office', detail: '456 Office Rd, City, Country' }
+  ])
+  </script>
+  
+  <style scoped>
+  .section-title {
+    font-size: 32px;
+    font-weight: 600;
+    margin-bottom: 24px;
+  }
+  .addr-card {
+    margin-bottom: 16px;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/frontend/src/components/User/UserCart.vue b/src/frontend/src/components/User/UserCart.vue
new file mode 100644
index 0000000..ccda985
--- /dev/null
+++ b/src/frontend/src/components/User/UserCart.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="common-layout">
+      <el-container>
+        <el-header>My Cart</el-header>
+  
+        <el-main>
+          <CartItemCard
+            v-for="it in cartItems"
+            :key="it.CartItemID"
+            :item="it"
+            @updated="updateLocal"
+            @removed="removeLocal"
+            @checked="toggleSelect"
+          />
+          <el-empty v-if="!cartItems.length && !loading" description="Cart is empty" />
+          <el-skeleton v-if="loading" :rows="4" animated />
+        </el-main>
+  
+        <el-footer>
+          <CartSummary :selected="selectedItems" @checkout="checkout" />
+        </el-footer>
+      </el-container>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, onMounted, computed } from 'vue'
+  import { ElEmpty, ElSkeleton, ElMessage } from 'element-plus'
+  import CartItemCard from '@/components/cards/cart_item_card.vue'
+  import CartSummary  from '@/components/User/cart/CartSummary.vue'
+  import { fetchCart, type CartItem } from '@/api/cart'
+  
+  const loading     = ref(true)
+  const cartItems   = ref<CartItem[]>([])
+  const selectedIds = ref<Set<number>>(new Set())
+  
+  const selectedItems = computed(() =>
+    cartItems.value.filter(i => selectedIds.value.has(i.CartItemID))
+  )
+  
+  onMounted(async () => {
+    try {
+      const res = await fetchCart()
+      cartItems.value = res.data.Items
+    } finally {
+      loading.value = false
+    }
+  })
+  
+  /* ===== helpers ===== */
+  function updateLocal(it: CartItem) {
+    const idx = cartItems.value.findIndex(x => x.CartItemID === it.CartItemID)
+    if (idx >= 0) cartItems.value[idx] = it
+  }
+  function removeLocal(id: number) {
+    cartItems.value = cartItems.value.filter(x => x.CartItemID !== id)
+    selectedIds.value.delete(id)
+  }
+  function toggleSelect({ id, checked }: { id: number; checked: boolean }) {
+    checked ? selectedIds.value.add(id) : selectedIds.value.delete(id)
+  }
+  
+  /* 结账示例 */
+  function checkout(selected: CartItem[]) {
+    ElMessage.success(`Checkout ${selected.length} items, total ¥${selectedItems.value.reduce((s,i)=>s+i.PriceAtAddition*i.Quantity,0).toFixed(2)}`)
+  }
+  </script>
+  
+  <style scoped>
+  .common-layout ::v-deep(.el-header){ font-size:24px; font-weight:600; }
+  .common-layout ::v-deep(.el-main)  { padding:24px 0; }
+  .common-layout ::v-deep(.el-footer){ border-top:1px solid #eee; }
+  </style>
+  
\ No newline at end of file
diff --git a/src/frontend/src/components/User/UserOrder.vue b/src/frontend/src/components/User/UserOrder.vue
new file mode 100644
index 0000000..ffd5bb4
--- /dev/null
+++ b/src/frontend/src/components/User/UserOrder.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <h2 class="section-title">Orders</h2>
+    <order-info-card
+      v-for="order in orders"
+      :key="order.orderId"
+      v-bind="order"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import OrderInfoCard from '@/components/cards/order_info_card.vue'
+
+/** 这里也是假数据；可以 onMounted 时调后端接口 */
+const orders = [
+  {
+    orderId: '36637649',
+    date: 'June 17, 2018',
+    items: 7,
+    shipping: 'Pick up from store',
+    payment: 'Online by card',
+    total: 4896.0,
+    status: 'PROCESSING'
+  },
+  {
+    orderId: '36637648',
+    date: 'June 16, 2018',
+    items: 2,
+    shipping: 'Pick up from store',
+    payment: 'Online by card',
+    total: 599.0,
+    status: 'CANCELED'
+  }
+]
+</script>
+
+<style scoped>
+.section-title {
+  font-size: 32px;
+  font-weight: 600;
+  margin-bottom: 24px;
+  color: #222;
+}
+</style>
diff --git a/src/frontend/src/components/User/UserProfile.vue b/src/frontend/src/components/User/UserProfile.vue
new file mode 100644
index 0000000..f3401fb
--- /dev/null
+++ b/src/frontend/src/components/User/UserProfile.vue
@@ -0,0 +1,34 @@
+<template>
+    <div>
+      <h2 class="section-title">Profile</h2>
+      <!-- 这里放 Profile 编辑表单 -->
+      <el-form label-position="top" class="profile-form">
+        <el-form-item label="Name">
+          <el-input v-model="profile.name" />
+        </el-form-item>
+        <el-form-item label="Email">
+          <el-input v-model="profile.email" />
+        </el-form-item>
+        <el-button type="primary">保存</el-button>
+      </el-form>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref } from 'vue'
+  const profile = ref({ name: 'Yoshino', email: 'yoshino@example.com' })
+  </script>
+  
+  <style scoped>
+  .section-title {
+    font-size: 32px;
+    font-weight: 600;
+    margin-bottom: 24px;
+  }
+  .profile-form {
+    background: #fff;
+    padding: 24px;
+    border-radius: 8px;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/frontend/src/components/User/cart/CartSummary.vue b/src/frontend/src/components/User/cart/CartSummary.vue
new file mode 100644
index 0000000..c02d139
--- /dev/null
+++ b/src/frontend/src/components/User/cart/CartSummary.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="summary-wrap">
+    <div class="summary-line">
+      <span>Selected Items: {{ selected.length }}</span>
+      <span class="total">Total: ¥{{ total.toFixed(2) }}</span>
+    </div>
+    <el-button type="primary" :disabled="!selected.length" @click="$emit('checkout', selected)">
+      Checkout
+    </el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CartItem } from '@/api/cart'
+
+const props = defineProps<{
+  selected: CartItem[]
+}>()
+
+const total = computed(() =>
+  props.selected.reduce((sum, i) => sum + i.PriceAtAddition * i.Quantity, 0)
+)
+</script>
+
+<style scoped>
+.summary-wrap { display:flex; flex-direction:column; align-items:flex-end; padding:16px 0; }
+.summary-line{ font-size:18px; margin-bottom:8px; }
+.total       { font-weight:600; margin-left:20px; color:var(--el-color-danger);}
+</style>
diff --git a/src/frontend/src/components/cards/cart_item_card.vue b/src/frontend/src/components/cards/cart_item_card.vue
index 92c5605..789f359 100644
--- a/src/frontend/src/components/cards/cart_item_card.vue
+++ b/src/frontend/src/components/cards/cart_item_card.vue
@@ -1,88 +1,96 @@
 <template>
-    <div class="cart-item-card">
-      <img :src="image" class="item-img" />
-      <div class="item-info">
-        <div class="item-category">{{ category }}</div>
-        <div class="item-title">{{ title }}</div>
-        <div class="item-bottom">
-          <div class="item-price">${{ price }}</div>
-          <div class="item-qty">1 × ${{ price }}</div>
+  <div class="cart-item-card">
+    <!-- ① 选择框 -->
+    <el-checkbox
+      v-model="checked"
+      class="item-check"
+      @change="emit('checked', { id: item.CartItemID, checked })"
+    />
+
+    <!-- ② 商品缩略图 -->
+    <img :src="item.MainImageURL" class="item-img" />
+
+    <!-- ③ 信息区 -->
+    <div class="item-info">
+      <div class="item-title">{{ item.ProductName }}</div>
+
+      <div class="item-bottom">
+        <div class="item-price">¥{{ item.PriceAtAddition.toFixed(2) }}</div>
+
+        <div class="qty-box">
+          <el-button size="small" :disabled="loading || item.Quantity <= 1" @click="changeQty(item.Quantity - 1)">–</el-button>
+          <span class="qty">{{ item.Quantity }}</span>
+          <el-button size="small" :disabled="loading" @click="changeQty(item.Quantity + 1)">+</el-button>
         </div>
+
+        <div class="item-subtotal">¥{{ subtotal }}</div>
       </div>
-      <el-icon class="item-remove" @click="onRemove">
-        <Close />
-      </el-icon>
     </div>
-    <el-divider />
-  </template>
-  
-  <script setup lang="ts">
-  
-  const props = defineProps<{
-    image: string
-    category: string
-    title: string
-    price: number | string
-  }>()
-  
-  const emit = defineEmits(['remove'])
-  
-  function onRemove() {
-    emit('remove')
+
+    <!-- 删除 -->
+    <el-icon class="item-remove" @click="removeItem"><Close /></el-icon>
+  </div>
+
+  <el-divider />
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ElButton, ElIcon, ElCheckbox, ElDivider, ElMessage } from 'element-plus'
+import { Close } from '@element-plus/icons-vue'
+import { updateCartItem, deleteCartItem, type CartItem } from '@/api/cart'
+
+const props = defineProps<{ item: CartItem }>()
+const emit  = defineEmits<{
+  (e: 'updated', item: CartItem): void
+  (e: 'removed', cartItemId: number): void
+  (e: 'checked', payload: { id: number; checked: boolean }): void
+}>()
+
+const checked = ref(false)
+const loading = ref(false)
+const subtotal = computed(() => (props.item.PriceAtAddition * props.item.Quantity).toFixed(2))
+
+async function changeQty(qty: number) {
+  if (qty <= 0) return removeItem()
+  loading.value = true
+  try {
+    await updateCartItem(props.item.CartItemID, qty)
+    emit('updated', { ...props.item, Quantity: qty })
+    ElMessage.success('Quantity updated')
+  } catch {
+    ElMessage.error('Failed to update quantity')
+  } finally {
+    loading.value = false
   }
-  </script>
-  
-  <style scoped>
-  .cart-item-card {
-    display: flex;
-    align-items: flex-start;
-    padding: 16px 0;
-    position: relative;
+}
+
+async function removeItem() {
+  loading.value = true
+  try {
+    await deleteCartItem(props.item.CartItemID)
+    emit('removed', props.item.CartItemID)
+    ElMessage.success('Item removed')
+  } catch {
+    ElMessage.error('Failed to remove item')
+  } finally {
+    loading.value = false
   }
-  .item-img {
-    width: 90px;
-    height: 70px;
-    object-fit: contain;
-    margin-right: 20px;
-    flex-shrink: 0;
-  }
-  .item-info {
-    flex: 1;
-    min-width: 0;
-  }
-  .item-category {
-    color: #888;
-    font-size: 15px;
-    margin-bottom: 2px;
-  }
-  .item-title {
-    font-size: 20px;
-    color: #555;
-    font-weight: 400;
-    margin-bottom: 10px;
-    line-height: 1.2;
-    word-break: break-all;
-  }
-  .item-bottom {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-  .item-price {
-    font-size: 24px;
-    font-weight: bold;
-    color: #444;
-  }
-  .item-qty {
-    color: #888;
-    font-size: 15px;
-  }
-  .item-remove {
-    position: absolute;
-    right: 0;
-    top: 8px;
-    color: #e57373;
-    cursor: pointer;
-    font-size: 22px;
-  }
-  </style>
\ No newline at end of file
+}
+</script>
+
+<style scoped>
+.cart-item-card {
+  display: flex; align-items: flex-start; padding: 16px 0; position: relative;
+}
+.item-check { margin-right: 14px; }
+.item-img   { width: 90px; height: 70px; object-fit: contain; margin-right: 20px; flex-shrink: 0; }
+.item-info  { flex: 1; min-width: 0; }
+.item-title { font-size: 18px; color: #555; font-weight: 500; margin-bottom: 8px; }
+.item-bottom{ display:flex; align-items:center; gap:14px; }
+.item-price { font-size: 16px; font-weight: 600; }
+.item-subtotal{ font-size: 15px; }
+.qty-box    { display:flex; align-items:center; gap:6px; }
+.qty        { width: 26px; text-align:center; }
+.item-remove{ position:absolute; right:0; top:8px; color:#e57373; cursor:pointer; }
+</style>
diff --git a/src/frontend/src/components/cards/user_info.vue b/src/frontend/src/components/cards/user_info.vue
index 29908b1..3329e9c 100644
--- a/src/frontend/src/components/cards/user_info.vue
+++ b/src/frontend/src/components/cards/user_info.vue
@@ -13,18 +13,25 @@
         </el-button>
       </div>
       <el-divider />
-      <el-menu class="user-menu" :default-active="active">
-        <el-menu-item index="orders"><b>Orders ({{ orderCount }})</b></el-menu-item>
-        <el-menu-item index="favorites" disabled>Favorites ({{ favoriteCount }})</el-menu-item>
-        <el-menu-item index="info" disabled>Personal Info</el-menu-item>
+      <el-menu class="user-menu" :default-active="active" @select="onSelect">
+        <el-menu-item index="profile"><b>Profile</b></el-menu-item>
+        <el-menu-item index="order"><b>Orders ({{ orderCount }})</b></el-menu-item>
+        <el-menu-item index="cart">Cart ({{ orderCount }})</el-menu-item>
+        <el-menu-item index="address">Address</el-menu-item>
+        <!-- 可根据需要添加更多菜单项 -->
       </el-menu>
     </div>
   </template>
   
-  <script setup lang="ts">
+<script setup lang="ts">
   import { ElButton, ElIcon, ElDivider, ElMenu, ElMenuItem } from 'element-plus'
   import { Setting, ArrowRight } from '@element-plus/icons-vue'
-  
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  function onSelect(key: string) {
+    router.push(`/user/${key}`)
+  }
   const props = defineProps<{
     avatar: string
     name: string
diff --git a/src/frontend/src/components/cart/CartSummary.vue b/src/frontend/src/components/cart/CartSummary.vue
deleted file mode 100644
index ca78f11..0000000
--- a/src/frontend/src/components/cart/CartSummary.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-    <div class="cart-summary">
-      <div class="summary-row">
-        <span>总计：</span>
-        <span class="summary-total">${{ total.toFixed(2) }}</span>
-      </div>
-      <el-button type="primary" class="checkout-btn" @click="checkout" :disabled="total === 0">
-        结账
-      </el-button>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { computed } from 'vue'
-  import { useRouter } from 'vue-router'
-  
-  const props = defineProps<{
-    items: Array<{ price: number }>
-  }>()
-  
-  const total = computed(() =>
-    props.items.reduce((sum, item) => sum + Number(item.price), 0)
-  )
-  
-  const router = useRouter()
-  function checkout() {
-    router.push('/alipay')
-  }
-  </script>
-  
-  <style scoped>
-  .cart-summary {
-    margin-top: 32px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-  }
-  .summary-row {
-    font-size: 20px;
-    margin-bottom: 16px;
-  }
-  .summary-total {
-    font-size: 24px;
-    font-weight: bold;
-    color: #e57373;
-    margin-left: 8px;
-  }
-  .checkout-btn {
-    width: 120px;
-    font-size: 18px;
-  }
-  </style>
\ No newline at end of file
diff --git a/src/frontend/src/components/layout/UserLayout.vue b/src/frontend/src/components/layout/UserLayout.vue
new file mode 100644
index 0000000..2352ac1
--- /dev/null
+++ b/src/frontend/src/components/layout/UserLayout.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="user-layout">
+    <user-info
+      :avatar="userInfo?.avatar || '/ciallo.jpeg'"
+      :name="userInfo?.Username || '用户'"
+      :joined="userInfo ? formatDate(userInfo.RegistrationDate) : ''"
+      :orderCount="ordersCount"
+      :favoriteCount="favoritesCount"
+      :active="activeTab"
+    />
+
+    <div class="user-main">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import UserInfo from '@/components/cards/user_info.vue'
+import { fetchCurrentUser } from '@/api/user'
+
+const ordersCount = 2
+const favoritesCount = 3
+
+const route = useRoute()
+const activeTab = computed(() => route.name as string)
+
+// 用户信息
+const userInfo = ref<any>(null)
+
+const formatDate = (dateStr: string) => {
+  if (!dateStr) return ''
+  const d = new Date(dateStr)
+  return d.toLocaleDateString()
+}
+
+onMounted(async () => {
+  try {
+    const res = await fetchCurrentUser()
+    userInfo.value = res.data
+  } catch (e) {
+    userInfo.value = null
+  }
+})
+</script>
+
+<style scoped>
+.user-layout {
+  display: flex;
+  gap: 32px;
+  align-items: flex-start;
+  max-width: 1100px;
+  margin: 40px auto;
+}
+.user-main {
+  flex: 1;
+}
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/main.js b/src/frontend/src/main.js
index 3e98ea8..bf814b4 100644
--- a/src/frontend/src/main.js
+++ b/src/frontend/src/main.js
@@ -1,3 +1,4 @@
+// src/main.ts
 import './assets/main.css'
 
 import { createApp } from 'vue'
@@ -6,29 +7,50 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import axios from 'axios'
+import router from './router'
+import App from './App.vue'
 
-// API base URL
+// === Axios 全局配置 ===
+// 1. 基础地址
 axios.defaults.baseURL = 'http://127.0.0.1:8000/api/v1'
-// Authentication token interceptor
+
+// 2. 请求拦截：自动加上 Authorization
 axios.interceptors.request.use(config => {
   const token = localStorage.getItem('access_token')
   if (token) {
+    config.headers = config.headers ?? {}
     config.headers.Authorization = `Bearer ${token}`
   }
   return config
 })
 
+// 3. 响应拦截：遇到 401 清除 token 并跳登录
+axios.interceptors.response.use(
+  response => response,
+  error => {
+    const status = error.response?.status
+    if (status === 401) {
+      // 清除过期 Token
+      localStorage.removeItem('access_token')
+      // 跳转登录，并带上 redirect 查询参数
+      router.replace({
+        name: 'Login',
+        query: { redirect: router.currentRoute.value.fullPath }
+      })
+    }
+    return Promise.reject(error)
+  }
+)
 
-import App from './App.vue'
-import router from './router'
-
+// === Vue 应用初始化 ===
 const app = createApp(App)
 
+// 全局注册 ElementPlus 图标
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
+
 app.use(createPinia())
 app.use(router)
 app.use(ElementPlus)
-
-app.mount('#app')
\ No newline at end of file
+app.mount('#app')
diff --git a/src/frontend/src/router/index.js b/src/frontend/src/router/index.js
index 1b14bb4..8650976 100644
--- a/src/frontend/src/router/index.js
+++ b/src/frontend/src/router/index.js
@@ -20,20 +20,16 @@ const router = createRouter({
     },
     // 用户相关路由
     {
-      path: '/user/order',
-      name: 'UserOrder',
-      component: () => import('../views/Order.vue')
+      path: '/user',
+      component: () => import('../components/layout/UserLayout.vue'),
+      children: [
+        { path: '',          redirect: 'profile' },
+        { path: 'profile',   name: 'profile',  component: () => import('../components/User/UserProfile.vue') },
+        { path: 'address',   name: 'address',  component: () => import('../components/User/UserAddress.vue') },
+        { path: 'order',     name: 'order',    component: () => import('../components/User/UserOrder.vue') },
+        { path: 'cart',      name: 'cart',     component: () => import('../components/User/UserCart.vue') }
+      ]
     },
-    {
-      path: '/user/cart',
-      name: 'UserCart',
-      component: () => import('../views/Cart.vue')
-    },
-    // {
-    //   path: '/user/profile',
-    //   name: 'UserProfile',
-    //   component: () => import('../views/UserProfile.vue')
-    // },
     {
       path: '/admin',
       name: 'Admin',
diff --git a/src/frontend/src/views/Cart.vue b/src/frontend/src/views/Cart.vue
index 180241c..3d89ce5 100644
--- a/src/frontend/src/views/Cart.vue
+++ b/src/frontend/src/views/Cart.vue
@@ -27,7 +27,7 @@
   
   <script setup lang="ts">
   import CartItemCard from '@/components/cards/cart_item_card.vue'
-  import CartSummary from '@/components/cart/CartSummary.vue'
+  import CartSummary from '@/components/User/cart/CartSummary.vue'
   import UserInfo from '@/components/cards/user_info.vue'
   
   import { ref } from 'vue'
diff --git a/src/frontend/src/views/Merchant_manage.vue b/src/frontend/src/views/Merchant_manage.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/frontend/src/views/Order.vue b/src/frontend/src/views/Order.vue
deleted file mode 100644
index c5244a5..0000000
--- a/src/frontend/src/views/Order.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <div class="order-layout">
-    <user-info
-      avatar="/ciallo.jpeg"
-      name="Yoshino"
-      joined="June 6, 2018"
-      :orderCount="2"
-      :favoriteCount="3"
-      active="orders"
-    />
-    <div class="order-main">
-      <h2 class="order-title">Orders</h2>
-      <order-info-card
-        v-for="order in orders"
-        :key="order.orderId"
-        v-bind="order"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import UserInfo from '@/components/cards/user_info.vue'
-import OrderInfoCard from '@/components/cards/order_info_card.vue'
-
-const orders = [
-  {
-    orderId: '36637649',
-    date: 'June 17, 2018',
-    items: 7,
-    shipping: 'Pick up from store',
-    payment: 'Online by card',
-    total: 4896.00,
-    status: 'PROCESSING'
-  },
-  {
-    orderId: '36637648',
-    date: 'June 16, 2018',
-    items: 2,
-    shipping: 'Pick up from store',
-    payment: 'Online by card',
-    total: 599.00,
-    status: 'CANCELED'
-  }
-]
-</script>
-
-<style scoped>
-.order-layout {
-  display: flex;
-  gap: 32px;
-  align-items: flex-start;
-  max-width: 1100px;
-  margin: 40px auto;
-}
-.order-main {
-  flex: 1;
-}
-.order-title {
-  font-size: 32px;
-  font-weight: 600;
-  margin-bottom: 24px;
-  color: #222;
-}
-</style>
\ No newline at end of file

From c5c55e82acfe75865f0ab90924019366026ee74f Mon Sep 17 00:00:00 2001
From: Renyye <1457077123@qq.com>
Date: Mon, 19 May 2025 18:43:38 +0800
Subject: [PATCH 03/16] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E8=B5=84=E6=96=99=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=8A=A0=E8=BD=BD=E5=92=8C=E9=94=99=E8=AF=AF=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E5=A4=84=E7=90=86=EF=BC=8C=E6=98=BE=E7=A4=BA=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/User/UserProfile.vue       | 142 ++++++++++++++----
 1 file changed, 110 insertions(+), 32 deletions(-)

diff --git a/src/frontend/src/components/User/UserProfile.vue b/src/frontend/src/components/User/UserProfile.vue
index f3401fb..beafaea 100644
--- a/src/frontend/src/components/User/UserProfile.vue
+++ b/src/frontend/src/components/User/UserProfile.vue
@@ -1,34 +1,112 @@
 <template>
-    <div>
-      <h2 class="section-title">Profile</h2>
-      <!-- 这里放 Profile 编辑表单 -->
-      <el-form label-position="top" class="profile-form">
-        <el-form-item label="Name">
-          <el-input v-model="profile.name" />
-        </el-form-item>
-        <el-form-item label="Email">
-          <el-input v-model="profile.email" />
-        </el-form-item>
-        <el-button type="primary">保存</el-button>
-      </el-form>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref } from 'vue'
-  const profile = ref({ name: 'Yoshino', email: 'yoshino@example.com' })
-  </script>
-  
-  <style scoped>
-  .section-title {
-    font-size: 32px;
-    font-weight: 600;
-    margin-bottom: 24px;
+  <div>
+    <h2 class="section-title">Profile</h2>
+
+    <!-- loading state -->
+    <el-skeleton v-if="loading" :rows="3" animated class="mb-4" />
+
+    <!-- error state -->
+    <el-alert
+      v-if="error"
+      :title="error"
+      type="error"
+      show-icon
+      class="mb-4"
+    />
+
+    <!-- display card -->
+    <el-card v-else class="profile-card">
+      <div class="field">
+        <span class="label">Username:</span>
+        <span class="value">{{ profile.Username }}</span>
+      </div>
+      <div class="field">
+        <span class="label">Email:</span>
+        <span class="value">{{ profile.Email }}</span>
+      </div>
+      <div class="field">
+        <span class="label">Phone:</span>
+        <span class="value">{{ profile.PhoneNumber }}</span>
+      </div>
+      <div class="field">
+        <span class="label">Registered:</span>
+        <span class="value">{{ formattedDate(profile.RegistrationDate) }}</span>
+      </div>
+      <div class="field">
+        <span class="label">Last Login:</span>
+        <span class="value">{{ formattedDate(profile.LastLoginDate) }}</span>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { ElSkeleton, ElAlert, ElCard } from 'element-plus'
+import { fetchCurrentUser } from '@/api/user'
+
+interface Profile {
+  Username: string
+  Email: string
+  PhoneNumber: string
+  RegistrationDate: string
+  LastLoginDate: string
+}
+
+const loading = ref(true)
+const error   = ref('')
+const profile = ref<Profile>({
+  Username: '',
+  Email: '',
+  PhoneNumber: '',
+  RegistrationDate: '',
+  LastLoginDate: ''
+})
+
+onMounted(async () => {
+  try {
+    const res = await fetchCurrentUser()
+    profile.value = res.data
+  } catch (e: any) {
+    error.value =
+      e.response?.status === 401
+        ? '请先登录'
+        : '无法加载用户信息'
+  } finally {
+    loading.value = false
   }
-  .profile-form {
-    background: #fff;
-    padding: 24px;
-    border-radius: 8px;
-  }
-  </style>
-  
\ No newline at end of file
+})
+
+function formattedDate(iso: string) {
+  return iso ? new Date(iso).toLocaleString() : '—'
+}
+</script>
+
+<style scoped>
+.section-title {
+  font-size: 32px;
+  font-weight: 600;
+  margin-bottom: 24px;
+}
+.mb-4 {
+  margin-bottom: 16px;
+}
+.profile-card {
+  background: #fff;
+  padding: 24px;
+  border-radius: 8px;
+}
+.field {
+  display: flex;
+  margin-bottom: 12px;
+}
+.label {
+  width: 120px;
+  font-weight: 500;
+  color: #555;
+}
+.value {
+  flex: 1;
+  color: #333;
+}
+</style>

From 7d75c1bfa88b064f9801093f26aa988e17b0329e Mon Sep 17 00:00:00 2001
From: Renyye <1457077123@qq.com>
Date: Mon, 19 May 2025 20:33:52 +0800
Subject: [PATCH 04/16] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=9C=B0?=
 =?UTF-8?q?=E5=9D=80=E3=80=81=E8=AE=A2=E5=8D=95=E5=92=8C=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E8=AE=A4=E8=AF=81=E7=9B=B8=E5=85=B3=E5=8A=9F=E8=83=BD=EF=BC=8C?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=A2=9E=E5=88=A0=E6=94=B9=E6=9F=A5=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/api/address.ts               |  43 ++++
 src/frontend/src/api/auth.ts                  |   9 +
 src/frontend/src/api/order.ts                 |  58 +++++
 .../src/components/User/UserAddress.vue       | 227 +++++++++++++++---
 .../src/components/User/UserOrder.vue         |  92 +++++--
 .../src/components/User/UserProfile.vue       |  72 +++++-
 .../src/components/cards/category_card.vue    |   2 +-
 .../src/components/cards/user_info.vue        |  37 ++-
 src/frontend/src/views/Login.vue              |  28 ++-
 9 files changed, 498 insertions(+), 70 deletions(-)
 create mode 100644 src/frontend/src/api/address.ts
 create mode 100644 src/frontend/src/api/auth.ts
 create mode 100644 src/frontend/src/api/order.ts

diff --git a/src/frontend/src/api/address.ts b/src/frontend/src/api/address.ts
new file mode 100644
index 0000000..20de409
--- /dev/null
+++ b/src/frontend/src/api/address.ts
@@ -0,0 +1,43 @@
+import axios from 'axios'
+
+/** 单条地址 */
+export interface Address {
+  AddressID: number
+  UserID: number
+  RecipientName: string
+  PhoneNumber: string
+  FullAddress_Text: string
+  IsDefault: boolean
+}
+
+/** 分页结果 */
+export interface AddressList {
+  Addresses: Address[]
+  TotalCount: number
+}
+
+/* ---- CRUD ---- */
+
+/** 获取当前用户所有地址 */
+export const fetchAddresses = () =>
+  axios.get<AddressList>('/address')
+
+/** 获取详情（很少用，通常列表带全量字段即可） */
+export const fetchAddress = (id: number) =>
+  axios.get<Address>(`/address/${id}`)
+
+/** 新增 */
+export const addAddress = (payload: Omit<Address, 'AddressID' | 'UserID' | 'IsDefault'>) =>
+  axios.post<Address>('/address', payload)
+
+/** 更新 */
+export const updateAddress = (id: number, payload: Omit<Address, 'AddressID' | 'UserID' | 'IsDefault'>) =>
+  axios.put(`/address/${id}`, payload)
+
+/** 删除 */
+export const deleteAddress = (id: number) =>
+  axios.delete(`/address/${id}`)
+
+/** 设为默认 */
+export const setDefault = (id: number) =>
+  axios.post(`/address/${id}/set-default`)
diff --git a/src/frontend/src/api/auth.ts b/src/frontend/src/api/auth.ts
new file mode 100644
index 0000000..9aecbee
--- /dev/null
+++ b/src/frontend/src/api/auth.ts
@@ -0,0 +1,9 @@
+import axios from 'axios'
+
+/** Logout current session */
+export const logout = () =>
+  axios.post('/auth/logout')
+
+/** Logout all sessions for the current user */
+export const logoutAll = () =>
+  axios.post('/auth/logout-all')
diff --git a/src/frontend/src/api/order.ts b/src/frontend/src/api/order.ts
new file mode 100644
index 0000000..62e9049
--- /dev/null
+++ b/src/frontend/src/api/order.ts
@@ -0,0 +1,58 @@
+import axios from 'axios'
+
+/** 单个订单内的商品条目 */
+export interface OrderItem {
+  OrderItemID: number
+  OrderID: number
+  ProductID: number
+  StoreID: number
+  Quantity: number
+  PriceAtPurchase: string
+  ProductNameAtPurchase: string
+  ProductImageURLAtPurchase: string
+  Subtotal: string
+}
+
+/** 后端返回的订单对象 */
+export interface Order {
+  OrderID: number
+  UserID: number
+  StoreID: number
+  PaymentTransactionID: number
+  OrderStatus: string
+  OrderTotalAmount: string
+  DiscountAmount: string
+  ShippingFee: string
+  FinalAmountForThisOrder: string
+  ShippingAddress_RecipientName: string
+  ShippingAddress_PhoneNumber: string
+  ShippingAddress_Full: string
+  Notes_ByUser: string
+  Notes_ByMerchant: string
+  CreationTime: string
+  PaymentConfirmationTime?: string
+  ShippingTime?: string
+  DeliveryTime?: string
+  CompletionTime?: string
+  LastUpdatedDate: string
+  Items: OrderItem[]
+  PaymentStatus: string
+}
+
+/** 后端分页响应 */
+export interface OrdersResponse {
+  Orders: Order[]
+  TotalCount: number
+  Offset: number
+  Limit: number
+}
+
+/**
+ * 获取当前用户订单列表（分页）
+ * @param offset  页偏移，默认 0
+ * @param limit   每页数量，默认 20
+ */
+export const fetchOrders = (offset = 0, limit = 20) =>
+  axios.get<OrdersResponse>('/order/', {
+    params: { offset, limit }
+  })
diff --git a/src/frontend/src/components/User/UserAddress.vue b/src/frontend/src/components/User/UserAddress.vue
index f291253..678179c 100644
--- a/src/frontend/src/components/User/UserAddress.vue
+++ b/src/frontend/src/components/User/UserAddress.vue
@@ -1,38 +1,195 @@
 <template>
-    <div>
-      <h2 class="section-title">Addresses</h2>
-      <!-- 假设用户有多地址 -->
-      <el-card
-        v-for="addr in addresses"
-        :key="addr.id"
-        class="addr-card"
-      >
-        <p><strong>{{ addr.label }}</strong></p>
-        <p>{{ addr.detail }}</p>
-        <div style="margin-top: 8px">
-          <el-button size="mini">Edit</el-button>
-          <el-button size="mini" type="danger">Delete</el-button>
-        </div>
-      </el-card>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref } from 'vue'
-  const addresses = ref([
-    { id: 1, label: 'Home',   detail: '123 Main St, City, Country' },
-    { id: 2, label: 'Office', detail: '456 Office Rd, City, Country' }
-  ])
-  </script>
-  
-  <style scoped>
-  .section-title {
-    font-size: 32px;
-    font-weight: 600;
-    margin-bottom: 24px;
+  <div>
+    <h2 class="section-title">Addresses</h2>
+
+    <!-- 新增按钮 -->
+    <el-button type="primary" @click="openDialog()">Add New</el-button>
+
+    <!-- 列表 -->
+    <el-card
+      v-for="a in addresses"
+      :key="a.AddressID"
+      class="addr-card"
+    >
+      <template #header>
+        {{ a.RecipientName }}
+        <el-tag
+          v-if="a.IsDefault"
+          type="success"
+          effect="plain"
+          style="margin-left:8px;"
+        >
+          Default
+        </el-tag>
+      </template>
+
+      <p>{{ a.FullAddress_Text }}</p>
+      <p>{{ a.PhoneNumber }}</p>
+
+      <div class="actions">
+        <el-button size="small" @click="openDialog(a)">Edit</el-button>
+        <el-button size="small" type="danger" @click="remove(a)">Delete</el-button>
+        <el-button
+          v-if="!a.IsDefault"
+          size="small"
+          type="warning"
+          @click="makeDefault(a)"
+        >
+          Set Default
+        </el-button>
+      </div>
+    </el-card>
+
+    <!-- 空状态 / loading -->
+    <el-empty v-if="!loading && !addresses.length" description="No address" />
+    <el-skeleton v-if="loading" :rows="4" animated />
+
+    <!-- ============ 对话框 ============ -->
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.editing ? 'Edit Address' : 'New Address'"
+      width="500px"
+    >
+      <el-form :model="dialog.form" :rules="rules" ref="formRef" label-width="110px">
+        <el-form-item label="Recipient" prop="RecipientName">
+          <el-input v-model="dialog.form.RecipientName" />
+        </el-form-item>
+        <el-form-item label="Phone" prop="PhoneNumber">
+          <el-input v-model="dialog.form.PhoneNumber" />
+        </el-form-item>
+        <el-form-item label="Address" prop="FullAddress_Text">
+          <el-input type="textarea" v-model="dialog.form.FullAddress_Text" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="dialog.visible = false">Cancel</el-button>
+        <el-button
+          type="primary"
+          :loading="dialog.saving"
+          @click="saveAddress"
+        >Save</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import {
+  ElCard,
+  ElButton,
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElEmpty,
+  ElSkeleton,
+  ElMessageBox,
+  ElTag
+} from 'element-plus'
+import {
+  fetchAddresses,
+  addAddress,
+  updateAddress,
+  deleteAddress,
+  setDefault,
+  type Address
+} from '@/api/address'
+
+/* ================== 数据状态 ================== */
+const addresses       = ref<Address[]>([])
+const loading         = ref(true)
+
+/* ================== 表单 / 对话框 ================== */
+const dialog = reactive({
+  visible: false,
+  editing: false,
+  saving : false,
+  form   : {
+    AddressID: 0,
+    RecipientName: '',
+    PhoneNumber: '',
+    FullAddress_Text: ''
   }
-  .addr-card {
-    margin-bottom: 16px;
+})
+const formRef = ref<InstanceType<typeof ElForm>>()
+
+/* ================ 校验规则 ================ */
+const rules = {
+  RecipientName: [{ required: true, message: '请填写收件人', trigger: 'blur' }],
+  PhoneNumber  : [{ required: true, message: '请填写电话', trigger: 'blur' }],
+  FullAddress_Text: [{ required: true, message: '请填写地址', trigger: 'blur' }]
+}
+
+/* ================ 初始化加载 ================ */
+onMounted(async () => {
+  await reload()
+})
+
+async function reload() {
+  loading.value = true
+  const { data } = await fetchAddresses()
+  addresses.value = data.Addresses
+  loading.value = false
+}
+
+/* ================ 打开对话框 ================ */
+function openDialog(addr?: Address) {
+  dialog.editing = !!addr
+  dialog.visible = true
+  dialog.form = addr
+    ? { ...addr } // 编辑
+    : { AddressID: 0, RecipientName:'', PhoneNumber:'', FullAddress_Text:'' }
+}
+
+/* ================ 保存 ================ */
+async function saveAddress() {
+  await formRef.value?.validate(async valid => {
+    if (!valid) return
+    dialog.saving = true
+    try {
+      if (dialog.editing) {
+        await updateAddress(dialog.form.AddressID, dialog.form)
+      } else {
+        await addAddress(dialog.form)
+      }
+      ElMessage.success('Saved')
+      dialog.visible = false
+      await reload()
+    } catch {
+      ElMessage.error('Save failed')
+    } finally {
+      dialog.saving = false
+    }
+  })
+}
+
+async function remove(addr: Address) {
+  try {
+    await ElMessageBox.confirm('Delete this address?', 'Confirm', { type: 'warning' })
+    await deleteAddress(addr.AddressID)
+    ElMessage.success('Deleted')
+    await reload()
+  } catch {
+    ElMessage.error('Delete failed')
   }
-  </style>
-  
\ No newline at end of file
+}
+
+async function makeDefault(addr: Address) {
+  try {
+    await setDefault(addr.AddressID)
+    ElMessage.success('Set as default')
+    await reload()
+  } catch {
+    ElMessage.error('Failed')
+  }
+}
+</script>
+
+<style scoped>
+.section-title{ font-size:32px;font-weight:600;margin-bottom:24px; }
+.addr-card    { margin:16px 0; }
+.actions      { margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
+</style>
diff --git a/src/frontend/src/components/User/UserOrder.vue b/src/frontend/src/components/User/UserOrder.vue
index ffd5bb4..1434dfd 100644
--- a/src/frontend/src/components/User/UserOrder.vue
+++ b/src/frontend/src/components/User/UserOrder.vue
@@ -1,38 +1,81 @@
 <template>
   <div>
     <h2 class="section-title">Orders</h2>
-    <order-info-card
-      v-for="order in orders"
-      :key="order.orderId"
-      v-bind="order"
+
+    <!-- 加载中 -->
+    <el-skeleton v-if="loading" :rows="4" animated class="mb-4" />
+
+    <!-- 错误提示 -->
+    <el-alert
+      v-if="error"
+      :title="error"
+      type="error"
+      show-icon
+      class="mb-4"
     />
+
+    <!-- 订单列表 -->
+    <template v-else>
+      <order-info-card
+        v-for="o in orders"
+        :key="o.OrderID"
+        v-bind="mapToCardProps(o)"
+      />
+
+      <!-- 空状态 -->
+      <el-empty
+        v-if="!orders.length"
+        description="No orders found"
+      />
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import {
+  ElSkeleton,
+  ElAlert,
+  ElEmpty
+} from 'element-plus'
+import { fetchOrders, type Order } from '@/api/order'
 import OrderInfoCard from '@/components/cards/order_info_card.vue'
 
-/** 这里也是假数据；可以 onMounted 时调后端接口 */
-const orders = [
-  {
-    orderId: '36637649',
-    date: 'June 17, 2018',
-    items: 7,
-    shipping: 'Pick up from store',
-    payment: 'Online by card',
-    total: 4896.0,
-    status: 'PROCESSING'
-  },
-  {
-    orderId: '36637648',
-    date: 'June 16, 2018',
-    items: 2,
-    shipping: 'Pick up from store',
-    payment: 'Online by card',
-    total: 599.0,
-    status: 'CANCELED'
+// 本地状态
+const loading = ref(true)
+const error   = ref('')
+const orders  = ref<Order[]>([])
+
+// 首次挂载时取第一页
+onMounted(async () => {
+  try {
+    const res = await fetchOrders(0, 20)
+    orders.value = res.data.Orders
+    // 如果需分页，可根据 res.data.TotalCount / Offset 处理
+  } catch (e: any) {
+    error.value = e.response?.status === 401
+      ? '请先登录'
+      : '无法加载订单列表'
+  } finally {
+    loading.value = false
+  }
+})
+
+/**
+ * 将后端 Order 对象映射成 OrderInfoCard 所需 props
+ * 假设 OrderInfoCard 接受 orderId, date, items, shipping, payment, total, status
+ */
+function mapToCardProps(o: Order) {
+  return {
+    orderId: o.OrderID.toString(),
+    date: new Date(o.CreationTime).toLocaleString(),
+    items: o.Items.reduce((sum, i) => sum + i.Quantity, 0),
+    shipping: o.ShippingAddress_Full,
+    payment: o.PaymentStatus,
+    total: parseFloat(o.FinalAmountForThisOrder),
+    status: o.OrderStatus
   }
-]
+}
 </script>
 
 <style scoped>
@@ -42,4 +85,5 @@ const orders = [
   margin-bottom: 24px;
   color: #222;
 }
+.mb-4 { margin-bottom: 16px; }
 </style>
diff --git a/src/frontend/src/components/User/UserProfile.vue b/src/frontend/src/components/User/UserProfile.vue
index beafaea..c143e48 100644
--- a/src/frontend/src/components/User/UserProfile.vue
+++ b/src/frontend/src/components/User/UserProfile.vue
@@ -36,14 +36,40 @@
         <span class="label">Last Login:</span>
         <span class="value">{{ formattedDate(profile.LastLoginDate) }}</span>
       </div>
+
+      <!-- logout buttons -->
+      <div class="logout-actions">
+        <el-button
+          type="warning"
+          :loading="loggingOut"
+          @click="onLogout"
+        >
+          Logout
+        </el-button>
+        <el-button
+          type="danger"
+          :loading="loggingOutAll"
+          @click="onLogoutAll"
+        >
+          Logout All
+        </el-button>
+      </div>
     </el-card>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { ElSkeleton, ElAlert, ElCard } from 'element-plus'
+import { useRouter } from 'vue-router'
+import {
+  ElSkeleton,
+  ElAlert,
+  ElCard,
+  ElButton,
+  ElMessage
+} from 'element-plus'
 import { fetchCurrentUser } from '@/api/user'
+import { logout, logoutAll } from '@/api/auth'
 
 interface Profile {
   Username: string
@@ -53,15 +79,19 @@ interface Profile {
   LastLoginDate: string
 }
 
-const loading = ref(true)
-const error   = ref('')
-const profile = ref<Profile>({
+const router = useRouter()
+
+const loading      = ref(true)
+const error        = ref('')
+const profile      = ref<Profile>({
   Username: '',
   Email: '',
   PhoneNumber: '',
   RegistrationDate: '',
   LastLoginDate: ''
 })
+const loggingOut   = ref(false)
+const loggingOutAll = ref(false)
 
 onMounted(async () => {
   try {
@@ -80,6 +110,34 @@ onMounted(async () => {
 function formattedDate(iso: string) {
   return iso ? new Date(iso).toLocaleString() : '—'
 }
+
+async function onLogout() {
+  loggingOut.value = true
+  try {
+    await logout()
+    localStorage.removeItem('access_token')
+    ElMessage.success('Logged out')
+    router.replace({ path: '/' })
+  } catch {
+    ElMessage.error('Logout failed')
+  } finally {
+    loggingOut.value = false
+  }
+}
+
+async function onLogoutAll() {
+  loggingOutAll.value = true
+  try {
+    await logoutAll()
+    localStorage.removeItem('access_token')
+    ElMessage.success('All sessions logged out')
+    router.replace({ path: '/' })
+  } catch {
+    ElMessage.error('Logout all failed')
+  } finally {
+    loggingOutAll.value = false
+  }
+}
 </script>
 
 <style scoped>
@@ -109,4 +167,10 @@ function formattedDate(iso: string) {
   flex: 1;
   color: #333;
 }
+.logout-actions {
+  margin-top: 24px;
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+}
 </style>
diff --git a/src/frontend/src/components/cards/category_card.vue b/src/frontend/src/components/cards/category_card.vue
index 2dfcec1..e1ccc43 100644
--- a/src/frontend/src/components/cards/category_card.vue
+++ b/src/frontend/src/components/cards/category_card.vue
@@ -1,5 +1,5 @@
 <template>
-    <RouterLink :to="`/catalog/${id}`" class="category-card">
+    <RouterLink :to="`/explore?category_id=${id}`" class="category-card">
       <img :src="`${icon}`" alt="{{ name }}" class="cat-icon" />
       <div class="cat-name">{{ name }}</div>
       <div class="cat-price">{{ price }}</div>
diff --git a/src/frontend/src/components/cards/user_info.vue b/src/frontend/src/components/cards/user_info.vue
index 3329e9c..787d18f 100644
--- a/src/frontend/src/components/cards/user_info.vue
+++ b/src/frontend/src/components/cards/user_info.vue
@@ -15,8 +15,8 @@
       <el-divider />
       <el-menu class="user-menu" :default-active="active" @select="onSelect">
         <el-menu-item index="profile"><b>Profile</b></el-menu-item>
-        <el-menu-item index="order"><b>Orders ({{ orderCount }})</b></el-menu-item>
-        <el-menu-item index="cart">Cart ({{ orderCount }})</el-menu-item>
+        <el-menu-item index="order"><b>Orders ({{ realOrderCount }})</b></el-menu-item>
+        <el-menu-item index="cart">Cart ({{ realCartCount }})</el-menu-item>
         <el-menu-item index="address">Address</el-menu-item>
         <!-- 可根据需要添加更多菜单项 -->
       </el-menu>
@@ -26,6 +26,9 @@
 <script setup lang="ts">
   import { ElButton, ElIcon, ElDivider, ElMenu, ElMenuItem } from 'element-plus'
   import { Setting, ArrowRight } from '@element-plus/icons-vue'
+  import { ref, onMounted } from 'vue'
+  import { fetchOrders } from '@/api/order'
+  import { fetchCart } from '@/api/cart'
 
   import { useRouter } from 'vue-router'
   const router = useRouter()
@@ -40,6 +43,36 @@
     favoriteCount: number
     active?: string
   }>()
+  
+  // 创建响应式状态存储实际的订单和购物车数量
+  const realOrderCount = ref(props.orderCount)
+  const realCartCount = ref(0)
+  
+  // 获取订单数量
+  const fetchOrderCount = async () => {
+    try {
+      const response = await fetchOrders(0, 1) // 只需要总数，限制为1条数据
+      realOrderCount.value = response.data.TotalCount
+    } catch (error) {
+      console.error('获取订单数量失败:', error)
+    }
+  }
+  
+  // 获取购物车数量
+  const fetchCartCount = async () => {
+    try {
+      const response = await fetchCart()
+      realCartCount.value = response.data.TotalItems
+    } catch (error) {
+      console.error('获取购物车数量失败:', error)
+    }
+  }
+  
+  // 组件挂载时获取最新数据
+  onMounted(() => {
+    fetchOrderCount()
+    fetchCartCount()
+  })
   </script>
   
   <style scoped>
diff --git a/src/frontend/src/views/Login.vue b/src/frontend/src/views/Login.vue
index 03d0eeb..b84c133 100644
--- a/src/frontend/src/views/Login.vue
+++ b/src/frontend/src/views/Login.vue
@@ -3,8 +3,7 @@
     <el-col :span="8">
       <el-tabs
         type="border-card"
-        v-model:active-name="activeTab"
-        @tab-click="handleTabClick"
+        v-model="activeTab"
       >
         <!-- 登录 -->
         <el-tab-pane label="登录" name="login">
@@ -203,8 +202,29 @@ const register = async () => {
         data.PhoneNumber = registerForm.phone
       }
       await axios.post('/user/register', data)
-      ElMessage.success('注册成功，正在跳转…')
-      router.push('/')
+      ElMessage.success('注册成功，正在自动登录...')
+      
+      // 注册成功后自动登录
+      try {
+        const res = await axios.post(
+          '/auth/token',
+          qs.stringify({
+            grant_type: 'password',
+            username: registerForm.username,
+            password: registerForm.password,
+          }),
+          { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
+        )
+        const token = res.data.access_token
+        localStorage.setItem('access_token', token)
+        router.push('/')
+      } catch (loginError) {
+        ElMessage.warning('自动登录失败，请手动登录')
+        // 自动切换到登录标签
+        activeTab.value = 'login'
+        // 预填用户名
+        loginForm.username = registerForm.username
+      }
     } catch (error) {
       console.error(error)
       if (axios.isAxiosError(error) && error.response) {

From 625c0e05edf83c50bca300e15aeedc9f66d19de4 Mon Sep 17 00:00:00 2001
From: Renyye <1457077123@qq.com>
Date: Wed, 21 May 2025 11:56:07 +0800
Subject: [PATCH 05/16] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E8=AF=A6=E6=83=85=E3=80=81=E5=88=9B=E5=BB=BA=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E5=92=8C=E6=94=AF=E4=BB=98=E5=8A=9F=E8=83=BD=EF=BC=8C?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E8=B4=AD=E7=89=A9=E8=BD=A6=E5=92=8C=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/api/order.ts                 |  54 +++++
 src/frontend/src/api/payment.ts               |  15 ++
 src/frontend/src/components/User/UserCart.vue | 163 +++++++------
 .../src/components/User/UserOrder.vue         |  71 +++++-
 .../src/components/User/cart/CartCheckout.vue | 207 +++++++++++++++++
 .../src/components/cards/cart_item_card.vue   |   2 +-
 .../src/components/cards/order_info_card.vue  | 138 ++++++++---
 .../src/components/cards/product_card.vue     |   1 +
 .../src/components/cards/shop_card.vue        |   0
 .../src/components/cards/user_info.vue        |  16 +-
 .../src/components/layout/NaviBar.vue         |   4 +-
 .../src/components/product/PriceBox.vue       |  31 ++-
 src/frontend/src/router/index.js              |   7 +-
 src/frontend/src/views/Login.vue              |   2 -
 src/frontend/src/views/Payment.vue            | 214 ++++++++++++++++++
 src/frontend/src/views/ProductDetail.vue      |   3 +-
 16 files changed, 805 insertions(+), 123 deletions(-)
 create mode 100644 src/frontend/src/api/payment.ts
 create mode 100644 src/frontend/src/components/User/cart/CartCheckout.vue
 create mode 100644 src/frontend/src/components/cards/shop_card.vue
 create mode 100644 src/frontend/src/views/Payment.vue

diff --git a/src/frontend/src/api/order.ts b/src/frontend/src/api/order.ts
index 62e9049..7b1de2c 100644
--- a/src/frontend/src/api/order.ts
+++ b/src/frontend/src/api/order.ts
@@ -56,3 +56,57 @@ export const fetchOrders = (offset = 0, limit = 20) =>
   axios.get<OrdersResponse>('/order/', {
     params: { offset, limit }
   })
+
+/**
+ * 获取单个订单详情
+ * @param orderId 订单ID
+ */
+export const fetchOrderDetail = (orderId: number) =>
+  axios.get<Order>(`/order/${orderId}`)
+
+/** 创建订单请求参数 */
+export interface CreateOrderPayload {
+  ShippingAddressID: number       // 选中的送货地址ID
+  Items: { CartItemID: number }[] // 购物车中选中的条目ID数组
+  Notes_ByUser: string            // 用户备注(可选)
+}
+
+/** 创建订单响应中的订单项 */
+export interface CreatedOrderItem {
+  OrderItemID: number
+  OrderID: number
+  ProductID: number
+  StoreID: number
+  Quantity: number
+  PriceAtPurchase: string
+  ProductNameAtPurchase: string
+  ProductImageURLAtPurchase: string
+  Subtotal: string
+}
+
+/** 创建订单响应中的订单 */
+export interface CreatedOrder {
+  OrderID: number
+  StoreID: number
+  FinalAmountForThisOrder: string
+  OrderStatus: string
+  Items: CreatedOrderItem[]
+}
+
+/** 创建订单响应 */
+export interface CreateOrderResponse {
+  PaymentTransactionID: number
+  ExternalPaymentURL: string
+  TotalAmountDue: string
+  Currency: string
+  OrdersCreated: CreatedOrder[]
+  Message: string
+}
+
+/**
+ * 创建订单
+ */
+export const createOrder = (payload: CreateOrderPayload) =>
+  axios.post<CreateOrderResponse>('/order/create', payload)
+
+
diff --git a/src/frontend/src/api/payment.ts b/src/frontend/src/api/payment.ts
new file mode 100644
index 0000000..2677fc2
--- /dev/null
+++ b/src/frontend/src/api/payment.ts
@@ -0,0 +1,15 @@
+import axios from 'axios'
+
+/** 创建订单后模拟支付 */
+export const simulatePay = (
+  paymentTransactionId: number,
+  method = 'MockPayment'
+) =>
+  axios.post(`/payment/${paymentTransactionId}/simulate-pay`, {
+    SimulatedPaymentMethod: method,
+    ExternalGatewayTxID: `mock-${Date.now()}`
+  })
+
+/** 查询支付状态 */
+export const paymentStatus = (paymentTransactionId: number) =>
+  axios.get(`/payment/${paymentTransactionId}/status`)
diff --git a/src/frontend/src/components/User/UserCart.vue b/src/frontend/src/components/User/UserCart.vue
index ccda985..32aa4d6 100644
--- a/src/frontend/src/components/User/UserCart.vue
+++ b/src/frontend/src/components/User/UserCart.vue
@@ -1,70 +1,101 @@
-<template>
-    <div class="common-layout">
-      <el-container>
-        <el-header>My Cart</el-header>
-  
-        <el-main>
-          <CartItemCard
-            v-for="it in cartItems"
-            :key="it.CartItemID"
-            :item="it"
-            @updated="updateLocal"
-            @removed="removeLocal"
-            @checked="toggleSelect"
-          />
-          <el-empty v-if="!cartItems.length && !loading" description="Cart is empty" />
-          <el-skeleton v-if="loading" :rows="4" animated />
-        </el-main>
-  
-        <el-footer>
-          <CartSummary :selected="selectedItems" @checkout="checkout" />
-        </el-footer>
-      </el-container>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, onMounted, computed } from 'vue'
-  import { ElEmpty, ElSkeleton, ElMessage } from 'element-plus'
-  import CartItemCard from '@/components/cards/cart_item_card.vue'
-  import CartSummary  from '@/components/User/cart/CartSummary.vue'
-  import { fetchCart, type CartItem } from '@/api/cart'
-  
-  const loading     = ref(true)
-  const cartItems   = ref<CartItem[]>([])
-  const selectedIds = ref<Set<number>>(new Set())
-  
-  const selectedItems = computed(() =>
-    cartItems.value.filter(i => selectedIds.value.has(i.CartItemID))
-  )
-  
-  onMounted(async () => {
-    try {
-      const res = await fetchCart()
-      cartItems.value = res.data.Items
-    } finally {
-      loading.value = false
-    }
-  })
-  
-  /* ===== helpers ===== */
-  function updateLocal(it: CartItem) {
-    const idx = cartItems.value.findIndex(x => x.CartItemID === it.CartItemID)
-    if (idx >= 0) cartItems.value[idx] = it
-  }
-  function removeLocal(id: number) {
-    cartItems.value = cartItems.value.filter(x => x.CartItemID !== id)
-    selectedIds.value.delete(id)
-  }
-  function toggleSelect({ id, checked }: { id: number; checked: boolean }) {
-    checked ? selectedIds.value.add(id) : selectedIds.value.delete(id)
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import CartItemCard from '@/components/cards/cart_item_card.vue'
+import CartSummary  from '@/components/User/cart/CartSummary.vue'
+import CartCheckout from '@/components/User/cart/CartCheckout.vue'
+
+import { fetchCart, type CartItem } from '@/api/cart'
+import { paymentStatus } from '@/api/payment'
+
+/* ========== 数据 ========== */
+const loading   = ref(true)
+const cartItems = ref<CartItem[]>([])
+const selected  = ref<Set<number>>(new Set())
+
+const selectedItems = computed(() =>
+  cartItems.value.filter(i => selected.value.has(i.CartItemID))
+)
+
+/* ========== 初始化 ========== */
+onMounted(reloadCart)
+
+async function reloadCart() {
+  loading.value = true
+  try {
+    const { data } = await fetchCart()
+    cartItems.value = data.Items
+  } finally {
+    loading.value = false
   }
-  
-  /* 结账示例 */
-  function checkout(selected: CartItem[]) {
-    ElMessage.success(`Checkout ${selected.length} items, total ¥${selectedItems.value.reduce((s,i)=>s+i.PriceAtAddition*i.Quantity,0).toFixed(2)}`)
-  }
-  </script>
+}
+
+/* ========== 与子条目通信 ========== */
+function updateLocal(it: CartItem) {
+  const idx = cartItems.value.findIndex(x => x.CartItemID === it.CartItemID)
+  if (idx > -1) cartItems.value[idx] = it
+}
+function removeLocal(id: number) {
+  cartItems.value = cartItems.value.filter(x => x.CartItemID !== id)
+  selected.value.delete(id)
+}
+function toggleSelect({ id, checked }: { id: number; checked: boolean }) {
+  checked ? selected.value.add(id) : selected.value.delete(id)
+}
+
+/* ========== Checkout 逻辑 ========== */
+const checkoutRef = ref<InstanceType<typeof CartCheckout>>()
+
+/* CartSummary 抛出的事件 */
+function openCheckout() {
+  checkoutRef.value?.openDialog()
+}
+
+/* CartCheckout 支付完成后回调 */
+async function afterPaid(txId: number) {
+  // 可选：轮询一次状态给个 Toast
+  try {
+    const { data } = await paymentStatus(txId)
+    ElMessage.success(`Payment status: ${data.Status}`)
+  } catch { /* ignore */ }
+
+  // 刷新购物车
+  await reloadCart()
+  selected.value.clear()
+}
+
+/* ========== 结尾 ========== */
+</script>
+
+<template>
+  <el-container>
+    <el-header>Shopping Cart</el-header>
+
+    <el-main>
+      <CartItemCard
+        v-for="ci in cartItems"
+        :key="ci.CartItemID"
+        :item="ci"
+        @updated="updateLocal"
+        @removed="removeLocal"
+        @checked="toggleSelect"
+      />
+
+      <el-empty v-if="!loading && !cartItems.length" description="Cart Empty" />
+      <el-skeleton v-else-if="loading" rows="4" animated />
+    </el-main>
+
+    <el-footer>
+      <CartSummary :selected="selectedItems" @checkout="openCheckout" />
+      <CartCheckout
+        ref="checkoutRef"
+        :selected="selectedItems"
+        @paid="afterPaid"
+      />
+    </el-footer>
+  </el-container>
+</template>
+
   
   <style scoped>
   .common-layout ::v-deep(.el-header){ font-size:24px; font-weight:600; }
diff --git a/src/frontend/src/components/User/UserOrder.vue b/src/frontend/src/components/User/UserOrder.vue
index 1434dfd..88ba9bd 100644
--- a/src/frontend/src/components/User/UserOrder.vue
+++ b/src/frontend/src/components/User/UserOrder.vue
@@ -16,11 +16,28 @@
 
     <!-- 订单列表 -->
     <template v-else>
-      <order-info-card
-        v-for="o in orders"
-        :key="o.OrderID"
-        v-bind="mapToCardProps(o)"
-      />
+      <el-collapse accordion>
+        <el-collapse-item 
+          v-for="o in orders" 
+          :key="o.OrderID"
+          :name="o.OrderID"
+        >
+          <template #title>
+            <div class="order-collapse-header">
+              <span class="order-id">#{{ o.OrderID }}</span>
+              <span class="order-date">{{ new Date(o.CreationTime).toLocaleString() }}</span>
+              <el-tag :type="getStatusType(o.OrderStatus)" effect="plain">{{ o.OrderStatus }}</el-tag>
+              <span class="order-total">¥{{ parseFloat(o.FinalAmountForThisOrder).toFixed(2) }}</span>
+            </div>
+          </template>
+          
+          <!-- 订单详情卡片 -->
+          <order-info-card
+            v-bind="mapToCardProps(o)"
+            :items-detail="o.Items"
+          />
+        </el-collapse-item>
+      </el-collapse>
 
       <!-- 空状态 -->
       <el-empty
@@ -36,7 +53,10 @@ import { ref, onMounted } from 'vue'
 import {
   ElSkeleton,
   ElAlert,
-  ElEmpty
+  ElEmpty,
+  ElCollapse,
+  ElCollapseItem,
+  ElTag
 } from 'element-plus'
 import { fetchOrders, type Order } from '@/api/order'
 import OrderInfoCard from '@/components/cards/order_info_card.vue'
@@ -63,17 +83,31 @@ onMounted(async () => {
 
 /**
  * 将后端 Order 对象映射成 OrderInfoCard 所需 props
- * 假设 OrderInfoCard 接受 orderId, date, items, shipping, payment, total, status
  */
 function mapToCardProps(o: Order) {
   return {
     orderId: o.OrderID.toString(),
     date: new Date(o.CreationTime).toLocaleString(),
-    items: o.Items.reduce((sum, i) => sum + i.Quantity, 0),
+    itemCount: o.Items.reduce((sum, i) => sum + i.Quantity, 0),
     shipping: o.ShippingAddress_Full,
+    recipient: o.ShippingAddress_RecipientName,
+    phone: o.ShippingAddress_PhoneNumber,
     payment: o.PaymentStatus,
     total: parseFloat(o.FinalAmountForThisOrder),
-    status: o.OrderStatus
+    status: o.OrderStatus,
+    notes: o.Notes_ByUser || '无备注'
+  }
+}
+
+/**
+ * 获取订单状态对应的标签类型
+ */
+function getStatusType(status: string) {
+  switch(status) {
+    case 'COMPLETED': return 'success'
+    case 'PENDING_PAYMENT': return 'warning'
+    case 'CANCELLED': return 'danger'
+    default: return 'info'
   }
 }
 </script>
@@ -86,4 +120,23 @@ function mapToCardProps(o: Order) {
   color: #222;
 }
 .mb-4 { margin-bottom: 16px; }
+
+.order-collapse-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.order-id {
+  font-weight: 600;
+  min-width: 60px;
+}
+.order-date {
+  color: #606266;
+  flex-grow: 1;
+}
+.order-total {
+  font-weight: 600;
+  color: #f56c6c;
+  margin-left: 16px;
+}
 </style>
diff --git a/src/frontend/src/components/User/cart/CartCheckout.vue b/src/frontend/src/components/User/cart/CartCheckout.vue
new file mode 100644
index 0000000..878e0d1
--- /dev/null
+++ b/src/frontend/src/components/User/cart/CartCheckout.vue
@@ -0,0 +1,207 @@
+<!-- src/frontend/src/components/User/cart/CartCheckout.vue -->
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    title="Checkout"
+    width="500px"
+  >
+    <el-form label-width="120px">
+      <!-- 地址选择 -->
+      <el-form-item label="Delivery Address" required>
+        <el-select v-model="selectedAddressId" placeholder="Select delivery address" style="width: 100%">
+          <el-option
+            v-for="addr in addresses"
+            :key="addr.AddressID"
+            :label="`${addr.RecipientName} - ${addr.PhoneNumber} - ${addr.FullAddress_Text}`"
+            :value="addr.AddressID"
+          />
+        </el-select>
+        <div v-if="!addresses.length" class="no-address-tip">
+          <el-alert title="No address found" type="warning" :closable="false" />
+        </div>
+      </el-form-item>
+
+      <!-- 商品列表 -->
+      <el-form-item label="Items">
+        <div class="items-summary">
+          <div class="item-row" v-for="item in selected" :key="item.CartItemID">
+            <span class="item-name truncate">{{ item.ProductName }}</span>
+            <span class="item-qty">x{{ item.Quantity }}</span>
+            <span class="item-price">¥{{ (item.PriceAtAddition * item.Quantity).toFixed(2) }}</span>
+          </div>
+        </div>
+      </el-form-item>
+
+      <!-- 订单备注 -->
+      <el-form-item label="Notes">
+        <el-input v-model="notes" type="textarea" :rows="2" placeholder="Optional notes for this order" />
+      </el-form-item>
+
+      <!-- 总价 -->
+      <el-form-item label="Total">
+        <span class="total-price">¥{{ totalPrice.toFixed(2) }}</span>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">Cancel</el-button>
+        <el-button
+          type="primary"
+          :loading="loading"
+          :disabled="!selectedAddressId || !selected.length"
+          @click="submitOrder"
+        >
+          Submit Order
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import type { CartItem } from '@/api/cart'
+import { fetchAddresses, type Address } from '@/api/address'
+import { createOrder } from '@/api/order'
+import { simulatePay } from '@/api/payment'
+
+const props = defineProps<{
+  selected: CartItem[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'paid', paymentTransactionId: number): void
+}>()
+
+const router = useRouter()
+const dialogVisible = ref(false)
+const loading = ref(false)
+const addresses = ref<Address[]>([])
+const selectedAddressId = ref<number>()
+const notes = ref('')
+
+// 计算总价
+const totalPrice = computed(() =>
+  props.selected.reduce((sum, item) => sum + item.PriceAtAddition * item.Quantity, 0)
+)
+
+// 打开对话框时加载地址
+onMounted(async () => {
+  try {
+    const { data } = await fetchAddresses()
+    addresses.value = data.Addresses
+    
+    // 如果有默认地址，自动选择
+    const defaultAddr = addresses.value.find(a => a.IsDefault)
+    if (defaultAddr) {
+      selectedAddressId.value = defaultAddr.AddressID
+    } else if (addresses.value.length > 0) {
+      selectedAddressId.value = addresses.value[0].AddressID
+    }
+  } catch (error) {
+    ElMessage.error('Failed to load addresses')
+  }
+})
+
+// 提供给父组件调用的方法
+const openDialog = () => {
+  dialogVisible.value = true
+}
+
+// 提交订单
+const submitOrder = async () => {
+  if (!selectedAddressId.value) {
+    ElMessage.warning('Please select a delivery address')
+    return
+  }
+
+  loading.value = true
+  try {
+    // 1. 创建订单
+    const { data } = await createOrder({
+      ShippingAddressID: selectedAddressId.value,
+      Items: props.selected.map(item => ({ CartItemID: item.CartItemID })),
+      Notes_ByUser: notes.value
+    })
+    
+    // 2. 关闭对话框
+    dialogVisible.value = false
+    loading.value = false
+    
+    // 3. 跳转到支付页面，传递支付交易ID
+    router.push(`/payment/${data.PaymentTransactionID}`)
+    
+  } catch (error: any) {
+    // 优化错误处理，显示API返回的详细错误信息
+    if (error.response && error.response.data && error.response.data.detail) {
+      // 如果API返回了详细错误信息，展示它
+      ElMessage.error(error.response.data.detail)
+    } else {
+      // 否则显示通用错误信息
+      ElMessage.error('Failed to create order')
+    }
+    console.error('Order creation failed:', error)
+    loading.value = false
+  }
+}
+
+// 将openDialog方法暴露给父组件
+defineExpose({
+  openDialog
+})
+</script>
+
+<style scoped>
+.items-summary {
+  max-height: 200px;
+  overflow-y: auto;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 8px;
+}
+.item-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 0;
+  border-bottom: 1px dashed #eee;
+}
+.item-row:last-child {
+  border-bottom: none;
+}
+.item-name {
+  flex: 1;
+  min-width: 0;
+  margin-right: 10px;
+}
+.item-qty {
+  color: #666;
+  margin: 0 10px;
+  width: 40px;
+  text-align: center;
+}
+.item-price {
+  width: 80px;
+  text-align: right;
+  font-weight: 500;
+}
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.total-price {
+  color: #f56c6c;
+  font-size: 20px;
+  font-weight: 600;
+}
+.no-address-tip {
+  margin-top: 10px;
+}
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/frontend/src/components/cards/cart_item_card.vue b/src/frontend/src/components/cards/cart_item_card.vue
index 789f359..514734b 100644
--- a/src/frontend/src/components/cards/cart_item_card.vue
+++ b/src/frontend/src/components/cards/cart_item_card.vue
@@ -57,7 +57,7 @@ async function changeQty(qty: number) {
   try {
     await updateCartItem(props.item.CartItemID, qty)
     emit('updated', { ...props.item, Quantity: qty })
-    ElMessage.success('Quantity updated')
+    // ElMessage.success('Quantity updated')
   } catch {
     ElMessage.error('Failed to update quantity')
   } finally {
diff --git a/src/frontend/src/components/cards/order_info_card.vue b/src/frontend/src/components/cards/order_info_card.vue
index b814264..7e06add 100644
--- a/src/frontend/src/components/cards/order_info_card.vue
+++ b/src/frontend/src/components/cards/order_info_card.vue
@@ -5,53 +5,97 @@
         <span class="order-date">from {{ date }}</span>
       </div>
       <el-divider />
-      <div class="order-row">
-        <span>Items</span>
-        <span>{{ items }}</span>
+      <div class="order-details">
+        <div class="order-row">
+          <span>收件人</span>
+          <span>{{ recipient }}</span>
+        </div>
+        <div class="order-row">
+          <span>联系电话</span>
+          <span>{{ phone }}</span>
+        </div>
+        <div class="order-row">
+          <span>配送地址</span>
+          <span>{{ shipping }}</span>
+        </div>
+        <div class="order-row">
+          <span>支付状态</span>
+          <span>{{ payment }}</span>
+        </div>
+        <div class="order-row">
+          <span>备注</span>
+          <span>{{ notes }}</span>
+        </div>
       </div>
-      <div class="order-row">
-        <span>Shipping</span>
-        <span>{{ shipping }}</span>
-      </div>
-      <div class="order-row">
-        <span>Payment</span>
-        <span>{{ payment }}</span>
-      </div>
-      <div class="order-row">
-        <span>Total</span>
-        <span>${{ total.toFixed(2) }}</span>
-      </div>
-      <div class="order-row">
-        <span>Status</span>
-        <span>
-          <el-tag
-            :type="statusType"
-            effect="plain"
-          >{{ status }}</el-tag>
-        </span>
+      
+      <el-divider content-position="left">订单商品 (共{{ itemCount }}件)</el-divider>
+      
+      <!-- 商品详情表格 -->
+      <el-table 
+        :data="itemsDetail" 
+        stripe 
+        size="small" 
+        class="items-table"
+      >
+        <el-table-column prop="ProductNameAtPurchase" label="商品" min-width="200">
+          <template #default="scope">
+            <div class="product-cell">
+              <el-image 
+                :src="scope.row.ProductImageURLAtPurchase" 
+                fit="cover"
+                class="product-image"
+                :preview-src-list="[scope.row.ProductImageURLAtPurchase]"
+              >
+                <template #error>
+                  <div class="image-placeholder">无图片</div>
+                </template>
+              </el-image>
+              <span>{{ scope.row.ProductNameAtPurchase }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="PriceAtPurchase" label="单价" width="100">
+          <template #default="scope">
+            ¥{{ parseFloat(scope.row.PriceAtPurchase).toFixed(2) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="Quantity" label="数量" width="80" />
+        <el-table-column prop="Subtotal" label="小计" width="120">
+          <template #default="scope">
+            ¥{{ parseFloat(scope.row.Subtotal).toFixed(2) }}
+          </template>
+        </el-table-column>
+      </el-table>
+      
+      <div class="order-total">
+        总计: <span class="price">¥{{ total.toFixed(2) }}</span>
       </div>
     </div>
   </template>
   
   <script setup lang="ts">
   import { computed } from 'vue'
-  import { ElTag, ElDivider } from 'element-plus'
-  
+  import { ElTag, ElDivider, ElTable, ElTableColumn, ElImage } from 'element-plus'
+  import type { OrderItem } from '@/api/order'
+    
   const props = defineProps<{
     orderId: string | number
     date: string
-    items: number
+    itemCount: number
     shipping: string
+    recipient: string
+    phone: string
     payment: string
     total: number
     status: string
+    notes: string
+    itemsDetail: OrderItem[]
   }>()
-  
+    
   const statusType = computed(() => {
-    if (props.status === 'PROCESSING') return 'info'
-    if (props.status === 'CANCELED') return 'danger'
     if (props.status === 'COMPLETED') return 'success'
-    // Default to 'info' or another valid type instead of ''
+    if (props.status === 'CANCELLED') return 'danger'
+    if (props.status === 'PENDING_PAYMENT') return 'warning'
     return 'info'
   })
   </script>
@@ -90,4 +134,38 @@
   .order-row:not(:last-child) {
     border-bottom: 1px solid #f0f0f0;
   }
+  .items-table {
+    margin: 16px 0;
+  }
+  .product-cell {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .product-image {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+  }
+  .image-placeholder {
+    width: 50px;
+    height: 50px;
+    background: #f5f7fa;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #909399;
+    font-size: 12px;
+  }
+  .order-total {
+    text-align: right;
+    margin-top: 16px;
+    font-weight: 500;
+    font-size: 16px;
+  }
+  .price {
+    color: #f56c6c;
+    font-size: 18px;
+    margin-left: 8px;
+  }
   </style>
\ No newline at end of file
diff --git a/src/frontend/src/components/cards/product_card.vue b/src/frontend/src/components/cards/product_card.vue
index 8192440..e25fb87 100644
--- a/src/frontend/src/components/cards/product_card.vue
+++ b/src/frontend/src/components/cards/product_card.vue
@@ -34,6 +34,7 @@ function goDetail() {
   height: 100%;
   display: flex;
   flex-direction: column;
+  border: 1px solid #e5e6eb; /* 新增边框 */
 }
 .card:hover {
   box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
diff --git a/src/frontend/src/components/cards/shop_card.vue b/src/frontend/src/components/cards/shop_card.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/frontend/src/components/cards/user_info.vue b/src/frontend/src/components/cards/user_info.vue
index 787d18f..8f78d54 100644
--- a/src/frontend/src/components/cards/user_info.vue
+++ b/src/frontend/src/components/cards/user_info.vue
@@ -23,13 +23,13 @@
     </div>
   </template>
   
-<script setup lang="ts">
+  <script setup lang="ts">
   import { ElButton, ElIcon, ElDivider, ElMenu, ElMenuItem } from 'element-plus'
   import { Setting, ArrowRight } from '@element-plus/icons-vue'
   import { ref, onMounted } from 'vue'
   import { fetchOrders } from '@/api/order'
   import { fetchCart } from '@/api/cart'
-
+  
   import { useRouter } from 'vue-router'
   const router = useRouter()
   function onSelect(key: string) {
@@ -44,21 +44,21 @@
     active?: string
   }>()
   
-  // 创建响应式状态存储实际的订单和购物车数量
   const realOrderCount = ref(props.orderCount)
   const realCartCount = ref(0)
   
-  // 获取订单数量
+  // 获取订单数量（根据返回的订单列表长度）
   const fetchOrderCount = async () => {
     try {
-      const response = await fetchOrders(0, 1) // 只需要总数，限制为1条数据
-      realOrderCount.value = response.data.TotalCount
+      const response = await fetchOrders(0, 10000) // 获取足够多的订单
+      if (response.data && Array.isArray(response.data.Orders)) {
+        realOrderCount.value = response.data.Orders.length
+      }
     } catch (error) {
       console.error('获取订单数量失败:', error)
     }
   }
   
-  // 获取购物车数量
   const fetchCartCount = async () => {
     try {
       const response = await fetchCart()
@@ -68,13 +68,13 @@
     }
   }
   
-  // 组件挂载时获取最新数据
   onMounted(() => {
     fetchOrderCount()
     fetchCartCount()
   })
   </script>
   
+  
   <style scoped>
   .user-info-card {
     background: #fff;
diff --git a/src/frontend/src/components/layout/NaviBar.vue b/src/frontend/src/components/layout/NaviBar.vue
index 2504ca8..a965b27 100644
--- a/src/frontend/src/components/layout/NaviBar.vue
+++ b/src/frontend/src/components/layout/NaviBar.vue
@@ -36,8 +36,8 @@ const handleUserClick = () => {
 
         <div class="menu-main">
           <!-- 主导航 -->
-          <el-menu-item index="/catalog">CATALOG</el-menu-item>
-          <el-menu-item index="/brands">BRANDS</el-menu-item>
+          <el-menu-item index="/explore">EXPLORE</el-menu-item>
+          <el-menu-item index="/shops">SHOPS</el-menu-item>
           <el-sub-menu index="pages">
             <template #title>PAGES</template>
             <el-menu-item index="/order">Order</el-menu-item>
diff --git a/src/frontend/src/components/product/PriceBox.vue b/src/frontend/src/components/product/PriceBox.vue
index d1b2bca..eb49edb 100644
--- a/src/frontend/src/components/product/PriceBox.vue
+++ b/src/frontend/src/components/product/PriceBox.vue
@@ -7,7 +7,7 @@
       </div>
       <div class="actions">
         <el-input-number v-model="quantity" :min="1" />
-        <el-button type="primary" @click="$emit('add-to-cart', quantity)">
+        <el-button type="primary" @click="addToCart">
           ADD TO CART
         </el-button>
         <el-button :icon="Star" circle />
@@ -17,7 +17,9 @@
   </template>
   
   <script setup lang="ts">
-  import { ref, watch } from 'vue'
+  import { ref } from 'vue'
+  import axios from 'axios'
+  import { ElMessage } from 'element-plus'
   import {
   Delete,
   Star,
@@ -25,6 +27,7 @@
   const props = defineProps<{
     oldPrice: string
     newPrice: string
+    productId: number
   }>()
   const emit = defineEmits<{
     (e: 'add-to-cart', qty: number): void
@@ -33,6 +36,29 @@
   const quantity = ref(1)
   const increment = () => quantity.value++
   const decrement = () => quantity.value>1 && quantity.value--
+  
+  async function addToCart() {
+    const token = localStorage.getItem('token')
+    try {
+      await axios.post(
+        '/cart/items',
+        {
+          ProductID: props.productId,
+          Quantity: quantity.value,
+        },
+        {
+          headers: {
+            Authorization: token ? `Bearer ${token}` : '',
+          },
+        }
+      )
+      emit('add-to-cart', quantity.value)
+      ElMessage.success(`成功添加到购物车（数量：${quantity.value}）`)
+    } catch (e) {
+      ElMessage.error('添加到购物车失败')
+      console.error('添加到购物车失败', e)
+    }
+  }
   </script>
   
   <style scoped>
@@ -42,4 +68,3 @@
   .new-price { font-size: 24px; font-weight: bold; }
   .actions { margin-top: 16px; display: flex; align-items: center; gap: 8px; }
   </style>
-  
\ No newline at end of file
diff --git a/src/frontend/src/router/index.js b/src/frontend/src/router/index.js
index 8650976..2292692 100644
--- a/src/frontend/src/router/index.js
+++ b/src/frontend/src/router/index.js
@@ -39,7 +39,12 @@ const router = createRouter({
       path: '/explore',
       name: 'Explore',
       component: () => import('../views/Explore.vue')
-    }
+    },
+    {
+      path: '/payment/:id',
+      name: 'Payment',
+      component: () => import('../views/Payment.vue')
+    },
   ],
 })
 
diff --git a/src/frontend/src/views/Login.vue b/src/frontend/src/views/Login.vue
index b84c133..2624ad8 100644
--- a/src/frontend/src/views/Login.vue
+++ b/src/frontend/src/views/Login.vue
@@ -97,8 +97,6 @@ import { ElMessage } from 'element-plus'
 import axios from 'axios'
 import { useRouter } from 'vue-router'
 
-// 全局 baseURL（放最上面，只执行一次）
-axios.defaults.baseURL = 'http://127.0.0.1:8000/api/v1'
 
 const router = useRouter()
 const activeTab = ref('login')
diff --git a/src/frontend/src/views/Payment.vue b/src/frontend/src/views/Payment.vue
new file mode 100644
index 0000000..7bae963
--- /dev/null
+++ b/src/frontend/src/views/Payment.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="payment-page">
+    <el-card class="payment-card">
+      <template #header>
+        <div class="payment-header">
+          <h2>支付确认</h2>
+        </div>
+      </template>
+      
+      <div v-if="loading" class="loading-container">
+        <el-skeleton :rows="3" animated />
+      </div>
+      
+      <div v-else-if="paymentInfo" class="payment-info">
+        <p class="payment-id">订单号: #{{ paymentInfo.PaymentTransactionID }}</p>
+        <p class="payment-amount">订单总额: <span class="amount">¥{{ paymentInfo.TotalAmount }}</span></p>
+        <p class="payment-status">
+          状态: 
+          <el-tag 
+            :type="paymentInfo.Status === 'PENDING' ? 'warning' : 
+                  paymentInfo.Status === 'COMPLETED' ? 'success' : 'info'"
+          >
+            {{ paymentStatusText }}
+          </el-tag>
+        </p>
+        <p class="payment-desc">请点击下方按钮完成支付</p>
+      </div>
+      
+      <div class="payment-actions">
+        <el-button 
+          type="primary" 
+          size="large" 
+          :loading="paymentLoading" 
+          :disabled="!canPay"
+          @click="handlePayment"
+        >
+          立即支付
+        </el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { simulatePay, paymentStatus } from '@/api/payment'
+
+const route = useRoute()
+const router = useRouter()
+const loading = ref(true)
+const paymentLoading = ref(false)
+const paymentInfo = ref<{
+  PaymentTransactionID: number;
+  UserID: number;
+  TotalAmount: string;
+  PaymentMethod: string;
+  ExternalGatewayTxID: string | null;
+  Status: 'PENDING' | 'COMPLETED' | 'FAILED' | string;
+  CreationTime: string;
+  CompletionTime: string | null;
+  LastUpdatedTime: string;
+} | null>(null)
+
+// 从路由参数获取支付交易ID
+const paymentTransactionId = computed(() => Number(route.params.id))
+
+// 计算当前支付状态的文本表示
+const paymentStatusText = computed(() => {
+  if (!paymentInfo.value) return '';
+  
+  switch (paymentInfo.value.Status) {
+    case 'PENDING': return '待支付';
+    case 'COMPLETED': return '已完成';
+    case 'FAILED': return '失败';
+    default: return paymentInfo.value.Status;
+  }
+})
+
+// 判断是否可以支付
+const canPay = computed(() => 
+  paymentInfo.value && paymentInfo.value.Status === 'PENDING'
+)
+
+// 获取支付信息
+const fetchPaymentInfo = async () => {
+  loading.value = true
+  
+  try {
+    const { data } = await paymentStatus(paymentTransactionId.value)
+    paymentInfo.value = data
+    
+    // 如果支付已完成，3秒后跳转到订单页面
+    if (data.Status === 'COMPLETED') {
+      setTimeout(() => {
+        router.push('/user/order')
+      }, 3000)
+      ElMessage.success('支付已完成，即将跳转到订单页面...')
+    }
+  } catch (error: any) {
+    console.error('Failed to fetch payment details:', error)
+    if (error.response?.data?.detail) {
+      ElMessage.error(`获取支付信息失败: ${error.response.data.detail}`)
+    } else {
+      ElMessage.error('获取支付信息失败，请返回重试')
+    }
+    setTimeout(() => router.push('/user/cart'), 2000)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(async () => {
+  if (!paymentTransactionId.value) {
+    ElMessage.error('无效的支付交易ID')
+    setTimeout(() => router.push('/user/cart'), 1000)
+    return
+  }
+  
+  await fetchPaymentInfo()
+})
+
+const handlePayment = async () => {
+  if (!paymentInfo.value || paymentInfo.value.Status !== 'PENDING') {
+    ElMessage.warning('当前状态无法支付')
+    return
+  }
+  
+  paymentLoading.value = true
+  
+  try {
+    // 调用支付API
+    await simulatePay(paymentTransactionId.value)
+    
+    ElMessage.success('支付成功')
+    
+    // 重新获取支付状态
+    await fetchPaymentInfo()
+    
+    // 支付成功后重定向到订单页面
+    router.push('/user/order')
+  } catch (error: any) {
+    if (error.response?.data?.detail) {
+      ElMessage.error(error.response.data.detail)
+    } else {
+      ElMessage.error('支付失败，请重试')
+    }
+    console.error('Payment error:', error)
+  } finally {
+    paymentLoading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.payment-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 80vh;
+  padding: 20px;
+}
+
+.payment-card {
+  width: 100%;
+  max-width: 500px;
+}
+
+.payment-header {
+  display: flex;
+  justify-content: center;
+}
+
+.loading-container {
+  padding: 20px 0;
+}
+
+.payment-info {
+  margin: 20px 0 30px;
+  text-align: center;
+}
+
+.payment-id {
+  color: #606266;
+  margin-bottom: 10px;
+}
+
+.payment-amount {
+  font-size: 18px;
+  margin-bottom: 15px;
+}
+
+.payment-status {
+  margin-bottom: 20px;
+}
+
+.amount {
+  color: #f56c6c;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.payment-desc {
+  color: #606266;
+  margin-top: 20px;
+}
+
+.payment-actions {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/frontend/src/views/ProductDetail.vue b/src/frontend/src/views/ProductDetail.vue
index 4365588..fa09a13 100644
--- a/src/frontend/src/views/ProductDetail.vue
+++ b/src/frontend/src/views/ProductDetail.vue
@@ -10,7 +10,7 @@ const productId = route.params.product_id
 const product = ref<any>(null)
 const loading = ref(true)
 const error = ref('')
-axios.defaults.baseURL = 'http://127.0.1:8000/api/v1'
+
 
 onMounted(async () => {
   try {
@@ -77,6 +77,7 @@ const handleAddToCart = (qty: number) => {
             <PriceBox
               :old-price="''"
               :new-price="product.Price"
+              :product-id="product.ProductID"
               @add-to-cart="handleAddToCart"
             />
           </div>

From ed0dcc9079ca638072bdae7b93a31553c969f762 Mon Sep 17 00:00:00 2001
From: Renyye <1457077123@qq.com>
Date: Wed, 21 May 2025 12:33:43 +0800
Subject: [PATCH 06/16] =?UTF-8?q?feat(frontend):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=95=86=E5=BA=97=E5=88=97=E8=A1=A8=E3=80=81=E5=95=86=E5=BA=97?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E5=92=8C=E5=95=86=E5=BA=97=E5=88=86=E7=B1=BB?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=9B=B4=E6=96=B0=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E5=92=8C=E5=95=86=E5=BA=97=E5=8D=A1=E7=89=87=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/api/store.ts                 |  25 ++
 .../src/components/cards/store_card.vue       | 130 +++++++++
 .../src/components/layout/NaviBar.vue         |   2 +-
 src/frontend/src/router/index.js              |   6 +
 src/frontend/src/views/Stores.vue             | 250 ++++++++++++++++++
 5 files changed, 412 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/src/api/store.ts
 create mode 100644 src/frontend/src/components/cards/store_card.vue
 create mode 100644 src/frontend/src/views/Stores.vue

diff --git a/src/frontend/src/api/store.ts b/src/frontend/src/api/store.ts
new file mode 100644
index 0000000..54e2211
--- /dev/null
+++ b/src/frontend/src/api/store.ts
@@ -0,0 +1,25 @@
+import axios from 'axios'
+
+interface StoreParams {
+  page?: number
+  pageSize?: number
+  category?: string
+  search?: string
+  sortBy?: string
+}
+
+/** 获取商店列表 */
+export const fetchStores = (params: StoreParams = {}) => {
+  // 此处仅示意，实际API接口待实现
+  return axios.get('/api/stores', { params })
+}
+
+/** 获取商店详情 */
+export const fetchStoreDetail = (storeId: number) => {
+  return axios.get(`/api/stores/${storeId}`)
+}
+
+/** 获取商店分类 */
+export const fetchStoreCategories = () => {
+  return axios.get('/api/store-categories')
+}
diff --git a/src/frontend/src/components/cards/store_card.vue b/src/frontend/src/components/cards/store_card.vue
new file mode 100644
index 0000000..768b450
--- /dev/null
+++ b/src/frontend/src/components/cards/store_card.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="store-card" @click="navigateToStore">
+    <el-card :body-style="{ padding: '0px' }" shadow="hover" class="store-card-inner">
+      <img :src="store.logo || defaultImage" class="store-image" :alt="store.name">
+      <div class="store-info">
+        <h3 class="store-name">{{ store.name }}</h3>
+        <div class="store-ratings">
+          <el-rate 
+            v-model="store.rating" 
+            disabled 
+            text-color="#ff9900"
+            :score-template="store.rating + ''"
+            :show-score="true"
+          />
+        </div>
+        <p class="store-description">{{ truncatedDescription }}</p>
+        <div class="store-footer">
+          <span class="store-product-count">{{ store.productCount }}+ 商品</span>
+          <el-button type="primary" size="small" class="visit-button">查看店铺</el-button>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const props = defineProps({
+  store: {
+    type: Object,
+    required: true,
+    default: () => ({
+      id: 0,
+      name: '',
+      description: '',
+      logo: '',
+      rating: 0,
+      productCount: 0
+    })
+  }
+});
+
+// 默认图片
+const defaultImage = computed(() => {
+  return 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png';
+});
+
+// 截断描述文字，防止太长
+const truncatedDescription = computed(() => {
+  if (!props.store.description) return '';
+  return props.store.description.length > 50 
+    ? props.store.description.slice(0, 50) + '...'
+    : props.store.description;
+});
+
+// 点击卡片跳转到商店页面
+const navigateToStore = () => {
+  router.push(`/explore?store_id=${props.store.id}`);
+};
+</script>
+
+<style scoped>
+.store-card {
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+
+.store-card:hover {
+  transform: translateY(-5px);
+}
+
+.store-card-inner {
+  border-radius: 8px;
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.store-image {
+  width: 100%;
+  height: 150px;
+  object-fit: cover;
+}
+
+.store-info {
+  padding: 16px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.store-name {
+  margin: 0 0 8px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.store-ratings {
+  margin-bottom: 10px;
+}
+
+.store-description {
+  color: #606266;
+  margin-bottom: 16px;
+  font-size: 14px;
+  flex-grow: 1;
+}
+
+.store-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: auto;
+}
+
+.store-product-count {
+  font-size: 14px;
+  color: #909399;
+}
+
+.visit-button:hover {
+  opacity: 0.9;
+}
+</style>
diff --git a/src/frontend/src/components/layout/NaviBar.vue b/src/frontend/src/components/layout/NaviBar.vue
index a965b27..65e4e47 100644
--- a/src/frontend/src/components/layout/NaviBar.vue
+++ b/src/frontend/src/components/layout/NaviBar.vue
@@ -37,7 +37,7 @@ const handleUserClick = () => {
         <div class="menu-main">
           <!-- 主导航 -->
           <el-menu-item index="/explore">EXPLORE</el-menu-item>
-          <el-menu-item index="/shops">SHOPS</el-menu-item>
+          <el-menu-item index="/stores">STORES</el-menu-item>
           <el-sub-menu index="pages">
             <template #title>PAGES</template>
             <el-menu-item index="/order">Order</el-menu-item>
diff --git a/src/frontend/src/router/index.js b/src/frontend/src/router/index.js
index 2292692..01645a9 100644
--- a/src/frontend/src/router/index.js
+++ b/src/frontend/src/router/index.js
@@ -45,6 +45,12 @@ const router = createRouter({
       name: 'Payment',
       component: () => import('../views/Payment.vue')
     },
+    // 新增商店列表路由
+    {
+      path: '/stores',
+      name: 'Stores',
+      component: () => import('../views/Stores.vue')
+    },
   ],
 })
 
diff --git a/src/frontend/src/views/Stores.vue b/src/frontend/src/views/Stores.vue
new file mode 100644
index 0000000..77cfa97
--- /dev/null
+++ b/src/frontend/src/views/Stores.vue
@@ -0,0 +1,250 @@
+<template>
+  <div class="stores-container">
+    <div class="stores-header">
+      <h1 class="page-title">商城专区</h1>
+      <div class="filter-controls">
+        <el-input
+          v-model="searchQuery"
+          placeholder="搜索店铺"
+          prefix-icon="el-icon-search"
+          clearable
+          @clear="handleSearch"
+          @input="handleSearch"
+        />
+        <el-select v-model="selectedCategory" placeholder="全部分类" @change="handleSearch">
+          <el-option label="全部分类" value="" />
+          <el-option v-for="category in categories" :key="category" :label="category" :value="category" />
+        </el-select>
+        <el-select v-model="sortBy" placeholder="推荐排序" @change="handleSearch">
+          <el-option label="推荐排序" value="recommended" />
+          <el-option label="评分最高" value="rating" />
+          <el-option label="商品最多" value="productCount" />
+        </el-select>
+      </div>
+    </div>
+    
+    <div v-if="loading" class="loading-container">
+      <el-skeleton :rows="3" :loading="loading" animated>
+        <template #template>
+          <div style="padding: 20px">
+            <div style="display: flex; align-items: center; margin-bottom: 40px">
+              <el-skeleton-item variant="image" style="width: 240px; height: 240px" />
+              <div style="margin-left: 20px">
+                <el-skeleton-item variant="h1" style="width: 50%" />
+                <el-skeleton-item variant="text" style="margin-top: 16px; width: 30%" />
+                <el-skeleton-item variant="text" style="width: 80%" />
+              </div>
+            </div>
+            <el-skeleton :rows="3" />
+          </div>
+        </template>
+      </el-skeleton>
+    </div>
+    
+    <el-empty v-else-if="filteredStores.length === 0" description="没有找到相关店铺" />
+    
+    <div v-else class="stores-grid">
+      <store-card
+        v-for="store in filteredStores"
+        :key="store.id"
+        :store="store"
+      />
+    </div>
+    
+    <el-pagination
+      v-if="filteredStores.length > 0"
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :page-sizes="[12, 24, 36, 48]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="totalStores"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      background
+      class="pagination"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import StoreCard from '@/components/cards/store_card.vue'
+import { fetchStores } from '@/api/store'
+
+// 状态变量
+const loading = ref(true)
+const stores = ref([])
+const categories = ref([])
+const searchQuery = ref('')
+const selectedCategory = ref('')
+const currentPage = ref(1)
+const pageSize = ref(12)
+const totalStores = ref(0)
+const sortBy = ref('recommended')
+
+// 筛选商店
+const filteredStores = computed(() => {
+  return stores.value.slice(
+    (currentPage.value - 1) * pageSize.value,
+    currentPage.value * pageSize.value
+  )
+})
+
+// 加载商店列表数据
+const loadStores = async () => {
+  loading.value = true
+  try {
+    const response = await fetchStores({
+      page: currentPage.value,
+      pageSize: pageSize.value,
+      category: selectedCategory.value,
+      search: searchQuery.value,
+      sortBy: sortBy.value
+    })
+    
+    stores.value = response.data.stores
+    totalStores.value = response.data.total
+    
+    // 提取所有分类
+    if (response.data.categories) {
+      categories.value = response.data.categories
+    }
+  } catch (error) {
+    console.error('Failed to fetch stores:', error)
+    // 测试数据
+    stores.value = [
+      {
+        id: 1,
+        name: '小米官方旗舰店',
+        description: '小米官方授权，正品保障，售后无忧',
+        logo: 'https://p1.meituan.net/dpdeal/8f49b38dad8f2489d7f10eae6dac12bc16554.jpg',
+        rating: 4.8,
+        productCount: 238
+      },
+      {
+        id: 2,
+        name: '华为商城',
+        description: '华为官方旗舰店，全场正品，售后保障',
+        logo: 'https://img01.yzcdn.cn/upload_files/2015/10/30/Fh12GeZ2kDWs7QvzD60A3Qe3ecRx.jpg',
+        rating: 4.9,
+        productCount: 312
+      },
+      {
+        id: 3,
+        name: 'Apple Store',
+        description: 'Apple 产品官方授权销售',
+        logo: 'https://support.apple.com/library/content/dam/edam/applecare/images/en_US/psp/featured-section-apple-retail-icon_2x.png',
+        rating: 5.0,
+        productCount: 156
+      },
+      {
+        id: 4,
+        name: '联想官方旗舰店',
+        description: '联想电脑、平板等产品官方销售',
+        logo: 'https://p0.meituan.net/dpdeal/24a21a1b53b7d7ebbd1e5d3d45c30d15131254.jpg',
+        rating: 4.5,
+        productCount: 217
+      },
+      {
+        id: 5,
+        name: '三星电子旗舰店',
+        description: '三星品牌官方授权，正品保障',
+        logo: 'https://s.yezgea02.com/1602756121725/logo.png',
+        rating: 4.6,
+        productCount: 189
+      },
+      {
+        id: 6,
+        name: 'OPPO官方旗舰店',
+        description: 'OPPO手机官方授权销售',
+        logo: 'https://p0.meituan.net/dpdeal/e9060535568fc9463f7e095cd9bd29c4112615.jpg',
+        rating: 4.7,
+        productCount: 203
+      }
+    ]
+    totalStores.value = stores.value.length
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索处理
+const handleSearch = () => {
+  currentPage.value = 1
+  loadStores()
+}
+
+// 分页处理
+const handleSizeChange = (val: number) => {
+  pageSize.value = val
+  loadStores()
+}
+
+const handleCurrentChange = (val: number) => {
+  currentPage.value = val
+  loadStores()
+}
+
+// 初始加载
+onMounted(() => {
+  loadStores()
+})
+</script>
+
+<style scoped>
+.stores-container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 30px 20px;
+}
+
+.stores-header {
+  margin-bottom: 30px;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: #303133;
+}
+
+.filter-controls {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.filter-controls .el-input {
+  max-width: 300px;
+}
+
+.stores-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 24px;
+  margin-bottom: 40px;
+}
+
+.loading-container {
+  margin: 40px 0;
+}
+
+.pagination {
+  margin-top: 30px;
+  display: flex;
+  justify-content: center;
+}
+
+@media (max-width: 768px) {
+  .filter-controls {
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .stores-grid {
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 16px;
+  }
+}
+</style>

From 8f0efc846d9ab11b0de8b5065523628adaff2bcd Mon Sep 17 00:00:00 2001
From: Renyye <1457077123@qq.com>
Date: Wed, 21 May 2025 23:34:21 +0800
Subject: [PATCH 07/16] feat(frontend): store manage basic page

---
 src/frontend/src/api/store.ts                 |  43 +++-
 .../src/components/cards/store_card.vue       |  24 +-
 .../components/dashboard/StoreManagement.vue  | 212 ++++++++++++++++++
 src/frontend/src/views/Analysis/Dashboard.vue |  10 +-
 src/frontend/src/views/Stores.vue             | 169 +-------------
 5 files changed, 283 insertions(+), 175 deletions(-)
 create mode 100644 src/frontend/src/components/dashboard/StoreManagement.vue

diff --git a/src/frontend/src/api/store.ts b/src/frontend/src/api/store.ts
index 54e2211..08a3013 100644
--- a/src/frontend/src/api/store.ts
+++ b/src/frontend/src/api/store.ts
@@ -1,25 +1,52 @@
 import axios from 'axios'
 
-interface StoreParams {
+export interface StoreParams {
   page?: number
   pageSize?: number
-  category?: string
   search?: string
   sortBy?: string
+  current_user_id?: number
+}
+
+export interface StoreDetail {
+  StoreID: number
+  StoreName: string
+  OwnerUserID: number
+  Description: string
+  LogoURL: string
+  StoreStatus: 'ACTIVE' | 'INACTIVE' | 'CLOSED'
+  CreationDate: string
+  LastUpdatedDate: string
+}
+
+export interface CreateStoreData {
+  StoreName: string
+  Description?: string
+  LogoURL?: string
+  StoreStatus?: 'ACTIVE' | 'INACTIVE' | 'CLOSED'
 }
 
 /** 获取商店列表 */
 export const fetchStores = (params: StoreParams = {}) => {
-  // 此处仅示意，实际API接口待实现
-  return axios.get('/api/stores', { params })
+  return axios.get('/api/v1/store/owner/me', { params })
 }
 
 /** 获取商店详情 */
 export const fetchStoreDetail = (storeId: number) => {
-  return axios.get(`/api/stores/${storeId}`)
+  return axios.get<StoreDetail>(`/api/v1/store/info/${storeId}`)
+}
+
+/** 创建商店 */
+export const createStore = (data: CreateStoreData) => {
+  return axios.post('/api/v1/store', data)
+}
+
+/** 更新商店 */
+export const updateStore = (storeId: number, data: Partial<CreateStoreData>) => {
+  return axios.put(`/api/v1/store/${storeId}`, data)
 }
 
-/** 获取商店分类 */
-export const fetchStoreCategories = () => {
-  return axios.get('/api/store-categories')
+/** 获取当前用户的所有商店 */
+export const fetchMyStores = () => {
+  return axios.get('/api/v1/store/owner/me')
 }
diff --git a/src/frontend/src/components/cards/store_card.vue b/src/frontend/src/components/cards/store_card.vue
index 768b450..99010d8 100644
--- a/src/frontend/src/components/cards/store_card.vue
+++ b/src/frontend/src/components/cards/store_card.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="store-card" @click="navigateToStore">
     <el-card :body-style="{ padding: '0px' }" shadow="hover" class="store-card-inner">
-      <img :src="store.logo || defaultImage" class="store-image" :alt="store.name">
+      <img :src="storeLogo" class="store-image" :alt="storeName">
       <div class="store-info">
-        <h3 class="store-name">{{ store.name }}</h3>
+        <h3 class="store-name">{{ storeName }}</h3>
         <div class="store-ratings">
           <el-rate 
             v-model="store.rating" 
@@ -49,17 +49,27 @@ const defaultImage = computed(() => {
   return 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png';
 });
 
+// 兼容新的API返回的数据结构
+const storeLogo = computed(() => {
+  return props.store.LogoURL || props.store.logo || defaultImage.value;
+});
+
+const storeName = computed(() => {
+  return props.store.StoreName || props.store.name || '';
+});
+
 // 截断描述文字，防止太长
 const truncatedDescription = computed(() => {
-  if (!props.store.description) return '';
-  return props.store.description.length > 50 
-    ? props.store.description.slice(0, 50) + '...'
-    : props.store.description;
+  const description = props.store.Description || props.store.description || '';
+  return description.length > 50 
+    ? description.slice(0, 50) + '...'
+    : description;
 });
 
 // 点击卡片跳转到商店页面
 const navigateToStore = () => {
-  router.push(`/explore?store_id=${props.store.id}`);
+  const storeId = props.store.StoreID || props.store.id;
+  router.push(`/explore?store_id=${storeId}`);
 };
 </script>
 
diff --git a/src/frontend/src/components/dashboard/StoreManagement.vue b/src/frontend/src/components/dashboard/StoreManagement.vue
new file mode 100644
index 0000000..585fbe9
--- /dev/null
+++ b/src/frontend/src/components/dashboard/StoreManagement.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="store-management">
+    <div class="header">
+      <h2>店铺管理</h2>
+      <el-button type="primary" @click="showAddDialog = true">
+        新增店铺
+      </el-button>
+    </div>
+
+    <!-- 店铺列表 -->
+    <el-table :data="stores" style="width: 100%" v-loading="loading">
+      <el-table-column prop="StoreID" label="店铺ID" width="100" />
+      <el-table-column prop="StoreName" label="店铺名称" />
+      <el-table-column prop="Description" label="描述" />
+      <el-table-column prop="StoreStatus" label="状态" width="100">
+        <template #default="scope">
+          <el-tag :type="getStatusType(scope.row.StoreStatus)">
+            {{ scope.row.StoreStatus }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="250">
+        <template #default="scope">
+          <el-button size="small" @click="editStore(scope.row)">编辑</el-button>
+          <el-button 
+            size="small" 
+            type="primary" 
+            @click="manageProducts(scope.row.StoreID)"
+          >
+            管理商品
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination">
+      <el-pagination
+        v-model:current-page="pagination.currentPage"
+        v-model:page-size="pagination.pageSize"
+        :total="pagination.total"
+        layout="total, prev, pager, next"
+        @current-change="fetchStores"
+      />
+    </div>
+
+    <!-- 新增/编辑店铺对话框 -->
+    <el-dialog 
+      v-model="showAddDialog" 
+      :title="editingStore ? '编辑店铺' : '新增店铺'"
+      width="50%"
+    >
+      <el-form :model="storeForm" label-width="100px">
+        <el-form-item label="店铺名称" required>
+          <el-input v-model="storeForm.StoreName" placeholder="请输入店铺名称" />
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input 
+            v-model="storeForm.Description" 
+            type="textarea" 
+            :rows="3" 
+            placeholder="请输入店铺描述"
+          />
+        </el-form-item>
+        <el-form-item label="Logo URL">
+          <el-input v-model="storeForm.LogoURL" placeholder="请输入Logo URL" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="storeForm.StoreStatus" placeholder="请选择状态">
+            <el-option label="营业中" value="ACTIVE" />
+            <el-option label="休息中" value="INACTIVE" />
+            <el-option label="已关闭" value="CLOSED" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="showAddDialog = false">取消</el-button>
+          <el-button type="primary" @click="saveStore">
+            保存
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { fetchStores as fetchStoresApi, createStore, updateStore } from '@/api/store'
+
+interface Store {
+  StoreID?: number
+  StoreName: string
+  Description: string
+  LogoURL: string
+  StoreStatus: string
+  OwnerUserID?: number
+}
+
+// 店铺列表
+const stores = ref<Store[]>([])
+const loading = ref(false)
+
+// 分页
+const pagination = ref({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+
+// 新增/编辑对话框
+const showAddDialog = ref(false)
+const editingStore = ref<Store | null>(null)
+const storeForm = ref<Store>({
+  StoreName: '',
+  Description: '',
+  LogoURL: '',
+  StoreStatus: 'ACTIVE'
+})
+
+// 获取店铺列表
+const fetchStores = async () => {
+  try {
+    loading.value = true
+    const response = await fetchStoresApi({
+      page: pagination.value.currentPage,
+      pageSize: pagination.value.pageSize
+    })
+    stores.value = response.data.data
+    pagination.value.total = response.data.total || 0
+  } catch (error) {
+    console.error('获取店铺列表失败:', error)
+    ElMessage.error('获取店铺列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 保存店铺
+const saveStore = async () => {
+  try {
+    if (editingStore.value) {
+      // 更新店铺
+      await updateStore(editingStore.value.StoreID!, storeForm.value)
+      ElMessage.success('更新店铺成功')
+    } else {
+      // 新增店铺
+      await createStore(storeForm.value)
+      ElMessage.success('新增店铺成功')
+    }
+    showAddDialog.value = false
+    fetchStores()
+  } catch (error) {
+    console.error('保存店铺失败:', error)
+    ElMessage.error('保存店铺失败')
+  }
+}
+
+// 编辑店铺
+const editStore = (store: Store) => {
+  editingStore.value = store
+  storeForm.value = { ...store }
+  showAddDialog.value = true
+}
+
+// 管理商品
+const manageProducts = (storeId: number) => {
+  // 这里可以跳转到商品管理页面，或者打开商品管理对话框
+  ElMessage.info(`管理店铺 ${storeId} 的商品`)
+  // 实际项目中可以这样跳转：
+  // router.push(`/dashboard/products?store_id=${storeId}`)
+}
+
+// 获取状态标签类型
+const getStatusType = (status: string) => {
+  const types: Record<string, string> = {
+    ACTIVE: 'success',
+    INACTIVE: 'warning',
+    CLOSED: 'danger'
+  }
+  return types[status] || ''
+}
+
+// 初始化加载数据
+onMounted(() => {
+  fetchStores()
+})
+</script>
+
+<style scoped>
+.store-management {
+  padding: 20px;
+  background: #fff;
+  border-radius: 4px;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/frontend/src/views/Analysis/Dashboard.vue b/src/frontend/src/views/Analysis/Dashboard.vue
index 14b37e5..5b896b5 100644
--- a/src/frontend/src/views/Analysis/Dashboard.vue
+++ b/src/frontend/src/views/Analysis/Dashboard.vue
@@ -11,11 +11,13 @@ import {
   Menu as IconMenu,
   Collection,
   Warning,
-  Key
+  Key,
+  Shop
 } from '@element-plus/icons-vue'
 
 import General from '@/components/dashboard/General.vue'
 import OrderManage from '@/components/dashboard/OrderManage.vue'
+import StoreManagement from '@/components/dashboard/StoreManagement.vue'
 
 /** 菜单配置（icon 直接放组件） */
 const menus = [
@@ -31,6 +33,12 @@ const menus = [
     icon: DataAnalysis,
     component: OrderManage
   },
+  {
+    index: 'store',
+    label: '店铺管理',
+    icon: Shop,
+    component: StoreManagement
+  }
 ]
 
 const activeMenu = ref(menus[0].index)
diff --git a/src/frontend/src/views/Stores.vue b/src/frontend/src/views/Stores.vue
index 77cfa97..db0b32f 100644
--- a/src/frontend/src/views/Stores.vue
+++ b/src/frontend/src/views/Stores.vue
@@ -1,26 +1,7 @@
 <template>
   <div class="stores-container">
     <div class="stores-header">
-      <h1 class="page-title">商城专区</h1>
-      <div class="filter-controls">
-        <el-input
-          v-model="searchQuery"
-          placeholder="搜索店铺"
-          prefix-icon="el-icon-search"
-          clearable
-          @clear="handleSearch"
-          @input="handleSearch"
-        />
-        <el-select v-model="selectedCategory" placeholder="全部分类" @change="handleSearch">
-          <el-option label="全部分类" value="" />
-          <el-option v-for="category in categories" :key="category" :label="category" :value="category" />
-        </el-select>
-        <el-select v-model="sortBy" placeholder="推荐排序" @change="handleSearch">
-          <el-option label="推荐排序" value="recommended" />
-          <el-option label="评分最高" value="rating" />
-          <el-option label="商品最多" value="productCount" />
-        </el-select>
-      </div>
+      <h1 class="page-title">Stores</h1>
     </div>
     
     <div v-if="loading" class="loading-container">
@@ -41,150 +22,41 @@
       </el-skeleton>
     </div>
     
-    <el-empty v-else-if="filteredStores.length === 0" description="没有找到相关店铺" />
+    <el-empty v-else-if="stores.length === 0" description="没有找到相关店铺" />
     
     <div v-else class="stores-grid">
       <store-card
-        v-for="store in filteredStores"
-        :key="store.id"
+        v-for="store in stores"
+        :key="store.StoreID || store.id"
         :store="store"
       />
     </div>
-    
-    <el-pagination
-      v-if="filteredStores.length > 0"
-      v-model:current-page="currentPage"
-      v-model:page-size="pageSize"
-      :page-sizes="[12, 24, 36, 48]"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="totalStores"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-      background
-      class="pagination"
-    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import StoreCard from '@/components/cards/store_card.vue'
-import { fetchStores } from '@/api/store'
+import { fetchStores, StoreDetail } from '@/api/store'
 
 // 状态变量
 const loading = ref(true)
-const stores = ref([])
-const categories = ref([])
-const searchQuery = ref('')
-const selectedCategory = ref('')
-const currentPage = ref(1)
-const pageSize = ref(12)
-const totalStores = ref(0)
-const sortBy = ref('recommended')
-
-// 筛选商店
-const filteredStores = computed(() => {
-  return stores.value.slice(
-    (currentPage.value - 1) * pageSize.value,
-    currentPage.value * pageSize.value
-  )
-})
+const stores = ref<(StoreDetail | any)[]>([])
 
 // 加载商店列表数据
 const loadStores = async () => {
   loading.value = true
   try {
-    const response = await fetchStores({
-      page: currentPage.value,
-      pageSize: pageSize.value,
-      category: selectedCategory.value,
-      search: searchQuery.value,
-      sortBy: sortBy.value
-    })
-    
-    stores.value = response.data.stores
-    totalStores.value = response.data.total
-    
-    // 提取所有分类
-    if (response.data.categories) {
-      categories.value = response.data.categories
-    }
+    const response = await fetchStores()
+    stores.value = response.data.stores || response.data
   } catch (error) {
     console.error('Failed to fetch stores:', error)
-    // 测试数据
-    stores.value = [
-      {
-        id: 1,
-        name: '小米官方旗舰店',
-        description: '小米官方授权，正品保障，售后无忧',
-        logo: 'https://p1.meituan.net/dpdeal/8f49b38dad8f2489d7f10eae6dac12bc16554.jpg',
-        rating: 4.8,
-        productCount: 238
-      },
-      {
-        id: 2,
-        name: '华为商城',
-        description: '华为官方旗舰店，全场正品，售后保障',
-        logo: 'https://img01.yzcdn.cn/upload_files/2015/10/30/Fh12GeZ2kDWs7QvzD60A3Qe3ecRx.jpg',
-        rating: 4.9,
-        productCount: 312
-      },
-      {
-        id: 3,
-        name: 'Apple Store',
-        description: 'Apple 产品官方授权销售',
-        logo: 'https://support.apple.com/library/content/dam/edam/applecare/images/en_US/psp/featured-section-apple-retail-icon_2x.png',
-        rating: 5.0,
-        productCount: 156
-      },
-      {
-        id: 4,
-        name: '联想官方旗舰店',
-        description: '联想电脑、平板等产品官方销售',
-        logo: 'https://p0.meituan.net/dpdeal/24a21a1b53b7d7ebbd1e5d3d45c30d15131254.jpg',
-        rating: 4.5,
-        productCount: 217
-      },
-      {
-        id: 5,
-        name: '三星电子旗舰店',
-        description: '三星品牌官方授权，正品保障',
-        logo: 'https://s.yezgea02.com/1602756121725/logo.png',
-        rating: 4.6,
-        productCount: 189
-      },
-      {
-        id: 6,
-        name: 'OPPO官方旗舰店',
-        description: 'OPPO手机官方授权销售',
-        logo: 'https://p0.meituan.net/dpdeal/e9060535568fc9463f7e095cd9bd29c4112615.jpg',
-        rating: 4.7,
-        productCount: 203
-      }
-    ]
-    totalStores.value = stores.value.length
+    stores.value = []
   } finally {
     loading.value = false
   }
 }
 
-// 搜索处理
-const handleSearch = () => {
-  currentPage.value = 1
-  loadStores()
-}
-
-// 分页处理
-const handleSizeChange = (val: number) => {
-  pageSize.value = val
-  loadStores()
-}
-
-const handleCurrentChange = (val: number) => {
-  currentPage.value = val
-  loadStores()
-}
-
 // 初始加载
 onMounted(() => {
   loadStores()
@@ -209,16 +81,6 @@ onMounted(() => {
   color: #303133;
 }
 
-.filter-controls {
-  display: flex;
-  gap: 15px;
-  margin-bottom: 20px;
-}
-
-.filter-controls .el-input {
-  max-width: 300px;
-}
-
 .stores-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -230,18 +92,7 @@ onMounted(() => {
   margin: 40px 0;
 }
 
-.pagination {
-  margin-top: 30px;
-  display: flex;
-  justify-content: center;
-}
-
 @media (max-width: 768px) {
-  .filter-controls {
-    flex-direction: column;
-    gap: 10px;
-  }
-  
   .stores-grid {
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     gap: 16px;

From c05a62bc1a2ac21b91ca9767b09de672d6b0d0df Mon Sep 17 00:00:00 2001
From: Renyye <1457077123@qq.com>
Date: Thu, 22 May 2025 14:23:15 +0800
Subject: [PATCH 08/16] feat(frontend): add OrderCard component for order
 management

- Implemented OrderCard.vue to display order details, including order ID, date, status, and item list.
- Added functionality for updating order status with a dialog for status selection and notes.
- Integrated order detail view with a dialog showing comprehensive order information.

feat: enhance FilterSidebar with dynamic category and store selection

- Updated FilterSidebar.vue to include dynamic loading of categories and stores.
- Added search functionality and improved layout for filter options.
- Implemented apply and reset actions for filter settings.

refactor: change admin route to merchant in router

- Updated route path from '/admin' to '/merchant' for better clarity.

fix: update Stores.vue for improved store listing and loading logic

- Translated page title to Chinese and improved loading skeleton display.
- Refactored store loading logic to fetch product counts concurrently for each store.
- Enhanced layout for better responsiveness and visual consistency.
---
 src/frontend/src/api/order.ts                 |  33 +-
 src/frontend/src/api/product.ts               | 123 +++-
 src/frontend/src/api/store.ts                 |  66 +-
 .../src/components/cards/store_card.vue       | 201 ++++--
 .../src/components/dashboard/OrderManage.vue  | 192 ++++--
 .../components/dashboard/StoreManagement.vue  | 641 +++++++++++++++---
 .../components/dashboard/manage/OrderCard.vue | 240 +++++++
 .../src/components/explore/FilterSidebar.vue  | 176 ++---
 src/frontend/src/router/index.js              |   4 +-
 src/frontend/src/views/Stores.vue             | 101 +--
 10 files changed, 1388 insertions(+), 389 deletions(-)
 create mode 100644 src/frontend/src/components/dashboard/manage/OrderCard.vue

diff --git a/src/frontend/src/api/order.ts b/src/frontend/src/api/order.ts
index 7b1de2c..5f6cedb 100644
--- a/src/frontend/src/api/order.ts
+++ b/src/frontend/src/api/order.ts
@@ -13,13 +13,25 @@ export interface OrderItem {
   Subtotal: string
 }
 
+/** 订单状态枚举 */
+export type OrderStatusEnum = 
+  | 'PENDING_PAYMENT'
+  | 'PAID_AND_PENDING_PROCESSING'
+  | 'PROCESSING_BY_MERCHANT'
+  | 'SHIPPED'
+  | 'DELIVERED'
+  | 'COMPLETED'
+  | 'CANCELLED_BY_USER'
+  | 'CANCELLED_BY_MERCHANT'
+  | 'CANCELLED_BY_SYSTEM'
+
 /** 后端返回的订单对象 */
 export interface Order {
   OrderID: number
   UserID: number
   StoreID: number
   PaymentTransactionID: number
-  OrderStatus: string
+  OrderStatus: OrderStatusEnum
   OrderTotalAmount: string
   DiscountAmount: string
   ShippingFee: string
@@ -64,6 +76,21 @@ export const fetchOrders = (offset = 0, limit = 20) =>
 export const fetchOrderDetail = (orderId: number) =>
   axios.get<Order>(`/order/${orderId}`)
 
+/**
+ * 更新订单状态
+ * @param orderId 订单ID
+ * @param data 状态更新数据
+ */
+export interface OrderUpdateStatusRequest {
+  NewStatus: OrderStatusEnum
+  TrackingNumber?: string
+  UserNotes?: string
+  AdminNotes?: string
+}
+
+export const updateOrderStatus = (orderId: number, data: OrderUpdateStatusRequest) =>
+  axios.put(`/order/${orderId}/status`, data)
+
 /** 创建订单请求参数 */
 export interface CreateOrderPayload {
   ShippingAddressID: number       // 选中的送货地址ID
@@ -100,7 +127,7 @@ export interface CreateOrderResponse {
   TotalAmountDue: string
   Currency: string
   OrdersCreated: CreatedOrder[]
-  Message: string
+  Message?: string
 }
 
 /**
@@ -108,5 +135,3 @@ export interface CreateOrderResponse {
  */
 export const createOrder = (payload: CreateOrderPayload) =>
   axios.post<CreateOrderResponse>('/order/create', payload)
-
-
diff --git a/src/frontend/src/api/product.ts b/src/frontend/src/api/product.ts
index da4e1c7..bdc4759 100644
--- a/src/frontend/src/api/product.ts
+++ b/src/frontend/src/api/product.ts
@@ -1,19 +1,59 @@
 import axios from 'axios'
 
+// 商品相关接口定义
 export interface Product {
   ProductID: number
   ProductName: string
-  ProductDescription: string
+  ProductDescription?: string
   Price: string
   CategoryID: number
   StockQuantity: number
-  MainImageURL: string
+  MainImageURL?: string
   StoreID: number
   ProductStatus: string
   CreationDate: string
   LastUpdatedDate: string
 }
 
+export interface ProductWithCategoryInfo extends Product {
+  CategoryName: string
+}
+
+// 创建商品请求参数
+export interface ProductCreate {
+  ProductName: string
+  ProductDescription?: string
+  Price: number
+  CategoryID: number
+  StockQuantity?: number
+  MainImageURL?: string
+  StoreID: number
+}
+
+// 更新商品请求参数
+export interface ProductUpdate {
+  ProductName?: string
+  ProductDescription?: string
+  Price?: number | string
+  CategoryID?: number
+  StockQuantity?: number
+  MainImageURL?: string
+  ProductStatus?: string
+}
+
+// 分类接口定义
+export interface Category {
+  CategoryID: number
+  CategoryName: string
+  CategoryDescription?: string
+  ParentCategoryID?: number
+}
+
+export interface CategoryWithChildren extends Category {
+  Children?: CategoryWithChildren[]
+}
+
+// 查询参数
 export interface ProductQuery {
   store_id?: number
   category_id?: number
@@ -21,7 +61,86 @@ export interface ProductQuery {
   limit?: number
   offset?: number
   current_user_id?: number
+  TextInclude?: string
+  StoreID?: number
+  CategoryID?: number
+  MinPrice?: number
+  MaxPrice?: number
+  OrderBy?: string
+  ProductStatus?: string
 }
 
+/**
+ * 获取商品列表
+ * @param query 查询参数
+ */
 export const fetchProducts = (query: ProductQuery) =>
   axios.get<Product[]>('/product', { params: query })
+
+/**
+ * 获取面向商家的商品列表
+ * @param query 查询参数
+ */
+export const fetchMerchantProducts = (query: ProductQuery) =>
+  axios.get<Product[]>('/product/merchant', { params: query })
+
+/**
+ * 获取商品详情
+ * @param productId 商品ID
+ */
+export const fetchProductDetail = (productId: number) =>
+  axios.get<ProductWithCategoryInfo>(`/product/${productId}`)
+
+/**
+ * 创建新商品
+ * @param product 商品数据
+ */
+export const createProduct = (product: ProductCreate) =>
+  axios.post<Product>('/product', product)
+
+/**
+ * 更新商品信息
+ * @param productId 商品ID
+ * @param data 更新数据
+ */
+export const updateProduct = (productId: number, data: ProductUpdate) =>
+  axios.put<Product>(`/product/${productId}`, data)
+
+/**
+ * 更新商品库存
+ * @param productId 商品ID
+ * @param stockChange 库存变化量（正数增加，负数减少）
+ */
+export const updateProductStock = (productId: number, stockChange: number) =>
+  axios.put<Product>(`/product/${productId}/stock`, null, {
+    params: { stock_change: stockChange }
+  })
+
+/**
+ * 删除商品（实际上是将状态设置为DISCONTINUED）
+ * @param productId 商品ID
+ */
+export const deleteProduct = (productId: number) =>
+  axios.delete(`/product/${productId}`)
+
+/**
+ * 获取分类列表
+ * @param parentId 父分类ID（可选，如不提供则获取所有一级分类）
+ */
+export const fetchCategories = (parentId?: number) =>
+  axios.get<Category[]>('/category', {
+    params: { parent_id: parentId }
+  })
+
+/**
+ * 获取分类树
+ */
+export const fetchCategoryTree = () =>
+  axios.get<CategoryWithChildren[]>('/category/tree')
+
+/**
+ * 获取单个分类详情
+ * @param categoryId 分类ID
+ */
+export const fetchCategoryDetail = (categoryId: number) =>
+  axios.get<Category>(`/category/${categoryId}`)
diff --git a/src/frontend/src/api/store.ts b/src/frontend/src/api/store.ts
index 08a3013..a93f8dc 100644
--- a/src/frontend/src/api/store.ts
+++ b/src/frontend/src/api/store.ts
@@ -5,7 +5,24 @@ export interface StoreParams {
   pageSize?: number
   search?: string
   sortBy?: string
-  current_user_id?: number
+  status?: string
+  categoryId?: number
+}
+
+export interface StoreSummary {
+  StoreID: number
+  StoreName: string
+  OwnerUserID: number
+  Description?: string
+  LogoURL?: string
+  StoreStatus: string
+  CreationDate: string
+  LastUpdatedDate: string
+}
+
+export interface StoreListResponse {
+  Count: number
+  StoreList: StoreSummary[]
 }
 
 export interface StoreDetail {
@@ -26,27 +43,52 @@ export interface CreateStoreData {
   StoreStatus?: 'ACTIVE' | 'INACTIVE' | 'CLOSED'
 }
 
-/** 获取商店列表 */
-export const fetchStores = (params: StoreParams = {}) => {
-  return axios.get('/api/v1/store/owner/me', { params })
+// ——— Public storefront ———
+
+/** 获取商店列表，支持分页、搜索、排序及状态、分类过滤 */
+export const fetchStoreList = (params: StoreParams = {}) => {
+  return axios.get<StoreListResponse>('/store/list-full', { params })
+}
+
+export const fetchStoreListSimple = (params: StoreParams = {}) => {
+  return axios.get<{ Count: number; StoreList: StoreSummary[] }>(
+    '/store/list', { params }
+  )
 }
 
 /** 获取商店详情 */
 export const fetchStoreDetail = (storeId: number) => {
-  return axios.get<StoreDetail>(`/api/v1/store/info/${storeId}`)
+  return axios.get<StoreDetail>(`/store/info/${storeId}`)
 }
 
-/** 创建商店 */
+// ——— Owner / Admin ———
+
+/** 获取某个店主的所有店铺 */
+export const fetchStoresByOwner = (ownerUserId: number) => {
+  return axios.get<StoreListResponse>(`/store/owner/${ownerUserId}`)
+}
+
+// ——— Create / Update ———
+
+/** 创建新店铺 */
 export const createStore = (data: CreateStoreData) => {
-  return axios.post('/api/v1/store', data)
+  return axios.post('/store', data)
 }
 
-/** 更新商店 */
+/** 更新店铺信息 */
 export const updateStore = (storeId: number, data: Partial<CreateStoreData>) => {
-  return axios.put(`/api/v1/store/${storeId}`, data)
+  return axios.put(`/store/${storeId}`, data)
 }
 
-/** 获取当前用户的所有商店 */
-export const fetchMyStores = () => {
-  return axios.get('/api/v1/store/owner/me')
+// ——— Utility ———
+
+/** 获取指定店铺的商品数量 */
+export const fetchProductCount = (storeId: number) => {
+  return axios.get('/product', {
+    params: { store_id: storeId, limit: 1, offset: 0 }
+  }).then(res => {
+    // 若后端在响应头返回 total count
+    const total = parseInt(res.headers['x-total-count'] as string)
+    return isNaN(total) ? res.data.length : total
+  })
 }
diff --git a/src/frontend/src/components/cards/store_card.vue b/src/frontend/src/components/cards/store_card.vue
index 99010d8..80c057b 100644
--- a/src/frontend/src/components/cards/store_card.vue
+++ b/src/frontend/src/components/cards/store_card.vue
@@ -1,21 +1,40 @@
 <template>
   <div class="store-card" @click="navigateToStore">
     <el-card :body-style="{ padding: '0px' }" shadow="hover" class="store-card-inner">
-      <img :src="storeLogo" class="store-image" :alt="storeName">
+      <div class="store-image-container">
+        <img 
+          :src="storeLogo" 
+          class="store-image" 
+          :alt="storeName" 
+          @error="handleImageError"
+        />
+        <div class="store-status" v-if="storeStatus">
+          <el-tag 
+            :type="statusType" 
+            size="small" 
+            effect="dark"
+          >
+            {{ statusLabel }}
+          </el-tag>
+        </div>
+      </div>
       <div class="store-info">
-        <h3 class="store-name">{{ storeName }}</h3>
-        <div class="store-ratings">
-          <el-rate 
-            v-model="store.rating" 
-            disabled 
-            text-color="#ff9900"
-            :score-template="store.rating + ''"
-            :show-score="true"
-          />
+        <div class="store-header">
+          <h3 class="store-name">{{ storeName }}</h3>
+          <el-tooltip 
+            v-if="storeCreationDate" 
+            :content="'创建于 ' + formatDate(storeCreationDate)" 
+            placement="top"
+          >
+            <span class="store-date">
+              <i class="el-icon-time"></i>
+            </span>
+          </el-tooltip>
         </div>
+
         <p class="store-description">{{ truncatedDescription }}</p>
         <div class="store-footer">
-          <span class="store-product-count">{{ store.productCount }}+ 商品</span>
+          <span class="store-product-count">{{ storeProductCount }}+ 商品</span>
           <el-button type="primary" size="small" class="visit-button">查看店铺</el-button>
         </div>
       </div>
@@ -24,117 +43,181 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
+import type { StoreSummary } from '@/api/store';
 
 const router = useRouter();
 
-const props = defineProps({
-  store: {
-    type: Object,
-    required: true,
-    default: () => ({
-      id: 0,
-      name: '',
-      description: '',
-      logo: '',
-      rating: 0,
-      productCount: 0
-    })
-  }
-});
+interface StoreProps extends StoreSummary {
+  productCount?: number;
+}
 
-// 默认图片
-const defaultImage = computed(() => {
-  return 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png';
-});
+const props = defineProps<{ store: StoreProps }>();
+
+// 默认占位图
+const defaultImage = 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png';
 
-// 兼容新的API返回的数据结构
-const storeLogo = computed(() => {
-  return props.store.LogoURL || props.store.logo || defaultImage.value;
+const imageError = ref(false);
+const handleImageError = () => {
+  imageError.value = true;
+};
+
+const storeLogo = computed(() =>
+  imageError.value
+    ? defaultImage
+    : props.store.LogoURL || defaultImage
+);
+
+const storeName = computed(() => props.store.StoreName);
+const storeStatus = computed(() => props.store.StoreStatus);
+const storeCreationDate = computed(() => props.store.CreationDate);
+const storeProductCount = computed(() => props.store.ProductCount || 0);
+
+const formatDate = (d: string) =>
+  new Date(d).toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  });
+
+const statusType = computed(() => {
+  switch (storeStatus.value) {
+    case 'ACTIVE': return 'success';
+    case 'INACTIVE': return 'warning';
+    case 'CLOSED': return 'danger';
+    default: return 'info';
+  }
 });
 
-const storeName = computed(() => {
-  return props.store.StoreName || props.store.name || '';
+const statusLabel = computed(() => {
+  switch (storeStatus.value) {
+    case 'ACTIVE': return '营业中';
+    case 'INACTIVE': return '暂停营业';
+    case 'CLOSED': return '已关闭';
+    default: return storeStatus.value;
+  }
 });
 
-// 截断描述文字，防止太长
 const truncatedDescription = computed(() => {
-  const description = props.store.Description || props.store.description || '';
-  return description.length > 50 
-    ? description.slice(0, 50) + '...'
-    : description;
+  const desc = props.store.Description || '';
+  return desc.length > 50 ? desc.slice(0, 50) + '...' : desc;
 });
 
-// 点击卡片跳转到商店页面
 const navigateToStore = () => {
-  const storeId = props.store.StoreID || props.store.id;
-  router.push(`/explore?store_id=${storeId}`);
+  router.push({ path: '/explore', query: { store_id: String(props.store.StoreID) } });
 };
 </script>
 
 <style scoped>
 .store-card {
   cursor: pointer;
-  transition: transform 0.3s ease;
+  transition: all 0.3s ease;
+  height: 100%;
 }
-
 .store-card:hover {
   transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
-
 .store-card-inner {
-  border-radius: 8px;
+  border-radius: 12px;
   overflow: hidden;
   height: 100%;
   display: flex;
   flex-direction: column;
+  transition: all 0.3s ease;
+}
+.store-image-container {
+  position: relative;
+  overflow: hidden;
 }
-
 .store-image {
   width: 100%;
-  height: 150px;
+  height: 180px;
   object-fit: cover;
+  transition: transform 0.5s ease;
+}
+.store-card:hover .store-image {
+  transform: scale(1.05);
+}
+.store-status {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 2;
 }
-
 .store-info {
   padding: 16px;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
 }
-
+.store-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 8px;
+}
 .store-name {
-  margin: 0 0 8px;
+  margin: 0;
   font-size: 18px;
   font-weight: 600;
   color: #303133;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
 }
-
-.store-ratings {
-  margin-bottom: 10px;
+.store-date {
+  font-size: 12px;
+  color: #909399;
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
 }
-
 .store-description {
   color: #606266;
   margin-bottom: 16px;
   font-size: 14px;
   flex-grow: 1;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-
 .store-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: auto;
+  padding-top: 12px;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
-
 .store-product-count {
   font-size: 14px;
   color: #909399;
+  display: flex;
+  align-items: center;
+}
+.visit-button {
+  transition: all 0.2s ease;
 }
-
 .visit-button:hover {
   opacity: 0.9;
+  transform: translateY(-2px);
+}
+@media (max-width: 768px) {
+  .store-image {
+    height: 140px;
+  }
+  .store-name {
+    font-size: 16px;
+  }
+  .store-description {
+    font-size: 13px;
+    -webkit-line-clamp: 2;
+  }
 }
 </style>
diff --git a/src/frontend/src/components/dashboard/OrderManage.vue b/src/frontend/src/components/dashboard/OrderManage.vue
index 71e1b24..fb70f9e 100644
--- a/src/frontend/src/components/dashboard/OrderManage.vue
+++ b/src/frontend/src/components/dashboard/OrderManage.vue
@@ -1,79 +1,125 @@
 <template>
-    <div class="order-manage">
-      <el-row :gutter="20">
-        <el-col :span="8" v-for="order in orders" :key="order.orderId">
-          <OrderManageCard
-            v-bind="order"
-            @update="onOrderUpdate"
+  <div class="order-manage">
+    <!-- 顶部工具栏 -->
+    <div class="toolbar">
+      <h2>订单管理</h2>
+      <el-button type="primary" @click="fetchOrders" :loading="loading">
+        刷新
+      </el-button>
+    </div>
+
+    <!-- 加载中状态 -->
+    <div v-if="loading" class="loading-container">
+      <el-skeleton :rows="3" animated />
+    </div>
+
+    <!-- 订单列表 -->
+    <el-row :gutter="20" v-else>
+      <template v-if="orders.length > 0">
+        <el-col :span="8" v-for="order in orders" :key="order.OrderID">
+          <OrderCard 
+            :order="order"
+            @update-status="updateOrderStatus"
           />
         </el-col>
-      </el-row>
+      </template>
+      <el-empty v-else description="暂无订单数据" />
+    </el-row>
+
+    <!-- 分页 -->
+    <div class="pagination">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50]"
+        layout="total, sizes, prev, pager, next"
+        :total="totalOrders"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
     </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { reactive } from 'vue'
-  import { ElMessage } from 'element-plus'
-  import OrderManageCard from '@/components/dashboard/manage/order_manage_card.vue'  
-  // 模拟的订单数据
-  type OrderStatus = "PROCESSING" | "COMPLETED" | "CANCELED";
-  interface Order {
-    orderId: string | number;
-    date: string;
-    items: number;
-    shipping: string;
-    payment: string;
-    total: number;
-    status: OrderStatus;
-  }
-  const orders = reactive<Order[]>([
-    {
-      orderId: 'A001',
-      date: '2025-05-15',
-      items: 3,
-      shipping: 'Express',
-      payment: 'Credit Card',
-      total: 259.99,
-      status: 'PROCESSING'
-    },
-    {
-      orderId: 'A002',
-      date: '2025-05-14',
-      items: 1,
-      shipping: 'Standard',
-      payment: 'PayPal',
-      total: 49.95,
-      status: 'COMPLETED'
-    },
-    {
-      orderId: 'A003',
-      date: '2025-05-13',
-      items: 5,
-      shipping: 'Express',
-      payment: 'Credit Card',
-      total: 129.50,
-      status: 'CANCELED'
-    }
-  ])
-  
-  /**
-   * 处理子组件更新事件
-   * payload = { orderId, updatedData }
-   */
-  function onOrderUpdate(payload: { orderId: string | number, updatedData: any }) {
-    const idx = orders.findIndex(o => o.orderId === payload.orderId)
-    if (idx !== -1) {
-      // 合并更新
-      Object.assign(orders[idx], payload.updatedData)
-      ElMessage.success(`订单 #${payload.orderId} 已更新`)
-    }
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import OrderCard from './manage/OrderCard.vue'
+import { fetchOrders as fetchOrdersApi, updateOrderStatus as updateOrderStatusApi } from '@/api/order'
+import type { Order } from '@/api/order'
+
+// 状态管理
+const loading = ref(false)
+const orders = ref<Order[]>([])
+const totalOrders = ref(0)
+const currentPage = ref(1)
+const pageSize = ref(10)
+
+// 获取订单列表
+const fetchOrders = async () => {
+  loading.value = true
+  try {
+    const offset = (currentPage.value - 1) * pageSize.value
+    const limit = pageSize.value
+    const response = await fetchOrdersApi(offset, limit)
+    orders.value = response.data.Orders || []
+    totalOrders.value = response.data.TotalCount || 0
+  } catch (error) {
+    console.error('Failed to fetch orders:', error)
+    ElMessage.error('获取订单列表失败')
+  } finally {
+    loading.value = false
   }
-  </script>
-  
-  <style scoped>
-  .order-manage {
-    padding: 24px;
-    background: var(--el-bg-color);
+}
+
+// 分页处理
+const handleSizeChange = (size: number) => {
+  pageSize.value = size
+  currentPage.value = 1
+  fetchOrders()
+}
+
+const handleCurrentChange = (page: number) => {
+  currentPage.value = page
+  fetchOrders()
+}
+
+// 更新订单状态
+const updateOrderStatus = async (orderId: number, newStatus: string) => {
+  try {
+    await updateOrderStatusApi(orderId, { NewStatus: newStatus })
+    ElMessage.success('订单状态更新成功')
+    fetchOrders()
+  } catch (error) {
+    console.error('Failed to update order status:', error)
+    ElMessage.error('订单状态更新失败')
   }
-  </style>
-  
\ No newline at end of file
+}
+
+// 初始化加载数据
+onMounted(fetchOrders)
+</script>
+
+<style scoped>
+.order-manage {
+  padding: 24px;
+  background: var(--el-bg-color);
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.loading-container {
+  padding: 20px;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/frontend/src/components/dashboard/StoreManagement.vue b/src/frontend/src/components/dashboard/StoreManagement.vue
index 585fbe9..1797579 100644
--- a/src/frontend/src/components/dashboard/StoreManagement.vue
+++ b/src/frontend/src/components/dashboard/StoreManagement.vue
@@ -2,30 +2,35 @@
   <div class="store-management">
     <div class="header">
       <h2>店铺管理</h2>
-      <el-button type="primary" @click="showAddDialog = true">
+      <el-button type="primary" @click="openAddDialog()">
         新增店铺
       </el-button>
     </div>
 
     <!-- 店铺列表 -->
-    <el-table :data="stores" style="width: 100%" v-loading="loading">
+    <el-table
+      :data="stores"
+      style="width: 100%"
+      v-loading="loading"
+      row-key="StoreID"
+    >
       <el-table-column prop="StoreID" label="店铺ID" width="100" />
       <el-table-column prop="StoreName" label="店铺名称" />
       <el-table-column prop="Description" label="描述" />
-      <el-table-column prop="StoreStatus" label="状态" width="100">
-        <template #default="scope">
-          <el-tag :type="getStatusType(scope.row.StoreStatus)">
-            {{ scope.row.StoreStatus }}
+      <el-table-column prop="StoreStatus" label="状态" width="120">
+        <template #default="{ row }">
+          <el-tag :type="getStatusType(row.StoreStatus)">
+            {{ translateStatus(row.StoreStatus) }}
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="250">
-        <template #default="scope">
-          <el-button size="small" @click="editStore(scope.row)">编辑</el-button>
-          <el-button 
-            size="small" 
-            type="primary" 
-            @click="manageProducts(scope.row.StoreID)"
+      <el-table-column label="操作" width="220">
+        <template #default="{ row }">
+          <el-button size="small" @click="editStore(row)">编辑</el-button>
+          <el-button
+            size="small"
+            type="primary"
+            @click="manageProducts(row.StoreID)"
           >
             管理商品
           </el-button>
@@ -33,39 +38,28 @@
       </el-table-column>
     </el-table>
 
-    <!-- 分页 -->
-    <div class="pagination">
-      <el-pagination
-        v-model:current-page="pagination.currentPage"
-        v-model:page-size="pagination.pageSize"
-        :total="pagination.total"
-        layout="total, prev, pager, next"
-        @current-change="fetchStores"
-      />
-    </div>
-
     <!-- 新增/编辑店铺对话框 -->
-    <el-dialog 
-      v-model="showAddDialog" 
+    <el-dialog
+      v-model="showStoreDialog"
       :title="editingStore ? '编辑店铺' : '新增店铺'"
-      width="50%"
+      width="500px"
+      @close="resetStoreForm"
     >
-      <el-form :model="storeForm" label-width="100px">
-        <el-form-item label="店铺名称" required>
-          <el-input v-model="storeForm.StoreName" placeholder="请输入店铺名称" />
+      <el-form :model="storeForm" label-width="100px" ref="storeFormRef">
+        <el-form-item
+          label="店铺名称"
+          prop="StoreName"
+          :rules="[{ required: true, message: '请输入店铺名称' }]"
+        >
+          <el-input v-model="storeForm.StoreName" />
         </el-form-item>
-        <el-form-item label="描述">
-          <el-input 
-            v-model="storeForm.Description" 
-            type="textarea" 
-            :rows="3" 
-            placeholder="请输入店铺描述"
-          />
+        <el-form-item label="描述" prop="Description">
+          <el-input v-model="storeForm.Description" type="textarea" :rows="3" />
         </el-form-item>
-        <el-form-item label="Logo URL">
-          <el-input v-model="storeForm.LogoURL" placeholder="请输入Logo URL" />
+        <el-form-item label="Logo URL" prop="LogoURL">
+          <el-input v-model="storeForm.LogoURL" />
         </el-form-item>
-        <el-form-item label="状态">
+        <el-form-item label="状态" prop="StoreStatus">
           <el-select v-model="storeForm.StoreStatus" placeholder="请选择状态">
             <el-option label="营业中" value="ACTIVE" />
             <el-option label="休息中" value="INACTIVE" />
@@ -74,118 +68,524 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="showAddDialog = false">取消</el-button>
-          <el-button type="primary" @click="saveStore">
-            保存
-          </el-button>
-        </span>
+        <el-button @click="showStoreDialog = false">取消</el-button>
+        <el-button type="primary" @click="saveStore" :loading="saving">保存</el-button>
+      </template>
+    </el-dialog>
+    
+    <!-- 商品管理对话框 -->
+    <el-dialog
+      v-model="showProductsDialog"
+      :title="`${currentStore?.StoreName || ''} - 商品管理`"
+      width="80%"
+      :fullscreen="isMobile"
+    >
+      <div class="products-dialog-header">
+        <el-button type="primary" @click="openAddProductDialog">
+          添加商品
+        </el-button>
+        <el-input
+          v-model="productSearchQuery"
+          placeholder="搜索商品"
+          style="width: 250px"
+          clearable
+          @clear="fetchStoreProducts"
+        >
+          <template #append>
+            <el-button @click="fetchStoreProducts">
+              <el-icon><Search /></el-icon>
+            </el-button>
+          </template>
+        </el-input>
+      </div>
+      
+      <!-- 商品列表 -->
+      <el-table
+        :data="products"
+        style="width: 100%"
+        v-loading="loadingProducts"
+        border
+      >
+        <el-table-column prop="ProductID" label="ID" width="80" />
+        <el-table-column label="商品图片" width="120">
+          <template #default="{ row }">
+            <el-image
+              v-if="row.MainImageURL"
+              :src="row.MainImageURL"
+              style="width: 80px; height: 80px"
+              fit="cover"
+              :preview-src-list="[row.MainImageURL]"
+            />
+            <div v-else class="no-image">无图片</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="ProductName" label="商品名称" min-width="180" />
+        <el-table-column prop="Price" label="价格" width="100">
+          <template #default="{ row }">
+            ¥{{ row.Price }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="StockQuantity" label="库存" width="100" />
+        <el-table-column prop="ProductStatus" label="状态" width="120">
+          <template #default="{ row }">
+            <el-tag :type="getProductStatusType(row.ProductStatus)">
+              {{ translateProductStatus(row.ProductStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="180">
+          <template #default="{ row }">
+            <el-button size="small" @click="editProduct(row)">编辑</el-button>
+            <el-button size="small" type="primary" @click="updateProductStock(row)">
+              更新库存
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+    
+    <!-- 添加/编辑商品对话框 -->
+    <el-dialog
+      v-model="showProductDialog"
+      :title="editingProduct ? '编辑商品' : '添加商品'"
+      width="500px"
+      @close="resetProductForm"
+    >
+      <el-form :model="productForm" label-width="100px" ref="productFormRef">
+        <el-form-item
+          label="商品名称"
+          prop="ProductName"
+          :rules="[{ required: true, message: '请输入商品名称' }]"
+        >
+          <el-input v-model="productForm.ProductName" />
+        </el-form-item>
+        <el-form-item
+          label="价格"
+          prop="Price"
+          :rules="[{ required: true, message: '请输入价格' }]"
+        >
+          <el-input-number v-model="productForm.Price" :min="0" :precision="2" :step="0.1" style="width: 100%" />
+        </el-form-item>
+        <el-form-item
+          label="库存"
+          prop="StockQuantity"
+        >
+          <el-input-number v-model="productForm.StockQuantity" :min="0" :step="1" style="width: 100%" />
+        </el-form-item>
+        <el-form-item
+          label="分类"
+          prop="CategoryID"
+          :rules="[{ required: true, message: '请选择分类' }]"
+        >
+          <el-select v-model="productForm.CategoryID" placeholder="请选择分类" style="width: 100%">
+            <el-option
+              v-for="category in categories"
+              :key="category.CategoryID"
+              :label="category.CategoryName"
+              :value="category.CategoryID"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="描述" prop="ProductDescription">
+          <el-input v-model="productForm.ProductDescription" type="textarea" :rows="3" />
+        </el-form-item>
+        <el-form-item label="图片URL" prop="MainImageURL">
+          <el-input v-model="productForm.MainImageURL" />
+        </el-form-item>
+        <el-form-item label="状态" prop="ProductStatus">
+          <el-select v-model="productForm.ProductStatus" placeholder="请选择状态" style="width: 100%">
+            <el-option label="上架" value="ACTIVE" />
+            <el-option label="下架" value="INACTIVE_BY_MERCHANT" />
+            <el-option label="已停产" value="DISCONTINUED" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showProductDialog = false">取消</el-button>
+        <el-button type="primary" @click="saveProduct" :loading="savingProduct">保存</el-button>
+      </template>
+    </el-dialog>
+    
+    <!-- 更新库存对话框 -->
+    <el-dialog
+      v-model="showStockDialog"
+      title="更新商品库存"
+      width="400px"
+    >
+      <el-form :model="stockForm" label-width="140px">
+        <el-form-item label="商品名称">
+          <span>{{ editingProduct?.ProductName }}</span>
+        </el-form-item>
+        <el-form-item label="当前库存">
+          <span>{{ editingProduct?.StockQuantity }}</span>
+        </el-form-item>
+        <el-form-item label="库存变化量" prop="stockChange">
+          <el-input-number v-model="stockForm.stockChange" :min="-1000" :max="1000" style="width: 100%" />
+          <div class="form-hint">正数增加库存，负数减少库存</div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showStockDialog = false">取消</el-button>
+        <el-button type="primary" @click="submitStockUpdate" :loading="updatingStock">
+          确认更新
+        </el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { ElMessage } from 'element-plus'
-import { fetchStores as fetchStoresApi, createStore, updateStore } from '@/api/store'
+import { Search } from '@element-plus/icons-vue'
+import {
+  fetchStoresByOwner,
+  createStore,
+  updateStore,
+} from '@/api/store'
+import { fetchCurrentUser } from '@/api/user'
+import { 
+  fetchCategories,
+  fetchProducts, 
+  createProduct, 
+  updateProduct,
+  updateProductStock as updateProductStockApi,
+  type Product, 
+  type ProductCreate,
+  type ProductUpdate,
+  type Category
+} from '@/api/product'
+import type { StoreDetail } from '@/api/store'
 
-interface Store {
-  StoreID?: number
-  StoreName: string
-  Description: string
-  LogoURL: string
-  StoreStatus: string
-  OwnerUserID?: number
-}
-
-// 店铺列表
-const stores = ref<Store[]>([])
+// 响应式状态
+const stores = ref<StoreDetail[]>([])
 const loading = ref(false)
+const saving = ref(false)
 
-// 分页
-const pagination = ref({
-  currentPage: 1,
-  pageSize: 10,
-  total: 0
-})
+// 当前用户 ID
+const ownerUserId = ref<number | null>(null)
 
-// 新增/编辑对话框
-const showAddDialog = ref(false)
-const editingStore = ref<Store | null>(null)
-const storeForm = ref<Store>({
+// 当前选中的店铺
+const currentStore = ref<StoreDetail | null>(null)
+
+// 店铺表单
+const showStoreDialog = ref(false)
+const editingStore = ref<StoreDetail | null>(null)
+const storeForm = ref<Partial<StoreDetail>>({
   StoreName: '',
   Description: '',
   LogoURL: '',
-  StoreStatus: 'ACTIVE'
+  StoreStatus: 'ACTIVE',
+})
+const storeFormRef = ref()
+
+// 商品列表
+const products = ref<Product[]>([])
+const loadingProducts = ref(false)
+const categories = ref<Category[]>([])
+const showProductsDialog = ref(false)
+const productSearchQuery = ref('')
+
+// 商品表单
+const showProductDialog = ref(false)
+const editingProduct = ref<Product | null>(null)
+const savingProduct = ref(false)
+const productForm = ref<Partial<ProductCreate & ProductUpdate>>({
+  ProductName: '',
+  ProductDescription: '',
+  Price: 0,
+  CategoryID: undefined,
+  StockQuantity: 0,
+  MainImageURL: '',
+  ProductStatus: 'ACTIVE'
+})
+const productFormRef = ref()
+
+// 库存更新
+const showStockDialog = ref(false)
+const updatingStock = ref(false)
+const stockForm = ref({
+  stockChange: 0
 })
 
-// 获取店铺列表
+// 是否是移动设备
+const isMobile = computed(() => window.innerWidth < 768)
+
+// 1) 先拿当前用户
+const loadCurrentUser = async () => {
+  try {
+    const res = await fetchCurrentUser()
+    ownerUserId.value = res.data.UserID
+  } catch (err) {
+    console.error('获取当前用户失败', err)
+    ElMessage.error('请先登录')
+  }
+}
+
+// 2) 拿到 ownerUserId 后，再拉店铺列表
 const fetchStores = async () => {
+  if (ownerUserId.value == null) return
+  loading.value = true
   try {
-    loading.value = true
-    const response = await fetchStoresApi({
-      page: pagination.value.currentPage,
-      pageSize: pagination.value.pageSize
-    })
-    stores.value = response.data.data
-    pagination.value.total = response.data.total || 0
-  } catch (error) {
-    console.error('获取店铺列表失败:', error)
+    const res = await fetchStoresByOwner(ownerUserId.value)
+    stores.value = res.data.StoreList
+  } catch (err) {
+    console.error('获取店铺列表失败', err)
     ElMessage.error('获取店铺列表失败')
   } finally {
     loading.value = false
   }
 }
 
+// 获取分类列表
+const fetchCategoryList = async () => {
+  try {
+    const res = await fetchCategories()
+    categories.value = res.data
+  } catch (err) {
+    console.error('获取分类列表失败', err)
+    ElMessage.error('获取分类列表失败')
+  }
+}
+
+// 获取店铺的商品
+const fetchStoreProducts = async () => {
+  if (!currentStore.value) return
+  
+  loadingProducts.value = true
+  try {
+    const response = await fetchProducts({
+      store_id: currentStore.value.StoreID,
+      search: productSearchQuery.value || undefined
+    })
+    products.value = response.data
+  } catch (error) {
+    console.error('获取商品失败:', error)
+    ElMessage.error('获取商品列表失败')
+  } finally {
+    loadingProducts.value = false
+  }
+}
+
+// 打开"新增店铺"对话框
+const openAddDialog = () => {
+  editingStore.value = null
+  storeForm.value = {
+    StoreName: '',
+    Description: '',
+    LogoURL: '',
+    StoreStatus: 'ACTIVE',
+  }
+  showStoreDialog.value = true
+}
+
+// 重置店铺表单
+const resetStoreForm = () => {
+  editingStore.value = null
+  storeForm.value = {
+    StoreName: '',
+    Description: '',
+    LogoURL: '',
+    StoreStatus: 'ACTIVE',
+  }
+}
+
+// 打开新增商品对话框
+const openAddProductDialog = async () => {
+  if (!currentStore.value) return
+  
+  // 确保分类已加载
+  if (categories.value.length === 0) {
+    await fetchCategoryList()
+  }
+  
+  editingProduct.value = null
+  productForm.value = {
+    ProductName: '',
+    ProductDescription: '',
+    Price: 0,
+    CategoryID: undefined,
+    StockQuantity: 0,
+    MainImageURL: '',
+    ProductStatus: 'ACTIVE',
+    StoreID: currentStore.value.StoreID
+  }
+  showProductDialog.value = true
+}
+
+// 重置商品表单
+const resetProductForm = () => {
+  if (!currentStore.value) return
+  
+  editingProduct.value = null
+  productForm.value = {
+    ProductName: '',
+    ProductDescription: '',
+    Price: 0,
+    CategoryID: undefined,
+    StockQuantity: 0,
+    MainImageURL: '',
+    ProductStatus: 'ACTIVE',
+    StoreID: currentStore.value.StoreID
+  }
+}
+
+// 编辑店铺
+const editStore = (store: StoreDetail) => {
+  editingStore.value = store
+  storeForm.value = { ...store }
+  showStoreDialog.value = true
+}
+
+// 编辑商品
+const editProduct = (product: Product) => {
+  editingProduct.value = product
+  productForm.value = { ...product }
+  showProductDialog.value = true
+}
+
+// 更新商品库存
+const updateProductStock = (product: Product) => {
+  editingProduct.value = product
+  stockForm.value.stockChange = 0
+  showStockDialog.value = true
+}
+
+// 提交库存更新
+const submitStockUpdate = async () => {
+  if (!editingProduct.value) return
+  
+  updatingStock.value = true
+  try {
+    await updateProductStockApi(
+      editingProduct.value.ProductID, 
+      stockForm.value.stockChange
+    )
+    ElMessage.success('库存更新成功')
+    showStockDialog.value = false
+    // 刷新商品列表
+    fetchStoreProducts()
+  } catch (error) {
+    console.error('更新库存失败:', error)
+    ElMessage.error('更新库存失败')
+  } finally {
+    updatingStock.value = false
+  }
+}
+
 // 保存店铺
 const saveStore = async () => {
+  saving.value = true
   try {
     if (editingStore.value) {
-      // 更新店铺
-      await updateStore(editingStore.value.StoreID!, storeForm.value)
-      ElMessage.success('更新店铺成功')
+      await updateStore(editingStore.value.StoreID, storeForm.value)
+      ElMessage.success('更新成功')
     } else {
-      // 新增店铺
-      await createStore(storeForm.value)
-      ElMessage.success('新增店铺成功')
+      await createStore(storeForm.value as any)
+      ElMessage.success('新增成功')
     }
-    showAddDialog.value = false
+    showStoreDialog.value = false
     fetchStores()
-  } catch (error) {
-    console.error('保存店铺失败:', error)
-    ElMessage.error('保存店铺失败')
+  } catch (err) {
+    console.error('保存失败', err)
+    ElMessage.error('保存失败')
+  } finally {
+    saving.value = false
   }
 }
 
-// 编辑店铺
-const editStore = (store: Store) => {
-  editingStore.value = store
-  storeForm.value = { ...store }
-  showAddDialog.value = true
+// 保存商品
+const saveProduct = async () => {
+  if (!currentStore.value) return
+  
+  savingProduct.value = true
+  try {
+    if (editingProduct.value) {
+      // 更新商品
+      await updateProduct(
+        editingProduct.value.ProductID, 
+        productForm.value as ProductUpdate
+      )
+      ElMessage.success('商品更新成功')
+    } else {
+      // 创建新商品
+      await createProduct({
+        ...productForm.value,
+        StoreID: currentStore.value.StoreID
+      } as ProductCreate)
+      ElMessage.success('商品添加成功')
+    }
+    showProductDialog.value = false
+    fetchStoreProducts()
+  } catch (error) {
+    console.error('保存商品失败:', error)
+    ElMessage.error('保存商品失败')
+  } finally {
+    savingProduct.value = false
+  }
 }
 
 // 管理商品
-const manageProducts = (storeId: number) => {
-  // 这里可以跳转到商品管理页面，或者打开商品管理对话框
-  ElMessage.info(`管理店铺 ${storeId} 的商品`)
-  // 实际项目中可以这样跳转：
-  // router.push(`/dashboard/products?store_id=${storeId}`)
+const manageProducts = async (storeId: number) => {
+  // 查找并设置当前店铺
+  currentStore.value = stores.value.find(s => s.StoreID === storeId) || null
+  if (!currentStore.value) {
+    ElMessage.error('未找到店铺信息')
+    return
+  }
+  
+  // 打开商品管理对话框
+  showProductsDialog.value = true
+  
+  // 加载商品和分类
+  await Promise.all([
+    fetchStoreProducts(),
+    fetchCategoryList()
+  ])
 }
 
-// 获取状态标签类型
+// 店铺状态对应 Tag 类型
 const getStatusType = (status: string) => {
-  const types: Record<string, string> = {
+  return {
     ACTIVE: 'success',
     INACTIVE: 'warning',
-    CLOSED: 'danger'
-  }
-  return types[status] || ''
+    CLOSED: 'danger',
+  }[status] || 'info'
+}
+
+// 商品状态对应 Tag 类型
+const getProductStatusType = (status: string) => {
+  return {
+    ACTIVE: 'success',
+    INACTIVE_BY_MERCHANT: 'warning',
+    SUSPENDED_BY_ADMIN: 'danger',
+    DISCONTINUED: 'info'
+  }[status] || 'info'
 }
 
-// 初始化加载数据
-onMounted(() => {
-  fetchStores()
+// 翻译店铺状态
+const translateStatus = (status: string) => {
+  return {
+    ACTIVE: '营业中',
+    INACTIVE: '休息中',
+    CLOSED: '已关闭'
+  }[status] || status
+}
+
+// 翻译商品状态
+const translateProductStatus = (status: string) => {
+  return {
+    ACTIVE: '上架',
+    INACTIVE_BY_MERCHANT: '下架',
+    SUSPENDED_BY_ADMIN: '已禁用',
+    DISCONTINUED: '已停产'
+  }[status] || status
+}
+
+// 生命周期：先拿用户，再拿列表
+onMounted(async () => {
+  await loadCurrentUser()
+  await fetchStores()
 })
 </script>
 
@@ -204,9 +604,28 @@ onMounted(() => {
   margin-bottom: 20px;
 }
 
-.pagination {
-  margin-top: 20px;
+.products-dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.no-image {
+  width: 80px;
+  height: 80px;
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f7fa;
+  color: #909399;
+  font-size: 12px;
+  border-radius: 4px;
+}
+
+.form-hint {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 5px;
 }
 </style>
diff --git a/src/frontend/src/components/dashboard/manage/OrderCard.vue b/src/frontend/src/components/dashboard/manage/OrderCard.vue
new file mode 100644
index 0000000..17313a7
--- /dev/null
+++ b/src/frontend/src/components/dashboard/manage/OrderCard.vue
@@ -0,0 +1,240 @@
+<template>
+  <div class="order-card">
+    <!-- 头部：订单号 + 日期 + 状态 -->
+    <div class="order-header">
+      <div class="order-basic">
+        <span class="order-id">#{{ order.OrderID }}</span>
+        <span class="order-date">{{ formatDate(order.CreationTime) }}</span>
+      </div>
+      <el-tag :type="getStatusType(order.OrderStatus)">{{ translateStatus(order.OrderStatus) }}</el-tag>
+    </div>
+
+    <el-divider />
+
+    <!-- 订单基本信息 -->
+    <div class="order-info">
+      <div class="info-row" v-for="(label,key) in basicFields" :key="key">
+        <span class="label">{{ label }}：</span>
+        <span>{{ order[key] }}</span>
+      </div>
+    </div>
+
+    <!-- 商品列表 -->
+    <div class="order-items">
+      <h4>订单商品 ({{ order.Items.length }}件)</h4>
+      <el-table :data="order.Items" size="small" style="width: 100%">
+        <el-table-column label="商品" min-width="220">
+          <template #default="{ row }">
+            <div class="product-info">
+              <el-image
+                v-if="row.ProductImageURLAtPurchase"
+                :src="row.ProductImageURLAtPurchase"
+                class="product-image"
+                fit="cover"
+              />
+              <div class="product-name">{{ row.ProductNameAtPurchase }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="PriceAtPurchase" label="单价" width="80" />
+        <el-table-column prop="Quantity" label="数量" width="60" />
+        <el-table-column prop="Subtotal" label="小计" width="80" />
+      </el-table>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="actions">
+      <el-button type="primary" @click="showStatusDialog = true">更新状态</el-button>
+      <el-button type="info" @click="onViewDetails">查看详情</el-button>
+    </div>
+
+    <!-- 状态更新对话框 -->
+    <el-dialog v-model="showStatusDialog" title="更新订单状态" width="400px">
+      <el-form :model="statusForm" label-width="100px">
+        <el-form-item label="当前状态">
+          <el-tag :type="getStatusType(order.OrderStatus)">{{ translateStatus(order.OrderStatus) }}</el-tag>
+        </el-form-item>
+        <el-form-item label="新状态">
+          <el-select v-model="statusForm.NewStatus" placeholder="选择新状态" style="width: 100%">
+            <el-option v-for="s in availableStatusTransitions" :key="s.value" :label="s.label" :value="s.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注" v-if="statusForm.NewStatus.includes('CANCELLED')">
+          <el-input v-model="statusForm.UserNotes" type="textarea" placeholder="请输入取消原因" :rows="3" />
+        </el-form-item>
+        <el-form-item label="物流单号" v-if="statusForm.NewStatus === 'SHIPPED'">
+          <el-input v-model="statusForm.TrackingNumber" placeholder="请输入物流单号" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showStatusDialog = false">取消</el-button>
+        <el-button type="primary" @click="updateStatus" :loading="updating">确认更新</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 订单详情弹窗 -->
+    <el-dialog v-model="showDetailDialog" title="订单详情" width="800px" :before-close="closeDetail">
+      <el-descriptions title="订单信息" :column="2" border>
+        <el-descriptions-item label="OrderID">{{ detail.OrderID }}</el-descriptions-item>
+        <el-descriptions-item label="UserID">{{ detail.UserID }}</el-descriptions-item>
+        <el-descriptions-item label="StoreID">{{ detail.StoreID }}</el-descriptions-item>
+        <el-descriptions-item label="PaymentTransactionID">{{ detail.PaymentTransactionID }}</el-descriptions-item>
+        <el-descriptions-item label="OrderStatus">{{ detail.OrderStatus }}</el-descriptions-item>
+        <el-descriptions-item label="PaymentStatus">{{ detail.PaymentStatus }}</el-descriptions-item>
+        <el-descriptions-item label="OrderTotalAmount">¥{{ detail.OrderTotalAmount }}</el-descriptions-item>
+        <el-descriptions-item label="DiscountAmount">¥{{ detail.DiscountAmount }}</el-descriptions-item>
+        <el-descriptions-item label="ShippingFee">¥{{ detail.ShippingFee }}</el-descriptions-item>
+        <el-descriptions-item label="FinalAmount">¥{{ detail.FinalAmountForThisOrder }}</el-descriptions-item>
+        <el-descriptions-item label="CreationTime">{{ formatDate(detail.CreationTime) }}</el-descriptions-item>
+        <el-descriptions-item label="PaymentConfirmationTime">{{ formatDate(detail.PaymentConfirmationTime) }}</el-descriptions-item>
+        <el-descriptions-item label="ShippingTime">{{ formatDate(detail.ShippingTime) }}</el-descriptions-item>
+        <el-descriptions-item label="DeliveryTime">{{ formatDate(detail.DeliveryTime) }}</el-descriptions-item>
+        <el-descriptions-item label="CompletionTime">{{ formatDate(detail.CompletionTime) }}</el-descriptions-item>
+        <el-descriptions-item label="LastUpdatedDate">{{ formatDate(detail.LastUpdatedDate) }}</el-descriptions-item>
+        <el-descriptions-item label="Notes_ByUser">{{ detail.Notes_ByUser }}</el-descriptions-item>
+        <el-descriptions-item label="Notes_ByMerchant">{{ detail.Notes_ByMerchant }}</el-descriptions-item>
+        <el-descriptions-item label="收货人">{{ detail.ShippingAddress_RecipientName }}</el-descriptions-item>
+        <el-descriptions-item label="联系电话">{{ detail.ShippingAddress_PhoneNumber }}</el-descriptions-item>
+        <el-descriptions-item label="收货地址" :span="2">{{ detail.ShippingAddress_Full }}</el-descriptions-item>
+      </el-descriptions>
+      <el-divider>订单商品 (共{{ detail.Items.length }}件)</el-divider>
+      <el-table :data="detail.Items" stripe size="small">
+        <el-table-column prop="ProductNameAtPurchase" label="商品" />
+        <el-table-column prop="Quantity" label="数量" width="80" />
+        <el-table-column prop="PriceAtPurchase" label="单价" width="100" />
+        <el-table-column prop="Subtotal" label="小计" width="120" />
+      </el-table>
+      <template #footer>
+        <el-button @click="closeDetail">关闭</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import type { Order, OrderItem } from '@/api/order'
+import { fetchOrderDetail } from '@/api/order'
+
+// Props and Emit
+type Status =
+  | 'PENDING_PAYMENT'
+  | 'PAID_AND_PENDING_PROCESSING'
+  | 'PROCESSING_BY_MERCHANT'
+  | 'SHIPPED'
+  | 'DELIVERED'
+  | 'COMPLETED'
+  | 'CANCELLED_BY_USER'
+  | 'CANCELLED_BY_MERCHANT'
+  | 'CANCELLED_BY_SYSTEM'
+
+const props = defineProps<{ order: Order }>()
+const emit = defineEmits<{
+  (e: 'update-status', orderId: number, newStatus: Status): void
+}>()
+
+// Basic fields mapping
+const basicFields: Record<string,string> = {
+  OrderTotalAmount: '总额',
+  DiscountAmount: '优惠',
+  ShippingFee: '运费',
+  FinalAmountForThisOrder: '应付',
+}
+
+// State
+const showStatusDialog = ref(false)
+const showDetailDialog = ref(false)
+const updating = ref(false)
+const detail = ref<Order & { PaymentStatus?: string }>(props.order)
+const statusForm = ref({ NewStatus: '', UserNotes: '', TrackingNumber: '' })
+
+// Available transitions
+const availableStatusTransitions = computed(() => {
+  switch (props.order.OrderStatus) {
+    case 'PENDING_PAYMENT': return [{ label: '取消订单(商家)', value: 'CANCELLED_BY_MERCHANT' }]
+    case 'PAID_AND_PENDING_PROCESSING': return [
+      { label: '开始处理', value: 'PROCESSING_BY_MERCHANT' },
+      { label: '取消订单(商家)', value: 'CANCELLED_BY_MERCHANT' }
+    ]
+    case 'PROCESSING_BY_MERCHANT': return [
+      { label: '已发货', value: 'SHIPPED' },
+      { label: '取消订单(商家)', value: 'CANCELLED_BY_MERCHANT' }
+    ]
+    case 'SHIPPED': return [{ label: '已送达', value: 'DELIVERED' }]
+    case 'DELIVERED': return [{ label: '已完成', value: 'COMPLETED' }]
+    default: return []
+  }
+})
+
+// View details
+const onViewDetails = async () => {
+  try {
+    const res = await fetchOrderDetail(props.order.OrderID)
+    detail.value = res.data
+    showDetailDialog.value = true
+  } catch {
+    ElMessage.error('获取订单详情失败')
+  }
+}
+
+// Update status
+const updateStatus = async () => {
+  if (!statusForm.value.NewStatus) {
+    ElMessage.warning('请选择新状态')
+    return
+  }
+  updating.value = true
+  try {
+    emit('update-status', props.order.OrderID, statusForm.value.NewStatus as Status)
+    showStatusDialog.value = false
+    statusForm.value = { NewStatus: '', UserNotes: '', TrackingNumber: '' }
+  } finally {
+    updating.value = false
+  }
+}
+
+// Close detail
+const closeDetail = () => { showDetailDialog.value = false }
+
+// Format date
+const formatDate = (d?: string) => d ? new Date(d).toLocaleString('zh-CN') : '-'
+
+// Status type
+const getStatusType = (s: string) => {
+  const map: Record<string, 'success'|'danger'|'warning'|'info'> = {
+    PENDING_PAYMENT: 'warning', PAID_AND_PENDING_PROCESSING: 'info', PROCESSING_BY_MERCHANT: 'info',
+    SHIPPED: 'primary', DELIVERED: 'success', COMPLETED: 'success',
+    CANCELLED_BY_USER: 'danger', CANCELLED_BY_MERCHANT: 'danger', CANCELLED_BY_SYSTEM: 'danger'
+  }
+  return map[s] || 'info'
+}
+
+// Translate status
+const translateStatus = (s: string) => {
+  const map: Record<string,string> = {
+    PENDING_PAYMENT: '待付款', PAID_AND_PENDING_PROCESSING: '待处理', PROCESSING_BY_MERCHANT: '处理中',
+    SHIPPED: '已发货', DELIVERED: '已送达', COMPLETED: '已完成',
+    CANCELLED_BY_USER: '用户取消', CANCELLED_BY_MERCHANT: '商家取消', CANCELLED_BY_SYSTEM: '系统取消'
+  }
+  return map[s] || s
+}
+</script>
+
+<style scoped>
+.order-card { background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
+.order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
+.order-basic { display: flex; flex-direction: column; }
+.order-id { font-size: 18px; font-weight: bold; margin-bottom: 5px; }
+.order-date { color: #909399; font-size: 14px; }
+.order-info { margin-bottom: 20px; }
+.info-row { display: flex; margin-bottom: 8px; }
+.label { width: 80px; color: #606266; }
+.amount { font-weight: bold; color: #f56c6c; }
+.order-items { margin-bottom: 20px; }
+.order-items h4 { margin-bottom: 10px; font-weight: 600; }
+.product-info { display: flex; align-items: center; }
+.product-image { width: 40px; height: 40px; margin-right: 10px; border-radius: 4px; }
+.product-name { font-size: 13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
+.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/explore/FilterSidebar.vue b/src/frontend/src/components/explore/FilterSidebar.vue
index d452e6e..631b8da 100644
--- a/src/frontend/src/components/explore/FilterSidebar.vue
+++ b/src/frontend/src/components/explore/FilterSidebar.vue
@@ -1,7 +1,66 @@
+<template>
+  <aside class="filter-box">
+    <h3 class="filter-title">Filters</h3>
+
+    <!-- 搜索 -->
+    <div class="filter-block">
+      <el-input
+        v-model="form.search"
+        placeholder="Search keyword"
+        clearable
+        @keyup.enter="apply"
+      />
+    </div>
+
+    <!-- 分类下拉 -->
+    <div class="filter-block">
+      <label class="filter-label">Category</label>
+      <el-select
+        v-model="form.category_id"
+        :loading="loadingCat"
+        placeholder="All"
+        clearable
+      >
+        <el-option
+          v-for="c in categories"
+          :key="c.CategoryID"
+          :label="c.CategoryName"
+          :value="c.CategoryID"
+        />
+      </el-select>
+    </div>
+
+    <!-- 店铺下拉 -->
+    <div class="filter-block">
+      <label class="filter-label">Store</label>
+      <el-select
+        v-model="form.store_id"
+        :loading="loadingStore"
+        placeholder="All"
+        clearable
+      >
+        <el-option
+          v-for="s in stores"
+          :key="s.StoreID"
+          :label="s.StoreName"
+          :value="s.StoreID"
+        />
+      </el-select>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="filter-actions">
+      <el-button type="primary" @click="apply">Apply</el-button>
+      <el-button @click="reset">Reset</el-button>
+    </div>
+  </aside>
+</template>
+
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
-import { ElInput, ElSelect, ElOption, ElButton, ElMessage } from 'element-plus'
+import { ElMessage } from 'element-plus'
 import { fetchCategories, type Category } from '@/api/category'
+import { fetchStoreListSimple, type StoreSummary } from '@/api/store'
 
 interface Props {
   selected: Record<string, any>
@@ -11,39 +70,47 @@ const emit  = defineEmits<{
   (e: 'update', query: Record<string, any>): void
 }>()
 
-/* ----------------- 分类数据 ----------------- */
-const categories = ref<Category[]>([])
-const loadingCat = ref(false)
-
+// --- 分类数据 ---
+const categories   = ref<Category[]>([])
+const loadingCat   = ref(false)
 async function loadCategories() {
+  loadingCat.value = true
   try {
-    loadingCat.value = true
-    const { data } = await fetchCategories()           // 取一级分类
+    const { data } = await fetchCategories()
     categories.value = data
-  } catch (err) {
+  } catch {
     ElMessage.error('分类加载失败')
   } finally {
     loadingCat.value = false
   }
 }
 
-/* ----------------- 店铺（暂用静态） --------- */
-const stores = ref([
-  { id: 1, name: 'Official Store' },
-  { id: 2, name: 'BestBuy' }
-])
+// --- 店铺数据 ---
+const stores       = ref<StoreSummary[]>([])
+const loadingStore = ref(false)
+async function loadStores() {
+  loadingStore.value = true
+  try {
+    const res = await fetchStoreListSimple()
+    stores.value = res.data.StoreList
+  } catch {
+    ElMessage.error('店铺加载失败')
+  } finally {
+    loadingStore.value = false
+  }
+}
 
-/* ----------------- 本地表单模型 ------------- */
+// --- 表单模型 ---
 const form = ref({
   category_id: undefined as number | undefined,
   store_id:    undefined as number | undefined,
   search:      ''
 })
 
-/* UI 与 URL Query 同步 */
+// 同步外部 selected 到本地 form
 watch(
   () => props.selected,
-  (q) => {
+  q => {
     form.value.category_id = q.category_id ? Number(q.category_id) : undefined
     form.value.store_id    = q.store_id    ? Number(q.store_id)    : undefined
     form.value.search      = (q.search as string) || ''
@@ -51,7 +118,7 @@ watch(
   { immediate: true, deep: true }
 )
 
-/* 提交 / 重置操作 */
+// 应用和重置
 function apply() {
   emit('update', { ...form.value })
 }
@@ -60,65 +127,13 @@ function reset() {
   emit('update', { ...form.value })
 }
 
-/* 初始化加载分类 */
-onMounted(() => loadCategories())
+// 初始加载
+onMounted(() => {
+  loadCategories()
+  loadStores()
+})
 </script>
 
-<template>
-  <aside class="filter-box">
-    <h3 class="filter-title">Filters</h3>
-
-    <!-- 搜索 -->
-    <div class="filter-block">
-      <el-input
-        v-model="form.search"
-        placeholder="Search keyword"
-        clearable
-        @keyup.enter="apply"
-      />
-    </div>
-
-    <!-- 分类下拉 -->
-    <div class="filter-block">
-      <label class="filter-label">Category</label>
-      <el-select
-        v-model="form.category_id"
-        :loading="loadingCat"
-        placeholder="All"
-        clearable
-      >
-        <el-option
-          v-for="c in categories"
-          :key="c.CategoryID"
-          :label="c.CategoryName"
-          :value="c.CategoryID"
-        />
-      </el-select>
-    </div>
-
-    <!-- 店铺下拉 -->
-    <div class="filter-block">
-      <label class="filter-label">Store</label>
-      <el-select v-model="form.store_id" placeholder="All" clearable>
-        <el-option
-          v-for="s in stores"
-          :key="s.id"
-          :label="s.name"
-          :value="s.id"
-        />
-      </el-select>
-    </div>
-
-    <!-- 操作按钮 -->
-    <el-button type="primary" class="w-full mt-2" @click="apply">
-      Apply
-    </el-button>
-    <el-button class="w-full mt-1" @click="reset">
-      Reset
-    </el-button>
-  </aside>
-</template>
-
 <style scoped>
 .filter-box {
   background: #fff;
@@ -126,20 +141,27 @@ onMounted(() => loadCategories())
   border-radius: 8px;
   box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
 }
-
 .filter-title {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 12px;
 }
-
 .filter-block {
   margin-bottom: 16px;
 }
-
 .filter-label {
   display: block;
   font-size: 14px;
   margin-bottom: 4px;
 }
+
+/* 新增：并排且等宽的按钮组 */
+.filter-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+}
+.filter-actions .el-button {
+  flex: 1;
+}
 </style>
diff --git a/src/frontend/src/router/index.js b/src/frontend/src/router/index.js
index 01645a9..44f05e3 100644
--- a/src/frontend/src/router/index.js
+++ b/src/frontend/src/router/index.js
@@ -31,8 +31,8 @@ const router = createRouter({
       ]
     },
     {
-      path: '/admin',
-      name: 'Admin',
+      path: '/merchant',
+      name: 'Merchant',
       component: () => import('../views/Analysis/Dashboard.vue'),
     },
     {
diff --git a/src/frontend/src/views/Stores.vue b/src/frontend/src/views/Stores.vue
index db0b32f..9a037a2 100644
--- a/src/frontend/src/views/Stores.vue
+++ b/src/frontend/src/views/Stores.vue
@@ -1,33 +1,17 @@
 <template>
   <div class="stores-container">
     <div class="stores-header">
-      <h1 class="page-title">Stores</h1>
+      <h1 class="page-title">商店列表</h1>
     </div>
-    
-    <div v-if="loading" class="loading-container">
-      <el-skeleton :rows="3" :loading="loading" animated>
-        <template #template>
-          <div style="padding: 20px">
-            <div style="display: flex; align-items: center; margin-bottom: 40px">
-              <el-skeleton-item variant="image" style="width: 240px; height: 240px" />
-              <div style="margin-left: 20px">
-                <el-skeleton-item variant="h1" style="width: 50%" />
-                <el-skeleton-item variant="text" style="margin-top: 16px; width: 30%" />
-                <el-skeleton-item variant="text" style="width: 80%" />
-              </div>
-            </div>
-            <el-skeleton :rows="3" />
-          </div>
-        </template>
-      </el-skeleton>
-    </div>
-    
-    <el-empty v-else-if="stores.length === 0" description="没有找到相关店铺" />
-    
+
+    <el-skeleton v-if="loading" :rows="6" animated class="mb-4" />
+
+    <el-empty v-else-if="stores.length === 0" description="没有找到相关店铺" class="mb-4" />
+
     <div v-else class="stores-grid">
       <store-card
         v-for="store in stores"
-        :key="store.StoreID || store.id"
+        :key="store.StoreID"
         :store="store"
       />
     </div>
@@ -37,30 +21,49 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import StoreCard from '@/components/cards/store_card.vue'
-import { fetchStores, StoreDetail } from '@/api/store'
+import { fetchStoreList, type StoreSummary } from '@/api/store'
+import axios from 'axios'
 
-// 状态变量
-const loading = ref(true)
-const stores = ref<(StoreDetail | any)[]>([])
+const loading = ref(false)
+const stores = ref<StoreSummary[]>([])
 
-// 加载商店列表数据
-const loadStores = async () => {
+async function loadStores() {
   loading.value = true
   try {
-    const response = await fetchStores()
-    stores.value = response.data.stores || response.data
-  } catch (error) {
-    console.error('Failed to fetch stores:', error)
+    // 1) 先拿商店列表
+    const res = await fetchStoreList()
+    const list = res.data.StoreList
+
+    // 2) 并行调用商品接口，统计每个店的商品数量
+    const counts = await Promise.all(
+      list.map(store =>
+        axios
+          .get<{ /* product schema*/ }[]>('/product', {
+            params: { store_id: store.StoreID}
+          })
+          .then(rsp => {
+            // 响应可能支持 total count header，若不支持，则需要一次拉完全部再计数：
+            // return rsp.data.length
+            const total = Number(rsp.headers['x-total-count'] || rsp.data.length)
+            return total
+          })
+      )
+    )
+
+    // 3) 合并到 stores 数组里
+    stores.value = list.map((store, idx) => ({
+      ...store,
+      ProductCount: counts[idx]
+    }))
+  } catch (err) {
+    console.error('加载失败', err)
     stores.value = []
   } finally {
     loading.value = false
   }
 }
 
-// 初始加载
-onMounted(() => {
-  loadStores()
-})
+onMounted(loadStores)
 </script>
 
 <style scoped>
@@ -71,31 +74,31 @@ onMounted(() => {
 }
 
 .stores-header {
-  margin-bottom: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
 }
 
 .page-title {
   font-size: 28px;
   font-weight: 600;
-  margin-bottom: 20px;
+  margin: 0;
   color: #303133;
 }
 
+.header-actions {
+  display: flex;
+  gap: 12px;
+}
+
 .stores-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 24px;
-  margin-bottom: 40px;
 }
 
-.loading-container {
-  margin: 40px 0;
-}
-
-@media (max-width: 768px) {
-  .stores-grid {
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 16px;
-  }
+.mb-4 {
+  margin-bottom: 16px;
 }
 </style>

From a3f05a2e4768631d3edac98ce7e034443b6dd021 Mon Sep 17 00:00:00 2001
From: Renyye <1457077123@qq.com>
Date: Sun, 25 May 2025 17:00:08 +0800
Subject: [PATCH 09/16] feat(frontend): Implement store change request
 management

---
 src/frontend/src/api/shop.ts                  |  31 -
 src/frontend/src/api/store.ts                 | 154 +++--
 .../dashboard/StoreChangeRequests.vue         | 441 ++++++++++++++
 .../components/dashboard/StoreManagement.vue  | 107 +---
 .../dashboard/admin/StoreChangeReviewer.vue   | 549 ++++++++++++++++++
 .../components/dashboard/manage/StoreForm.vue |  48 ++
 .../dashboard/merchant/StoreEditor.vue        | 428 ++++++++++++++
 src/frontend/src/views/Analysis/Dashboard.vue |   7 +
 8 files changed, 1618 insertions(+), 147 deletions(-)
 delete mode 100644 src/frontend/src/api/shop.ts
 create mode 100644 src/frontend/src/components/dashboard/StoreChangeRequests.vue
 create mode 100644 src/frontend/src/components/dashboard/admin/StoreChangeReviewer.vue
 create mode 100644 src/frontend/src/components/dashboard/manage/StoreForm.vue
 create mode 100644 src/frontend/src/components/dashboard/merchant/StoreEditor.vue

diff --git a/src/frontend/src/api/shop.ts b/src/frontend/src/api/shop.ts
deleted file mode 100644
index 504d2bd..0000000
--- a/src/frontend/src/api/shop.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// Todo: align with backend API
-// 写此文件时还缺少 get all shop 接口
-import axios from 'axios'
-
-/** 后端返回的店铺（Shop）结构 */
-export interface Shop {
-  StoreID: number
-  StoreName: string
-  StoreDescription?: string
-  StoreLogoURL?: string
-  // 可以根据后端实际扩展其他字段
-}
-
-/**
- * 获取店铺列表（临时接口）  
- * 注意：后端实际路径可能是 `/store` 或 `/shop`，这里先用 `/shop` 协议
- * @param params  可选过滤条件，将被拼到 querystring
- */
-export const fetchShops = (params?: {
-  // 未来可按地区、状态、关键字等筛选
-  search?: string
-  limit?: number
-  offset?: number
-}) =>
-  axios.get<Shop[]>('/shop', {
-    params: params ?? {}
-  })
-
-// 示例：
-// fetchShops({ search: 'Official', limit: 50, offset: 0 })
-//   .then(res => console.log(res.data))
diff --git a/src/frontend/src/api/store.ts b/src/frontend/src/api/store.ts
index a93f8dc..658d05d 100644
--- a/src/frontend/src/api/store.ts
+++ b/src/frontend/src/api/store.ts
@@ -1,5 +1,6 @@
 import axios from 'axios'
 
+/** 通用查询参数 */
 export interface StoreParams {
   page?: number
   pageSize?: number
@@ -9,13 +10,15 @@ export interface StoreParams {
   categoryId?: number
 }
 
+/** ========== 商铺列表 & 详情 ========== */
+
 export interface StoreSummary {
   StoreID: number
   StoreName: string
   OwnerUserID: number
   Description?: string
   LogoURL?: string
-  StoreStatus: string
+  StoreStatus: 'ACTIVE' | 'INACTIVE' | 'CLOSED'
   CreationDate: string
   LastUpdatedDate: string
 }
@@ -36,59 +39,130 @@ export interface StoreDetail {
   LastUpdatedDate: string
 }
 
-export interface CreateStoreData {
-  StoreName: string
+/** 分页／筛选获取商铺列表 */
+export const fetchStoreList = (params: StoreParams = {}) =>
+  axios.get<StoreListResponse>('/store/list-full', { params })
+
+export const fetchStoreListSimple = (params: StoreParams = {}) =>
+  axios.get<{ Count: number; StoreList: StoreSummary[] }>('/store/list', { params })
+
+/** 获取单个商铺详情 */
+export const fetchStoreDetail = (storeId: number) =>
+  axios.get<StoreDetail>(`/store/info/${storeId}`)
+
+/** 获取指定店主的所有商铺 */
+export const fetchStoresByOwner = (ownerUserId: number) =>
+  axios.get<StoreListResponse>(`/store/owner/${ownerUserId}`)
+
+
+/** ========== 变更申请（审批流） ========== */
+
+/** 审批流中的变更申请记录 */
+export interface StoreChangeRequest {
+  RequestID: number
+  StoreID: number
+  UserID: number
+  StoreName?: string
   Description?: string
   LogoURL?: string
-  StoreStatus?: 'ACTIVE' | 'INACTIVE' | 'CLOSED'
+  RequestStatus: 'PENDING' | 'APPROVED' | 'REJECTED' | 'CANCELLED'
+  AdminComment?: string
+  RequestDate: string
+  ProcessDate?: string
+  ProcessedByUserID?: number
 }
 
-// ——— Public storefront ———
-
-/** 获取商店列表，支持分页、搜索、排序及状态、分类过滤 */
-export const fetchStoreList = (params: StoreParams = {}) => {
-  return axios.get<StoreListResponse>('/store/list-full', { params })
+export interface StoreChangeRequestFilter {
+  status?: 'PENDING' | 'APPROVED' | 'REJECTED' | 'CANCELLED'
+  store_id?: number
+  user_id?: number
+  page?: number
+  page_size?: number
 }
 
-export const fetchStoreListSimple = (params: StoreParams = {}) => {
-  return axios.get<{ Count: number; StoreList: StoreSummary[] }>(
-    '/store/list', { params }
-  )
+export interface StoreChangeRequestListResponse {
+  Count: number
+  Requests: StoreChangeRequest[]
 }
 
-/** 获取商店详情 */
-export const fetchStoreDetail = (storeId: number) => {
-  return axios.get<StoreDetail>(`/store/info/${storeId}`)
+/** 用于提交审批流的变更申请 */
+export interface StoreChangeCreate {
+  RequestingUserID: number
+  RequestType: 'STORE_CREATE' | 'STORE_UPDATE'
+  ProposedData_JSON: {
+    StoreName?: string
+    Description?: string
+    LogoURL?: string
+    StoreStatus?: 'ACTIVE' | 'INACTIVE' | 'CLOSED'
+  }
+  SubmitterNotes?: string
+  StoreID?: number    // RequestType=STORE_UPDATE 时必填
 }
 
-// ——— Owner / Admin ———
+/** 提交新建或更新商铺的变更申请 */
+export const createStoreChangeRequest = (data: StoreChangeCreate) =>
+  axios.post('/store-change', data)
 
-/** 获取某个店主的所有店铺 */
-export const fetchStoresByOwner = (ownerUserId: number) => {
-  return axios.get<StoreListResponse>(`/store/owner/${ownerUserId}`)
-}
+/** 获取变更申请列表（可按状态／商铺／用户筛选） */
+export const fetchStoreChangeRequests = (params: StoreChangeRequestFilter = {}) =>
+  axios.get<StoreChangeRequestListResponse>('/store-change', { params })
 
-// ——— Create / Update ———
+/** 获取单个变更申请详情 */
+export const fetchStoreChangeRequestDetail = (requestId: number) =>
+  axios.get<StoreChangeRequest>(`/store-change/${requestId}`)
 
-/** 创建新店铺 */
-export const createStore = (data: CreateStoreData) => {
-  return axios.post('/store', data)
+/** 更新审批流中的变更申请（管理员操作） */
+export interface StoreChangeAdminUpdate {
+  AdminComment?: string
+  RequestStatus: 'APPROVED' | 'REJECTED' | 'CANCELLED'
 }
 
-/** 更新店铺信息 */
-export const updateStore = (storeId: number, data: Partial<CreateStoreData>) => {
-  return axios.put(`/store/${storeId}`, data)
+/** 用于用户更新自己的变更申请 */
+export interface UpdateStoreChangeRequest {
+  RequestType?: 'STORE_CREATE' | 'STORE_UPDATE'
+  ProposedData_JSON?: {
+    StoreName?: string
+    Description?: string
+    LogoURL?: string
+    StoreStatus?: 'ACTIVE' | 'INACTIVE' | 'CLOSED'
+  }
+  Status?: 'PENDING_APPROVAL'
+  SubmitterNotes?: string
 }
 
-// ——— Utility ———
-
-/** 获取指定店铺的商品数量 */
-export const fetchProductCount = (storeId: number) => {
-  return axios.get('/product', {
-    params: { store_id: storeId, limit: 1, offset: 0 }
-  }).then(res => {
-    // 若后端在响应头返回 total count
-    const total = parseInt(res.headers['x-total-count'] as string)
-    return isNaN(total) ? res.data.length : total
-  })
-}
+/** 管理员处理变更申请 */
+export const adminProcessStoreChangeRequest = (
+  requestId: number,
+  data: StoreChangeAdminUpdate
+) => axios.put(`/store-change/${requestId}/admin`, data)
+
+/** 用户更新自己的变更申请 */
+export const updateStoreChangeRequest = (
+  requestId: number,
+  data: UpdateStoreChangeRequest
+) => axios.put(`/store-change/${requestId}`, data)
+
+/** 取消自己提交的变更申请 */
+export const cancelStoreChangeRequest = (requestId: number) =>
+  axios.delete(`/store-change/${requestId}`)
+
+/** 按商铺／用户拉取所有变更申请 */
+export const fetchStoreChangeRequestsByStore = (
+  storeId: number,
+  params: StoreChangeRequestFilter = {}
+) => axios.get<StoreChangeRequestListResponse>(
+  `/store-change/by-store/${storeId}`, { params }
+)
+
+export const fetchStoreChangeRequestsByUser = (
+  userId: number,
+  params: StoreChangeRequestFilter = {}
+) => axios.get<StoreChangeRequestListResponse>(
+  `/store-change/by-user/${userId}`, { params }
+)
+
+/** 管理端获取所有待审批申请 */
+export const fetchPendingStoreChangeRequests = (
+  params: StoreChangeRequestFilter = {}
+) =>
+  axios.get<StoreChangeRequestListResponse>('/store-change/admin/pending', { params })
diff --git a/src/frontend/src/components/dashboard/StoreChangeRequests.vue b/src/frontend/src/components/dashboard/StoreChangeRequests.vue
new file mode 100644
index 0000000..d4285d0
--- /dev/null
+++ b/src/frontend/src/components/dashboard/StoreChangeRequests.vue
@@ -0,0 +1,441 @@
+
+<template>
+    <div class="store-change-req">
+      <!-- 📌 Header & Filters -->
+      <div class="header-bar">
+        <h2>店铺变更申请</h2>
+        <el-button
+          v-if="!isAdmin"
+          type="primary"
+          @click="openCreateDialog"
+        >
+          新建申请
+        </el-button>
+        <div class="filters">
+          <el-select v-model="filters.status" placeholder="全部状态" clearable style="width: 140px">
+            <el-option label="待审核"  value="PENDING"    />
+            <el-option label="已批准"  value="APPROVED"   />
+            <el-option label="已拒绝"  value="REJECTED"   />
+            <el-option label="已取消"  value="CANCELLED"  />
+          </el-select>
+          <el-input
+            v-if="isAdmin"
+            v-model.number="filters.store_id"
+            placeholder="店铺ID"
+            style="width: 160px"
+            clearable
+          />
+          <el-button @click="fetchRequests" :loading="loading">
+            <el-icon><Search /></el-icon>
+          </el-button>
+        </div>
+      </div>
+  
+      <!-- 📄 Request List -->
+      <el-table
+        :data="requests"
+        v-loading="loading"
+        border
+        style="width: 100%"
+        row-key="RequestID"
+      >
+        <el-table-column prop="RequestID" label="ID" width="80" />
+        <el-table-column prop="StoreID" label="店铺ID" width="100" />
+        <el-table-column prop="StoreName" label="店铺名称" min-width="160" />
+        <el-table-column prop="RequestType" label="类型" width="140" />
+        <el-table-column prop="RequestStatus" label="状态" width="120">
+          <template #default="{ row }">
+            <el-tag :type="statusTagType(row.RequestStatus)">
+              {{ transStatus(row.RequestStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="RequestDate" label="提交时间" width="180" />
+        <el-table-column label="操作" width="220">
+          <template #default="{ row }">
+            <el-button size="small" @click="openDetailDialog(row)">详情</el-button>
+            <el-button
+              v-if="!isAdmin && row.RequestStatus === 'PENDING'"
+              size="small"
+              @click="openEditDialog(row)"
+            >编辑</el-button>
+            <el-button
+              v-if="!isAdmin && row.RequestStatus === 'PENDING'"
+              size="small"
+              type="danger"
+              @click="cancelRequest(row)"
+            >取消</el-button>
+            <template v-if="isAdmin && row.RequestStatus === 'PENDING'">
+              <el-button size="small" type="success" @click="processRequest(row, 'APPROVED')">批准</el-button>
+              <el-button size="small" type="warning" @click="processRequest(row, 'REJECTED')">拒绝</el-button>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+  
+      <!-- ➕  创建 / 编辑对话框  -->
+      <el-dialog
+        v-model="showFormDialog"
+        :title="editingReq ? '编辑申请' : '新建申请'"
+        width="600px"
+        @close="resetForm"
+      >
+        <el-form :model="form" ref="formRef" label-width="120px">
+          <el-form-item label="店铺" prop="StoreID" :rules="storeRules">
+            <el-select v-model="form.StoreID" placeholder="请选择店铺" filterable>
+              <el-option
+                v-for="s in myStores"
+                :key="s.StoreID"
+                :label="`${s.StoreName} (#${s.StoreID})`"
+                :value="s.StoreID"
+              />
+            </el-select>
+          </el-form-item>
+  
+          <el-form-item label="拟变更名称" prop="StoreName">
+            <el-input v-model="form.StoreName" placeholder="留空则不修改" />
+          </el-form-item>
+          <el-form-item label="拟变更描述" prop="Description">
+            <el-input v-model="form.Description" type="textarea" rows="3" placeholder="留空则不修改" />
+          </el-form-item>
+          <el-form-item label="拟变更 Logo URL" prop="LogoURL">
+            <el-input v-model="form.LogoURL" placeholder="留空则不修改" />
+          </el-form-item>
+          <el-form-item label="提交备注" prop="SubmitterNotes">
+            <el-input v-model="form.SubmitterNotes" type="textarea" rows="2" />
+          </el-form-item>
+        </el-form>
+  
+        <template #footer>
+          <el-button @click="showFormDialog = false">取消</el-button>
+          <el-button type="primary" @click="submitForm" :loading="savingForm">保存</el-button>
+        </template>
+      </el-dialog>
+  
+      <!-- 🗂  详情 / 审核对话框 -->
+      <el-dialog
+        v-model="showDetailDialog"
+        title="申请详情"
+        width="640px"
+      >
+        <el-descriptions :column="1" border>
+          <el-descriptions-item label="ID">{{ detail?.RequestID }}</el-descriptions-item>
+          <el-descriptions-item label="店铺">{{ detail?.StoreName }} (ID={{ detail?.StoreID }})</el-descriptions-item>
+          <el-descriptions-item label="申请人">{{ detail?.UserID }}</el-descriptions-item>
+          <el-descriptions-item label="类型">{{ detail?.RequestType }}</el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="statusTagType(detail?.RequestStatus)">
+              {{ transStatus(detail?.RequestStatus) }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="提交时间">{{ detail?.RequestDate }}</el-descriptions-item>
+          <el-descriptions-item label="处理时间">{{ detail?.ProcessDate || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="管理员备注">{{ detail?.AdminComment || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="提交备注">{{ detail?.SubmitterNotes || '-' }}</el-descriptions-item>
+        </el-descriptions>
+  
+        <!-- Admin quick action -->
+        <template v-if="isAdmin && detail && detail.RequestStatus === 'PENDING'" #footer>
+          <el-input
+            v-model="adminAction.comment"
+            placeholder="审核意见，可选"
+            type="textarea"
+            rows="2"
+            style="flex:1; margin-right: 12px"
+          />
+          <el-button type="danger" @click="processDetail('REJECTED')" :loading="processingDetail">拒绝</el-button>
+          <el-button type="success" @click="processDetail('APPROVED')" :loading="processingDetail">批准</el-button>
+        </template>
+      </el-dialog>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, reactive, computed, onMounted } from 'vue'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import { Search } from '@element-plus/icons-vue'
+  
+  // API helpers
+  import {
+    createStoreChangeRequest,
+    fetchStoreChangeRequests,
+    fetchPendingStoreChangeRequests,
+    fetchStoreChangeRequestDetail,
+    updateStoreChangeRequest,
+    cancelStoreChangeRequest,
+    adminProcessStoreChangeRequest,
+    fetchStoreChangeRequestsByUser
+  } from '@/api/store'
+  import { fetchCurrentUser } from '@/api/user'
+  import { fetchStoresByOwner } from '@/api/store'
+  import type {
+    StoreChangeRequest,
+    StoreChangeRequestFilter,
+    StoreChangeCreate,
+    UpdateStoreChangeRequest,
+    StoreDetail
+  } from '@/api/store'
+  
+  /* --------------------------------------------------
+   * reactive state
+   * -------------------------------------------------- */
+  const isAdmin = ref(false)
+  const currentUserId = ref<number | null>(null)
+  
+  const loading = ref(false)
+  const requests = ref<StoreChangeRequest[]>([])
+  
+  const filters = reactive<StoreChangeRequestFilter>({ status: undefined })
+  
+  /* ----------  create / edit form  ---------- */
+  const showFormDialog = ref(false)
+  const editingReq = ref<StoreChangeRequest | null>(null)
+  const savingForm = ref(false)
+  // 编辑表单字段
+  const form = reactive<{
+    StoreID: number
+    StoreName: string
+    Description: string
+    LogoURL: string
+    SubmitterNotes?: string
+  }>({
+    StoreID: 0,
+    StoreName: '',
+    Description: '',
+    LogoURL: '',
+    SubmitterNotes: ''
+  })
+  const formRef = ref()
+  
+  /* ----------  detail / process  ---------- */
+  const showDetailDialog = ref(false)
+  const detail = ref<StoreChangeRequest | null>(null)
+  const processingDetail = ref(false)
+  const adminAction = reactive({ comment: '' })
+  
+  /* ----------  merchant store list  ---------- */
+  const myStores = ref<StoreDetail[]>([])
+  
+  /* --------------------------------------------------
+   * helpers
+   * -------------------------------------------------- */
+  const statusTagType = (status?: string) => ({
+    PENDING: 'warning',
+    APPROVED: 'success',
+    REJECTED: 'danger',
+    CANCELLED: 'info'
+  }[status as string] || 'info')
+  
+  const transStatus = (status?: string) => ({
+    PENDING: '待审核',
+    APPROVED: '已批准',
+    REJECTED: '已拒绝',
+    CANCELLED: '已取消'
+  }[status as string] || status)
+  
+  const storeRules = [{ required: true, message: '请选择店铺' }]
+  
+  /* --------------------------------------------------
+   * data fetching
+   * -------------------------------------------------- */
+  const fetchRequests = async () => {
+    loading.value = true
+    try {
+      let res;
+      if (isAdmin.value) {
+        res = await fetchPendingStoreChangeRequests({ ...filters })
+      } else {
+        // 对于普通用户，使用 by-user 接口获取自己的申请
+        if (!currentUserId.value) {
+          throw new Error('用户ID未获取')
+        }
+        res = await fetchStoreChangeRequestsByUser(currentUserId.value, { ...filters })
+      }
+      requests.value = res.data.Requests
+    } catch (err) {
+      console.error('拉取申请列表失败', err)
+      ElMessage.error('获取申请列表失败')
+    } finally {
+      loading.value = false
+    }
+  }
+  
+  const fetchUserAndStores = async () => {
+    const userRes = await fetchCurrentUser()
+    currentUserId.value = userRes.data.UserID
+    isAdmin.value = !!userRes.data.IsAdmin
+    if (!isAdmin.value) {
+      const storeRes = await fetchStoresByOwner(currentUserId.value)
+      myStores.value = storeRes.data.StoreList
+    }
+  }
+  
+  /* --------------------------------------------------
+   * create / edit workflow
+   * -------------------------------------------------- */
+  const openCreateDialog = () => {
+    editingReq.value = null
+    Object.assign(form, {
+      StoreID: 0,
+      StoreName: '',
+      Description: '',
+      LogoURL: '',
+      SubmitterNotes: ''
+    })
+    showFormDialog.value = true
+  }
+  
+  const openEditDialog = (row: StoreChangeRequest) => {
+    editingReq.value = row
+    Object.assign(form, {
+      StoreID: row.StoreID,
+      StoreName: row.StoreName ?? '',
+      Description: row.Description ?? '',
+      LogoURL: row.LogoURL ?? '',
+      SubmitterNotes: ''
+    })
+    showFormDialog.value = true
+  }
+  
+  const resetForm = () => {
+    editingReq.value = null
+    Object.assign(form, {
+      StoreID: 0,
+      StoreName: '',
+      Description: '',
+      LogoURL: '',
+      SubmitterNotes: ''
+    })
+  }
+  
+  const submitForm = async () => {
+    // @ts-ignore – simple validate
+    await formRef.value?.validate()
+    savingForm.value = true
+    try {
+      if (editingReq.value) {
+        // 更新已有申请 (只有申请者自己能更新)
+        const updatePayload: UpdateStoreChangeRequest = {
+          ProposedData_JSON: {
+            StoreName: form.StoreName || undefined,
+            Description: form.Description || undefined,
+            LogoURL: form.LogoURL || undefined
+          },
+          SubmitterNotes: form.SubmitterNotes
+        }
+        await updateStoreChangeRequest(editingReq.value.RequestID, updatePayload)
+        ElMessage.success('更新成功')
+      } else {
+        // 创建新申请
+        const createPayload: StoreChangeCreate = {
+          RequestingUserID: currentUserId.value as number,
+          RequestType: 'STORE_UPDATE',
+          StoreID: form.StoreID,
+          ProposedData_JSON: {
+            StoreName: form.StoreName || undefined,
+            Description: form.Description || undefined,
+            LogoURL: form.LogoURL || undefined
+          },
+          SubmitterNotes: form.SubmitterNotes
+        }
+        await createStoreChangeRequest(createPayload)
+        ElMessage.success('创建成功，等待审核')
+      }
+      showFormDialog.value = false
+      fetchRequests()
+    } catch (err) {
+      console.error('保存失败', err)
+      ElMessage.error('保存失败')
+    } finally {
+      savingForm.value = false
+    }
+  }
+  
+  /* --------------------------------------------------
+   * detail / audit workflow
+   * -------------------------------------------------- */
+  const openDetailDialog = async (row: StoreChangeRequest) => {
+    showDetailDialog.value = true
+    detail.value = null
+    try {
+      const res = await fetchStoreChangeRequestDetail(row.RequestID)
+      detail.value = res.data
+    } catch (err) {
+      console.error('获取详情失败', err)
+      ElMessage.error('获取详情失败')
+    }
+  }
+  
+  const processDetail = async (action: 'APPROVED' | 'REJECTED') => {
+    if (!detail.value) return
+    processingDetail.value = true
+    try {
+      await adminProcessStoreChangeRequest(detail.value.RequestID, {
+        RequestStatus: action,
+        AdminComment: adminAction.comment || undefined
+      })
+      ElMessage.success(action === 'APPROVED' ? '已批准' : '已拒绝')
+      showDetailDialog.value = false
+      fetchRequests()
+    } catch (err) {
+      console.error('处理失败', err)
+      ElMessage.error('处理失败')
+    } finally {
+      processingDetail.value = false
+    }
+  }
+  
+  const processRequest = async (row: StoreChangeRequest, action: 'APPROVED' | 'REJECTED') => {
+    try {
+      await ElMessageBox.confirm(`确认要将申请 #${row.RequestID} 标记为“${action === 'APPROVED' ? '批准' : '拒绝'}”吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: action === 'APPROVED' ? 'success' : 'warning'
+      })
+      await adminProcessStoreChangeRequest(row.RequestID, { RequestStatus: action })
+      ElMessage.success('操作成功')
+      fetchRequests()
+    } catch { /* cancelled */ }
+  }
+  
+  const cancelRequest = async (row: StoreChangeRequest) => {
+    try {
+      await ElMessageBox.confirm('确定取消该申请？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+      await cancelStoreChangeRequest(row.RequestID)
+      ElMessage.success('已取消')
+      fetchRequests()
+    } catch { /* user cancel */ }
+  }
+  
+  /* --------------------------------------------------
+   * lifecycle
+   * -------------------------------------------------- */
+  onMounted(async () => {
+    await fetchUserAndStores()
+    await fetchRequests()
+  })
+  </script>
+  
+  <style scoped>
+  .store-change-req {
+    padding: 20px;
+    background: #fff;
+    border-radius: 4px;
+  }
+  .header-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  .filters {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/frontend/src/components/dashboard/StoreManagement.vue b/src/frontend/src/components/dashboard/StoreManagement.vue
index 1797579..eda3a98 100644
--- a/src/frontend/src/components/dashboard/StoreManagement.vue
+++ b/src/frontend/src/components/dashboard/StoreManagement.vue
@@ -1,75 +1,35 @@
 <template>
   <div class="store-management">
+    <!-- Header -->
     <div class="header">
       <h2>店铺管理</h2>
-      <el-button type="primary" @click="openAddDialog()">
-        新增店铺
-      </el-button>
+      <el-button type="primary" @click="openAddDialog()">新增店铺</el-button>
     </div>
 
     <!-- 店铺列表 -->
-    <el-table
-      :data="stores"
-      style="width: 100%"
-      v-loading="loading"
-      row-key="StoreID"
-    >
+    <el-table :data="stores" v-loading="loading" row-key="StoreID" style="width:100%">
       <el-table-column prop="StoreID" label="店铺ID" width="100" />
       <el-table-column prop="StoreName" label="店铺名称" />
       <el-table-column prop="Description" label="描述" />
       <el-table-column prop="StoreStatus" label="状态" width="120">
         <template #default="{ row }">
-          <el-tag :type="getStatusType(row.StoreStatus)">
-            {{ translateStatus(row.StoreStatus) }}
-          </el-tag>
+          <el-tag :type="getStatusType(row.StoreStatus)">{{ translateStatus(row.StoreStatus) }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="220">
         <template #default="{ row }">
           <el-button size="small" @click="editStore(row)">编辑</el-button>
-          <el-button
-            size="small"
-            type="primary"
-            @click="manageProducts(row.StoreID)"
-          >
-            管理商品
-          </el-button>
+          <el-button size="small" type="primary" @click="manageProducts(row.StoreID)">管理商品</el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <!-- 新增/编辑店铺对话框 -->
-    <el-dialog
-      v-model="showStoreDialog"
-      :title="editingStore ? '编辑店铺' : '新增店铺'"
-      width="500px"
-      @close="resetStoreForm"
-    >
-      <el-form :model="storeForm" label-width="100px" ref="storeFormRef">
-        <el-form-item
-          label="店铺名称"
-          prop="StoreName"
-          :rules="[{ required: true, message: '请输入店铺名称' }]"
-        >
-          <el-input v-model="storeForm.StoreName" />
-        </el-form-item>
-        <el-form-item label="描述" prop="Description">
-          <el-input v-model="storeForm.Description" type="textarea" :rows="3" />
-        </el-form-item>
-        <el-form-item label="Logo URL" prop="LogoURL">
-          <el-input v-model="storeForm.LogoURL" />
-        </el-form-item>
-        <el-form-item label="状态" prop="StoreStatus">
-          <el-select v-model="storeForm.StoreStatus" placeholder="请选择状态">
-            <el-option label="营业中" value="ACTIVE" />
-            <el-option label="休息中" value="INACTIVE" />
-            <el-option label="已关闭" value="CLOSED" />
-          </el-select>
-        </el-form-item>
-      </el-form>
+    <el-dialog v-model="showStoreDialog" :title="editingStore ? '编辑店铺' : '新增店铺'" width="500px" @close="resetStoreForm">
+      <StoreForm :storeForm="storeForm" :storeFormRef="storeFormRef" />
       <template #footer>
         <el-button @click="showStoreDialog = false">取消</el-button>
-        <el-button type="primary" @click="saveStore" :loading="saving">保存</el-button>
+        <el-button type="primary" @click="saveStore" :loading="saving">提交申请</el-button>
       </template>
     </el-dialog>
     
@@ -237,25 +197,9 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { ElMessage } from 'element-plus'
-import { Search } from '@element-plus/icons-vue'
-import {
-  fetchStoresByOwner,
-  createStore,
-  updateStore,
-} from '@/api/store'
+import StoreForm from '@/components/dashboard/manage/StoreForm.vue'
 import { fetchCurrentUser } from '@/api/user'
-import { 
-  fetchCategories,
-  fetchProducts, 
-  createProduct, 
-  updateProduct,
-  updateProductStock as updateProductStockApi,
-  type Product, 
-  type ProductCreate,
-  type ProductUpdate,
-  type Category
-} from '@/api/product'
-import type { StoreDetail } from '@/api/store'
+import { fetchStoresByOwner, createStoreChangeRequest, type StoreDetail } from '@/api/store'
 
 // 响应式状态
 const stores = ref<StoreDetail[]>([])
@@ -473,22 +417,32 @@ const submitStockUpdate = async () => {
   }
 }
 
-// 保存店铺
 const saveStore = async () => {
   saving.value = true
   try {
-    if (editingStore.value) {
-      await updateStore(editingStore.value.StoreID, storeForm.value)
-      ElMessage.success('更新成功')
-    } else {
-      await createStore(storeForm.value as any)
-      ElMessage.success('新增成功')
+    // 构造变更申请的 payload
+    const payload = {
+      RequestingUserID: ownerUserId.value!,
+      RequestType: editingStore.value ? 'STORE_UPDATE' : 'STORE_CREATE',
+      ProposedData_JSON: {
+      StoreName: storeForm.value.StoreName,
+      Description: storeForm.value.Description,
+      LogoURL: storeForm.value.LogoURL,
+      StoreStatus: storeForm.value.StoreStatus,
+    },
+    ...(editingStore.value && { StoreID: editingStore.value.StoreID }),
+    SubmitterNotes: '',
     }
+    await createStoreChangeRequest(payload)
+    ElMessage.success(
+      editingStore.value ? '更新申请已提交，等待审核' : '创建申请已提交，等待审核'
+    )
     showStoreDialog.value = false
-    fetchStores()
+    // 刷新列表，用于显示最新的店铺（实际生效需后台审核后才会变动）
+    await fetchStores()
   } catch (err) {
-    console.error('保存失败', err)
-    ElMessage.error('保存失败')
+    console.error('提交变更申请失败', err)
+    ElMessage.error('提交失败，请稍后再试')
   } finally {
     saving.value = false
   }
@@ -628,4 +582,5 @@ onMounted(async () => {
   color: #909399;
   margin-top: 5px;
 }
+.store-management { padding:20px; background:#fff; border-radius:4px; }
 </style>
diff --git a/src/frontend/src/components/dashboard/admin/StoreChangeReviewer.vue b/src/frontend/src/components/dashboard/admin/StoreChangeReviewer.vue
new file mode 100644
index 0000000..6f47b0d
--- /dev/null
+++ b/src/frontend/src/components/dashboard/admin/StoreChangeReviewer.vue
@@ -0,0 +1,549 @@
+<template>
+  <div class="store-change-reviewer">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <span>店铺变更申请审核</span>
+          <el-button type="primary" @click="refreshRequests" :loading="loading">
+            <i class="el-icon-refresh"></i> 刷新
+          </el-button>
+        </div>
+      </template>
+      
+      <div v-if="loading" class="loading-placeholder">
+        <el-skeleton :rows="5" animated />
+      </div>
+      
+      <div v-else>
+        <!-- 筛选选项 -->
+        <div class="filter-row">
+          <el-select v-model="statusFilter" placeholder="状态筛选" clearable @change="onFilterChange">
+            <el-option label="全部" value="" />
+            <el-option label="待审核" value="PENDING" />
+            <el-option label="已批准" value="APPROVED" />
+            <el-option label="已拒绝" value="REJECTED" />
+            <el-option label="已取消" value="CANCELLED" />
+          </el-select>
+          
+          <el-input
+            v-model="searchQuery"
+            placeholder="搜索店铺名称"
+            clearable
+            prefix-icon="el-icon-search"
+            @clear="onFilterChange"
+            @input="onFilterChange"
+            class="search-input"
+          />
+        </div>
+        
+        <!-- 表格列表 -->
+        <el-table
+          v-if="filteredRequests.length > 0"
+          :data="filteredRequests"
+          style="width: 100%"
+          row-key="RequestID"
+          border
+        >
+          <el-table-column prop="RequestID" label="ID" width="80" />
+          <el-table-column prop="StoreID" label="店铺ID" width="100" />
+          <el-table-column prop="StoreName" label="店铺名称" min-width="150" />
+          <el-table-column prop="RequestDate" label="申请日期" width="180">
+            <template #default="scope">
+              {{ formatDate(scope.row.RequestDate) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="RequestStatus" label="状态" width="120">
+            <template #default="scope">
+              <el-tag :type="getRequestStatusType(scope.row.RequestStatus)">
+                {{ getRequestStatusText(scope.row.RequestStatus) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="UserID" label="申请人ID" width="100" />
+          <el-table-column label="操作" width="150" fixed="right">
+            <template #default="scope">
+              <el-button 
+                type="primary" 
+                size="small" 
+                @click="viewRequestDetail(scope.row)"
+              >
+                查看
+              </el-button>
+              <el-button 
+                v-if="scope.row.RequestStatus === 'PENDING'" 
+                type="success" 
+                size="small" 
+                @click="handleRequest(scope.row, 'APPROVED')"
+              >
+                批准
+              </el-button>
+              <el-button 
+                v-if="scope.row.RequestStatus === 'PENDING'" 
+                type="danger" 
+                size="small" 
+                @click="handleRequest(scope.row, 'REJECTED')"
+              >
+                拒绝
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        
+        <el-empty v-else description="没有找到相关变更申请" />
+        
+        <!-- 分页 -->
+        <div v-if="totalRequests > 0" class="pagination">
+          <el-pagination
+            v-model:current-page="currentPage"
+            v-model:page-size="pageSize"
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="totalRequests"
+            @size-change="onPageSizeChange"
+            @current-change="onPageChange"
+            background
+          />
+        </div>
+      </div>
+    </el-card>
+    
+    <!-- 详情对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="`变更申请详情 (#${selectedRequest?.RequestID})`"
+      width="700px"
+    >
+      <div v-if="selectedRequest" class="request-detail">
+        <div class="compare-section">
+          <h3>店铺信息变更对比</h3>
+          <el-descriptions :column="1" border>
+            <el-descriptions-item label="店铺ID">
+              {{ selectedRequest.StoreID }}
+            </el-descriptions-item>
+            
+            <el-descriptions-item label="店铺名称">
+              <div v-if="originalStore" class="compare-row">
+                <div class="original">
+                  <strong>原值:</strong> {{ originalStore.StoreName }}
+                </div>
+                <div 
+                  class="changed" 
+                  :class="{ 'highlight': originalStore.StoreName !== selectedRequest.StoreName }"
+                >
+                  <strong>变更为:</strong> {{ selectedRequest.StoreName }}
+                </div>
+              </div>
+              <div v-else>{{ selectedRequest.StoreName }}</div>
+            </el-descriptions-item>
+            
+            <el-descriptions-item label="店铺描述">
+              <div v-if="originalStore" class="compare-row">
+                <div class="original">
+                  <strong>原值:</strong> 
+                  <div class="text-content">{{ originalStore.Description || '(无)' }}</div>
+                </div>
+                <div 
+                  class="changed" 
+                  :class="{ 'highlight': originalStore.Description !== selectedRequest.Description }"
+                >
+                  <strong>变更为:</strong>
+                  <div class="text-content">{{ selectedRequest.Description || '(无)' }}</div>
+                </div>
+              </div>
+              <div v-else>{{ selectedRequest.Description }}</div>
+            </el-descriptions-item>
+            
+            <el-descriptions-item label="Logo URL">
+              <div v-if="originalStore" class="compare-row">
+                <div class="original">
+                  <strong>原值:</strong> {{ originalStore.LogoURL || '(无)' }}
+                  <div v-if="originalStore.LogoURL" class="image-preview">
+                    <img :src="originalStore.LogoURL" alt="原Logo" />
+                  </div>
+                </div>
+                <div 
+                  class="changed" 
+                  :class="{ 'highlight': originalStore.LogoURL !== selectedRequest.LogoURL }"
+                >
+                  <strong>变更为:</strong> {{ selectedRequest.LogoURL || '(无)' }}
+                  <div v-if="selectedRequest.LogoURL" class="image-preview">
+                    <img :src="selectedRequest.LogoURL" alt="新Logo" />
+                  </div>
+                </div>
+              </div>
+              <div v-else>{{ selectedRequest.LogoURL }}</div>
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+        
+        <div class="request-info">
+          <h3>申请信息</h3>
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="申请状态">
+              <el-tag :type="getRequestStatusType(selectedRequest.RequestStatus)">
+                {{ getRequestStatusText(selectedRequest.RequestStatus) }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="申请日期">
+              {{ formatDate(selectedRequest.RequestDate) }}
+            </el-descriptions-item>
+            <el-descriptions-item label="申请人ID">
+              {{ selectedRequest.UserID }}
+            </el-descriptions-item>
+            <el-descriptions-item label="处理日期" v-if="selectedRequest.ProcessDate">
+              {{ formatDate(selectedRequest.ProcessDate) }}
+            </el-descriptions-item>
+            <el-descriptions-item label="处理人ID" v-if="selectedRequest.ProcessedByUserID">
+              {{ selectedRequest.ProcessedByUserID }}
+            </el-descriptions-item>
+            <el-descriptions-item label="管理员备注" v-if="selectedRequest.AdminComment">
+              {{ selectedRequest.AdminComment }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+        
+        <!-- 处理表单（仅待处理的申请显示） -->
+        <div v-if="selectedRequest.RequestStatus === 'PENDING'" class="process-form">
+          <h3>处理申请</h3>
+          <el-form :model="processForm" ref="processFormRef" label-width="100px">
+            <el-form-item label="处理意见" prop="AdminComment">
+              <el-input 
+                v-model="processForm.AdminComment" 
+                type="textarea" 
+                :rows="3" 
+                placeholder="请输入处理意见（可选）"
+              />
+            </el-form-item>
+            
+            <el-form-item>
+              <el-button 
+                type="success" 
+                @click="processRequest('APPROVED')" 
+                :loading="processing"
+              >
+                批准申请
+              </el-button>
+              <el-button 
+                type="danger" 
+                @click="processRequest('REJECTED')" 
+                :loading="processing"
+              >
+                拒绝申请
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+import { 
+  fetchPendingStoreChangeRequests, 
+  fetchStoreChangeRequests,
+  fetchStoreChangeRequestDetail,
+  fetchStoreDetail,
+  adminProcessStoreChangeRequest,
+  type StoreChangeRequest,
+  type StoreChangeRequestFilter,
+  type StoreDetail,
+  type UpdateStoreChangeRequest
+} from '@/api/store'
+import { useUserStore } from '@/stores/user'
+
+const userStore = useUserStore()
+const loading = ref(false)
+const processing = ref(false)
+const changeRequests = ref<StoreChangeRequest[]>([])
+const currentPage = ref(1)
+const pageSize = ref(10)
+const totalRequests = ref(0)
+const statusFilter = ref('')
+const searchQuery = ref('')
+
+// 详情对话框
+const dialogVisible = ref(false)
+const selectedRequest = ref<StoreChangeRequest | null>(null)
+const originalStore = ref<StoreDetail | null>(null)
+const processFormRef = ref<FormInstance>()
+const processForm = reactive({
+  AdminComment: ''
+})
+
+// 加载变更申请列表
+const loadChangeRequests = async () => {
+  loading.value = true
+  try {
+    // 默认加载待处理的申请
+    const params: StoreChangeRequestFilter = {
+      page: currentPage.value,
+      page_size: pageSize.value
+    }
+    
+    if (statusFilter.value) {
+      params.status = statusFilter.value as any
+    }
+    
+    const response = await fetchStoreChangeRequests(params)
+    changeRequests.value = response.data.Requests || []
+    totalRequests.value = response.data.Count || 0
+  } catch (error) {
+    console.error('Failed to load change requests:', error)
+    ElMessage.error('加载变更申请失败')
+    changeRequests.value = []
+    totalRequests.value = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+// 刷新请求列表
+const refreshRequests = () => {
+  loadChangeRequests()
+}
+
+// 筛选结果
+const filteredRequests = computed(() => {
+  if (!searchQuery.value) {
+    return changeRequests.value
+  }
+  
+  const query = searchQuery.value.toLowerCase()
+  return changeRequests.value.filter(request => 
+    request.StoreName?.toLowerCase().includes(query)
+  )
+})
+
+// 格式化日期
+const formatDate = (dateString: string) => {
+  if (!dateString) return ''
+  const date = new Date(dateString)
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+// 获取申请状态类型
+const getRequestStatusType = (status: string) => {
+  switch (status) {
+    case 'PENDING':
+      return 'warning'
+    case 'APPROVED':
+      return 'success'
+    case 'REJECTED':
+      return 'danger'
+    case 'CANCELLED':
+      return 'info'
+    default:
+      return 'info'
+  }
+}
+
+// 获取申请状态文本
+const getRequestStatusText = (status: string) => {
+  switch (status) {
+    case 'PENDING':
+      return '待审核'
+    case 'APPROVED':
+      return '已批准'
+    case 'REJECTED':
+      return '已拒绝'
+    case 'CANCELLED':
+      return '已取消'
+    default:
+      return status
+  }
+}
+
+// 查看申请详情
+const viewRequestDetail = async (request: StoreChangeRequest) => {
+  selectedRequest.value = request
+  dialogVisible.value = true
+  processForm.AdminComment = ''
+  
+  // 加载原始店铺信息用于对比
+  try {
+    const response = await fetchStoreDetail(request.StoreID)
+    originalStore.value = response.data
+  } catch (error) {
+    console.error('Failed to load original store details:', error)
+    originalStore.value = null
+  }
+}
+
+// 处理申请状态变更
+const handleRequest = (request: StoreChangeRequest, status: 'APPROVED' | 'REJECTED') => {
+  viewRequestDetail(request)
+  
+  // 稍作延迟确保对话框已打开
+  setTimeout(() => {
+    ElMessageBox.confirm(
+      `确定要${status === 'APPROVED' ? '批准' : '拒绝'}这个变更申请吗？`,
+      '确认操作',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: status === 'APPROVED' ? 'success' : 'warning'
+      }
+    )
+      .then(() => {
+        processRequest(status)
+      })
+      .catch(() => {
+        // 用户取消操作
+      })
+  }, 300)
+}
+
+// 处理申请
+const processRequest = async (status: 'APPROVED' | 'REJECTED') => {
+  if (!selectedRequest.value) return
+  
+  processing.value = true
+  try {
+    const data: UpdateStoreChangeRequest = {
+      RequestStatus: status,
+      AdminComment: processForm.AdminComment
+    }
+    
+    await adminProcessStoreChangeRequest(selectedRequest.value.RequestID, data)
+    
+    ElMessage.success(`申请已${status === 'APPROVED' ? '批准' : '拒绝'}`)
+    dialogVisible.value = false
+    
+    // 重新加载申请列表
+    await loadChangeRequests()
+  } catch (error) {
+    console.error('Failed to process request:', error)
+    ElMessage.error('处理申请失败')
+  } finally {
+    processing.value = false
+  }
+}
+
+// 筛选变化
+const onFilterChange = () => {
+  currentPage.value = 1
+  loadChangeRequests()
+}
+
+// 页码变化
+const onPageChange = (page: number) => {
+  currentPage.value = page
+  loadChangeRequests()
+}
+
+// 每页数量变化
+const onPageSizeChange = (size: number) => {
+  pageSize.value = size
+  currentPage.value = 1
+  loadChangeRequests()
+}
+
+// 初始化
+onMounted(() => {
+  loadChangeRequests()
+})
+</script>
+
+<style scoped>
+.store-change-reviewer {
+  margin-bottom: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.loading-placeholder {
+  padding: 20px 0;
+}
+
+.filter-row {
+  display: flex;
+  margin-bottom: 20px;
+  gap: 15px;
+}
+
+.search-input {
+  width: 250px;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.request-detail {
+  margin-top: 10px;
+}
+
+.compare-section,
+.request-info,
+.process-form {
+  margin-bottom: 25px;
+}
+
+h3 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 15px;
+  border-bottom: 1px solid #ebeef5;
+  padding-bottom: 10px;
+}
+
+.compare-row {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.original,
+.changed {
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.highlight {
+  background-color: #fdf6ec;
+  border-left: 3px solid #e6a23c;
+}
+
+.text-content {
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin-top: 5px;
+}
+
+.image-preview {
+  margin-top: 10px;
+}
+
+.image-preview img {
+  max-width: 150px;
+  max-height: 150px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
+@media (max-width: 768px) {
+  .filter-row {
+    flex-direction: column;
+  }
+  
+  .search-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/frontend/src/components/dashboard/manage/StoreForm.vue b/src/frontend/src/components/dashboard/manage/StoreForm.vue
new file mode 100644
index 0000000..52d2b3d
--- /dev/null
+++ b/src/frontend/src/components/dashboard/manage/StoreForm.vue
@@ -0,0 +1,48 @@
+<template>
+    <el-form
+      :model="storeForm"
+      label-width="100px"
+      ref="storeFormRef"
+    >
+      <el-form-item
+        label="店铺名称"
+        prop="StoreName"
+        :rules="[{ required: true, message: '请输入店铺名称' }]"
+      >
+        <el-input v-model="storeForm.StoreName" />
+      </el-form-item>
+  
+      <el-form-item label="描述" prop="Description">
+        <el-input
+          v-model="storeForm.Description"
+          type="textarea"
+          :rows="3"
+        />
+      </el-form-item>
+  
+      <el-form-item label="Logo URL" prop="LogoURL">
+        <el-input v-model="storeForm.LogoURL" />
+      </el-form-item>
+  
+      <el-form-item label="状态" prop="StoreStatus">
+        <el-select
+          v-model="storeForm.StoreStatus"
+          placeholder="请选择状态"
+        >
+          <el-option label="营业中" value="ACTIVE" />
+          <el-option label="休息中" value="INACTIVE" />
+          <el-option label="已关闭" value="CLOSED" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </template>
+  
+  <script setup lang="ts">
+  import type { StoreDetail } from '@/api/store'
+  import { defineProps } from 'vue'
+  
+  const props = defineProps<{
+    storeForm: Partial<StoreDetail>
+    storeFormRef: any
+  }>()
+  </script>
\ No newline at end of file
diff --git a/src/frontend/src/components/dashboard/merchant/StoreEditor.vue b/src/frontend/src/components/dashboard/merchant/StoreEditor.vue
new file mode 100644
index 0000000..d7ab884
--- /dev/null
+++ b/src/frontend/src/components/dashboard/merchant/StoreEditor.vue
@@ -0,0 +1,428 @@
+<template>
+  <div class="store-editor">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <span>{{ isEdit ? '编辑店铺信息' : '店铺信息' }}</span>
+          <div>
+            <el-button 
+              v-if="!isEdit" 
+              type="primary" 
+              @click="startEdit"
+              :disabled="hasActiveChangeRequest"
+            >
+              {{ hasActiveChangeRequest ? '有待审核的变更申请' : '申请变更' }}
+            </el-button>
+            <template v-else>
+              <el-button @click="cancelEdit">取消</el-button>
+              <el-button type="primary" @click="submitChangeRequest" :loading="submitting">提交变更申请</el-button>
+            </template>
+          </div>
+        </div>
+      </template>
+      
+      <div v-if="loading" class="loading-placeholder">
+        <el-skeleton :rows="3" animated />
+      </div>
+      
+      <div v-else>
+        <el-form 
+          :model="form" 
+          :rules="rules" 
+          ref="formRef" 
+          label-width="120px" 
+          :disabled="!isEdit"
+        >
+          <el-form-item label="店铺名称" prop="StoreName">
+            <el-input v-model="form.StoreName" placeholder="请输入店铺名称" />
+          </el-form-item>
+          
+          <el-form-item label="店铺描述" prop="Description">
+            <el-input 
+              v-model="form.Description" 
+              type="textarea" 
+              :rows="4" 
+              placeholder="请输入店铺描述"
+            />
+          </el-form-item>
+          
+          <el-form-item label="Logo URL" prop="LogoURL">
+            <el-input v-model="form.LogoURL" placeholder="请输入店铺Logo URL" />
+            <div v-if="form.LogoURL" class="logo-preview">
+              <img :src="form.LogoURL" alt="店铺Logo预览" @error="handleImageError" />
+              <div v-if="imageError" class="image-error">图片加载失败，请检查URL是否有效</div>
+            </div>
+          </el-form-item>
+          
+          <el-form-item label="店铺状态">
+            <el-tag :type="storeStatusType">{{ storeStatusText }}</el-tag>
+            <div class="status-note">
+              <i class="el-icon-info"></i>
+              店铺状态变更需联系客服
+            </div>
+          </el-form-item>
+        </el-form>
+
+        <!-- 变更申请历史记录 -->
+        <div v-if="changeRequests.length > 0" class="change-requests-section">
+          <h3 class="section-title">变更申请历史</h3>
+          <el-table :data="changeRequests" style="width: 100%">
+            <el-table-column prop="RequestDate" label="申请日期" width="180">
+              <template #default="scope">
+                {{ formatDate(scope.row.RequestDate) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="RequestStatus" label="状态" width="120">
+              <template #default="scope">
+                <el-tag :type="getRequestStatusType(scope.row.RequestStatus)">
+                  {{ getRequestStatusText(scope.row.RequestStatus) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="AdminComment" label="管理员备注" />
+            <el-table-column label="操作" width="120">
+              <template #default="scope">
+                <el-button 
+                  type="danger" 
+                  size="small" 
+                  @click="cancelRequest(scope.row.RequestID)"
+                  :disabled="scope.row.RequestStatus !== 'PENDING'"
+                >
+                  取消
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { 
+  fetchStoreDetail, 
+  createStoreChangeRequest, 
+  fetchStoreChangeRequestsByStore, 
+  cancelStoreChangeRequest,
+  type StoreDetail, 
+  type StoreChangeRequest 
+} from '@/api/store'
+import { useUserStore } from '@/stores/user'
+
+const props = defineProps<{
+  storeId: number
+}>()
+
+const userStore = useUserStore()
+const formRef = ref<FormInstance>()
+const loading = ref(true)
+const submitting = ref(false)
+const isEdit = ref(false)
+const imageError = ref(false)
+const changeRequests = ref<StoreChangeRequest[]>([])
+
+// 表单数据
+const form = reactive({
+  StoreName: '',
+  Description: '',
+  LogoURL: '',
+  StoreStatus: 'ACTIVE' as 'ACTIVE' | 'INACTIVE' | 'CLOSED'
+})
+
+// 表单验证规则
+const rules = reactive<FormRules>({
+  StoreName: [
+    { required: true, message: '请输入店铺名称', trigger: 'blur' },
+    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
+  ],
+  Description: [
+    { max: 500, message: '长度不超过 500 个字符', trigger: 'blur' }
+  ],
+  LogoURL: [
+    { pattern: /^(https?:\/\/).*/, message: '请输入有效的 URL', trigger: 'blur' }
+  ]
+})
+
+// 原始店铺数据（用于比较变化）
+const originalStore = ref<StoreDetail | null>(null)
+
+// 加载店铺详情
+const loadStoreDetail = async () => {
+  loading.value = true
+  try {
+    const response = await fetchStoreDetail(props.storeId)
+    originalStore.value = response.data
+    
+    // 填充表单
+    form.StoreName = response.data.StoreName
+    form.Description = response.data.Description
+    form.LogoURL = response.data.LogoURL
+    form.StoreStatus = response.data.StoreStatus
+    
+    // 重置图片错误状态
+    imageError.value = false
+  } catch (error) {
+    console.error('Failed to load store details:', error)
+    ElMessage.error('加载店铺信息失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 加载变更请求历史
+const loadChangeRequests = async () => {
+  try {
+    const response = await fetchStoreChangeRequestsByStore(props.storeId)
+    changeRequests.value = response.data.Requests || []
+  } catch (error) {
+    console.error('Failed to load change requests:', error)
+    ElMessage.error('加载变更申请历史失败')
+  }
+}
+
+// 处理图片加载错误
+const handleImageError = () => {
+  imageError.value = true
+}
+
+// 格式化日期
+const formatDate = (dateString: string) => {
+  const date = new Date(dateString)
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+// 店铺状态类型和文本
+const storeStatusType = computed(() => {
+  switch (form.StoreStatus) {
+    case 'ACTIVE':
+      return 'success'
+    case 'INACTIVE':
+      return 'warning'
+    case 'CLOSED':
+      return 'danger'
+    default:
+      return 'info'
+  }
+})
+
+const storeStatusText = computed(() => {
+  switch (form.StoreStatus) {
+    case 'ACTIVE':
+      return '营业中'
+    case 'INACTIVE':
+      return '暂停营业'
+    case 'CLOSED':
+      return '已关闭'
+    default:
+      return form.StoreStatus
+  }
+})
+
+// 判断是否有活跃的变更申请
+const hasActiveChangeRequest = computed(() => {
+  return changeRequests.value.some(req => req.RequestStatus === 'PENDING')
+})
+
+// 获取申请状态类型
+const getRequestStatusType = (status: string) => {
+  switch (status) {
+    case 'PENDING':
+      return 'warning'
+    case 'APPROVED':
+      return 'success'
+    case 'REJECTED':
+      return 'danger'
+    case 'CANCELLED':
+      return 'info'
+    default:
+      return 'info'
+  }
+}
+
+// 获取申请状态文本
+const getRequestStatusText = (status: string) => {
+  switch (status) {
+    case 'PENDING':
+      return '待审核'
+    case 'APPROVED':
+      return '已批准'
+    case 'REJECTED':
+      return '已拒绝'
+    case 'CANCELLED':
+      return '已取消'
+    default:
+      return status
+  }
+}
+
+// 开始编辑
+const startEdit = () => {
+  isEdit.value = true
+}
+
+// 取消编辑
+const cancelEdit = () => {
+  ElMessageBox.confirm(
+    '确定要取消编辑吗？所有未保存的修改将会丢失。',
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }
+  )
+    .then(() => {
+      // 重置表单
+      if (originalStore.value) {
+        form.StoreName = originalStore.value.StoreName
+        form.Description = originalStore.value.Description
+        form.LogoURL = originalStore.value.LogoURL
+      }
+      isEdit.value = false
+      // 重置表单验证
+      formRef.value?.resetFields()
+    })
+    .catch(() => {
+      // 用户取消操作
+    })
+}
+
+// 提交变更申请
+const submitChangeRequest = async () => {
+  if (!formRef.value) return
+  
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      // 检查是否有变更
+      if (
+        originalStore.value &&
+        form.StoreName === originalStore.value.StoreName &&
+        form.Description === originalStore.value.Description &&
+        form.LogoURL === originalStore.value.LogoURL
+      ) {
+        ElMessage.warning('没有检测到任何变更')
+        return
+      }
+      
+      submitting.value = true
+      try {
+        await createStoreChangeRequest({
+          StoreID: props.storeId,
+          StoreName: form.StoreName,
+          Description: form.Description,
+          LogoURL: form.LogoURL
+        })
+        
+        ElMessage.success('变更申请已提交，请等待管理员审核')
+        isEdit.value = false
+        
+        // 重新加载变更请求历史
+        await loadChangeRequests()
+      } catch (error) {
+        console.error('Failed to submit change request:', error)
+        ElMessage.error('提交变更申请失败')
+      } finally {
+        submitting.value = false
+      }
+    } else {
+      ElMessage.error('请修正表单中的错误')
+    }
+  })
+}
+
+// 取消变更申请
+const cancelRequest = async (requestId: number) => {
+  try {
+    await ElMessageBox.confirm(
+      '确定要取消这个变更申请吗？',
+      '确认取消',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '返回',
+        type: 'warning'
+      }
+    )
+    
+    await cancelStoreChangeRequest(requestId)
+    ElMessage.success('变更申请已取消')
+    
+    // 重新加载变更请求历史
+    await loadChangeRequests()
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('Failed to cancel change request:', error)
+      ElMessage.error('取消变更申请失败')
+    }
+  }
+}
+
+// 初始化
+onMounted(async () => {
+  await Promise.all([
+    loadStoreDetail(),
+    loadChangeRequests()
+  ])
+})
+</script>
+
+<style scoped>
+.store-editor {
+  margin-bottom: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.loading-placeholder {
+  padding: 20px 0;
+}
+
+.logo-preview {
+  margin-top: 10px;
+  position: relative;
+}
+
+.logo-preview img {
+  max-width: 200px;
+  max-height: 200px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
+.image-error {
+  color: #f56c6c;
+  font-size: 12px;
+  margin-top: 5px;
+}
+
+.status-note {
+  margin-top: 5px;
+  color: #909399;
+  font-size: 12px;
+}
+
+.change-requests-section {
+  margin-top: 30px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 15px;
+  border-bottom: 1px solid #ebeef5;
+  padding-bottom: 10px;
+}
+</style>
diff --git a/src/frontend/src/views/Analysis/Dashboard.vue b/src/frontend/src/views/Analysis/Dashboard.vue
index 5b896b5..0e23c21 100644
--- a/src/frontend/src/views/Analysis/Dashboard.vue
+++ b/src/frontend/src/views/Analysis/Dashboard.vue
@@ -18,6 +18,7 @@ import {
 import General from '@/components/dashboard/General.vue'
 import OrderManage from '@/components/dashboard/OrderManage.vue'
 import StoreManagement from '@/components/dashboard/StoreManagement.vue'
+import StoreChangeRequests from '@/components/dashboard/StoreChangeRequests.vue'
 
 /** 菜单配置（icon 直接放组件） */
 const menus = [
@@ -38,6 +39,12 @@ const menus = [
     label: '店铺管理',
     icon: Shop,
     component: StoreManagement
+  },
+  {
+    index: 'store-request',
+    label: '店铺变更申请',
+    icon: Shop,
+    component: StoreChangeRequests
   }
 ]
 

From d1211759d5693be54a70b251c74fdcdb643bfbc6 Mon Sep 17 00:00:00 2001
From: Renyye <1457077123@qq.com>
Date: Sun, 25 May 2025 21:10:32 +0800
Subject: [PATCH 10/16] fix(frontend): shop & product manage

---
 src/frontend/src/api/store.ts                 | 131 +---
 src/frontend/src/api/storeRequest.ts          | 123 ++++
 .../src/components/cards/store_card.vue       |  23 +-
 .../dashboard/StoreChangeRequests.vue         | 441 -------------
 .../components/dashboard/StoreManagement.vue  | 586 ------------------
 .../dashboard/manage/order_manage_card.vue    | 211 -------
 .../dashboard/{ => merchant}/General.vue      |   0
 .../dashboard/{ => merchant}/OrderManage.vue  |   2 +-
 .../merchant/StoreChangeRequests.vue          |   0
 .../dashboard/merchant/StoreEditor.vue        | 428 -------------
 .../dashboard/merchant/StoreManagement.vue    | 467 ++++++++++++++
 .../orderManage}/OrderCard.vue                |   4 +-
 .../storeManage/ProductFormDialog.vue         |  60 ++
 .../merchant/storeManage/ProductListTable.vue |  38 ++
 .../storeManage/ProductManagementDialog.vue   |  66 ++
 .../merchant/storeManage/StockDialog.vue      |  46 ++
 .../storeManage}/StoreForm.vue                |   1 +
 .../merchant/storeManage/StoreFormDialog.vue  |  52 ++
 .../merchant/storeManage/StoreHeader.vue      |  19 +
 .../merchant/storeManage/StoreListTable.vue   |  38 ++
 src/frontend/src/router/index.js              |   2 +-
 .../{Analysis => DashBoard}/Dashboard.vue     |   8 +-
 src/openapi.json                              |   1 +
 23 files changed, 943 insertions(+), 1804 deletions(-)
 create mode 100644 src/frontend/src/api/storeRequest.ts
 delete mode 100644 src/frontend/src/components/dashboard/StoreChangeRequests.vue
 delete mode 100644 src/frontend/src/components/dashboard/StoreManagement.vue
 delete mode 100644 src/frontend/src/components/dashboard/manage/order_manage_card.vue
 rename src/frontend/src/components/dashboard/{ => merchant}/General.vue (100%)
 rename src/frontend/src/components/dashboard/{ => merchant}/OrderManage.vue (97%)
 create mode 100644 src/frontend/src/components/dashboard/merchant/StoreChangeRequests.vue
 delete mode 100644 src/frontend/src/components/dashboard/merchant/StoreEditor.vue
 create mode 100644 src/frontend/src/components/dashboard/merchant/StoreManagement.vue
 rename src/frontend/src/components/dashboard/{manage => merchant/orderManage}/OrderCard.vue (98%)
 create mode 100644 src/frontend/src/components/dashboard/merchant/storeManage/ProductFormDialog.vue
 create mode 100644 src/frontend/src/components/dashboard/merchant/storeManage/ProductListTable.vue
 create mode 100644 src/frontend/src/components/dashboard/merchant/storeManage/ProductManagementDialog.vue
 create mode 100644 src/frontend/src/components/dashboard/merchant/storeManage/StockDialog.vue
 rename src/frontend/src/components/dashboard/{manage => merchant/storeManage}/StoreForm.vue (95%)
 create mode 100644 src/frontend/src/components/dashboard/merchant/storeManage/StoreFormDialog.vue
 create mode 100644 src/frontend/src/components/dashboard/merchant/storeManage/StoreHeader.vue
 create mode 100644 src/frontend/src/components/dashboard/merchant/storeManage/StoreListTable.vue
 rename src/frontend/src/views/{Analysis => DashBoard}/Dashboard.vue (90%)
 create mode 100644 src/openapi.json

diff --git a/src/frontend/src/api/store.ts b/src/frontend/src/api/store.ts
index 658d05d..186dcf3 100644
--- a/src/frontend/src/api/store.ts
+++ b/src/frontend/src/api/store.ts
@@ -1,3 +1,4 @@
+// src/frontend/src/api/store.ts
 import axios from 'axios'
 
 /** 通用查询参数 */
@@ -18,7 +19,7 @@ export interface StoreSummary {
   OwnerUserID: number
   Description?: string
   LogoURL?: string
-  StoreStatus: 'ACTIVE' | 'INACTIVE' | 'CLOSED'
+  StoreStatus: 'ACTIVE' | 'INACTIVE_BY_MERCHANT' | 'SUSPENDED_BY_ADMIN' | 'CLOSED_PERMANENTLY_BY_ADMIN'
   CreationDate: string
   LastUpdatedDate: string
 }
@@ -34,11 +35,26 @@ export interface StoreDetail {
   OwnerUserID: number
   Description: string
   LogoURL: string
-  StoreStatus: 'ACTIVE' | 'INACTIVE' | 'CLOSED'
+  StoreStatus: 'ACTIVE' | 'INACTIVE_BY_MERCHANT' | 'SUSPENDED_BY_ADMIN' | 'CLOSED_PERMANENTLY_BY_ADMIN'
   CreationDate: string
   LastUpdatedDate: string
 }
 
+// 店铺状态映射
+export const getStatusType = (status) => ({
+  ACTIVE: 'success',
+  INACTIVE_BY_MERCHANT: 'warning',
+  SUSPENDED_BY_ADMIN: 'danger',
+  CLOSED_PERMANENTLY_BY_ADMIN: 'info'
+}[status] || 'info')
+
+export const translateStatus = (status) => ({
+  ACTIVE: '营业中',
+  INACTIVE_BY_MERCHANT: '商家休息',
+  SUSPENDED_BY_ADMIN: '被平台禁用',
+  CLOSED_PERMANENTLY_BY_ADMIN: '永久关闭'
+}[status] || status)
+
 /** 分页／筛选获取商铺列表 */
 export const fetchStoreList = (params: StoreParams = {}) =>
   axios.get<StoreListResponse>('/store/list-full', { params })
@@ -55,114 +71,3 @@ export const fetchStoresByOwner = (ownerUserId: number) =>
   axios.get<StoreListResponse>(`/store/owner/${ownerUserId}`)
 
 
-/** ========== 变更申请（审批流） ========== */
-
-/** 审批流中的变更申请记录 */
-export interface StoreChangeRequest {
-  RequestID: number
-  StoreID: number
-  UserID: number
-  StoreName?: string
-  Description?: string
-  LogoURL?: string
-  RequestStatus: 'PENDING' | 'APPROVED' | 'REJECTED' | 'CANCELLED'
-  AdminComment?: string
-  RequestDate: string
-  ProcessDate?: string
-  ProcessedByUserID?: number
-}
-
-export interface StoreChangeRequestFilter {
-  status?: 'PENDING' | 'APPROVED' | 'REJECTED' | 'CANCELLED'
-  store_id?: number
-  user_id?: number
-  page?: number
-  page_size?: number
-}
-
-export interface StoreChangeRequestListResponse {
-  Count: number
-  Requests: StoreChangeRequest[]
-}
-
-/** 用于提交审批流的变更申请 */
-export interface StoreChangeCreate {
-  RequestingUserID: number
-  RequestType: 'STORE_CREATE' | 'STORE_UPDATE'
-  ProposedData_JSON: {
-    StoreName?: string
-    Description?: string
-    LogoURL?: string
-    StoreStatus?: 'ACTIVE' | 'INACTIVE' | 'CLOSED'
-  }
-  SubmitterNotes?: string
-  StoreID?: number    // RequestType=STORE_UPDATE 时必填
-}
-
-/** 提交新建或更新商铺的变更申请 */
-export const createStoreChangeRequest = (data: StoreChangeCreate) =>
-  axios.post('/store-change', data)
-
-/** 获取变更申请列表（可按状态／商铺／用户筛选） */
-export const fetchStoreChangeRequests = (params: StoreChangeRequestFilter = {}) =>
-  axios.get<StoreChangeRequestListResponse>('/store-change', { params })
-
-/** 获取单个变更申请详情 */
-export const fetchStoreChangeRequestDetail = (requestId: number) =>
-  axios.get<StoreChangeRequest>(`/store-change/${requestId}`)
-
-/** 更新审批流中的变更申请（管理员操作） */
-export interface StoreChangeAdminUpdate {
-  AdminComment?: string
-  RequestStatus: 'APPROVED' | 'REJECTED' | 'CANCELLED'
-}
-
-/** 用于用户更新自己的变更申请 */
-export interface UpdateStoreChangeRequest {
-  RequestType?: 'STORE_CREATE' | 'STORE_UPDATE'
-  ProposedData_JSON?: {
-    StoreName?: string
-    Description?: string
-    LogoURL?: string
-    StoreStatus?: 'ACTIVE' | 'INACTIVE' | 'CLOSED'
-  }
-  Status?: 'PENDING_APPROVAL'
-  SubmitterNotes?: string
-}
-
-/** 管理员处理变更申请 */
-export const adminProcessStoreChangeRequest = (
-  requestId: number,
-  data: StoreChangeAdminUpdate
-) => axios.put(`/store-change/${requestId}/admin`, data)
-
-/** 用户更新自己的变更申请 */
-export const updateStoreChangeRequest = (
-  requestId: number,
-  data: UpdateStoreChangeRequest
-) => axios.put(`/store-change/${requestId}`, data)
-
-/** 取消自己提交的变更申请 */
-export const cancelStoreChangeRequest = (requestId: number) =>
-  axios.delete(`/store-change/${requestId}`)
-
-/** 按商铺／用户拉取所有变更申请 */
-export const fetchStoreChangeRequestsByStore = (
-  storeId: number,
-  params: StoreChangeRequestFilter = {}
-) => axios.get<StoreChangeRequestListResponse>(
-  `/store-change/by-store/${storeId}`, { params }
-)
-
-export const fetchStoreChangeRequestsByUser = (
-  userId: number,
-  params: StoreChangeRequestFilter = {}
-) => axios.get<StoreChangeRequestListResponse>(
-  `/store-change/by-user/${userId}`, { params }
-)
-
-/** 管理端获取所有待审批申请 */
-export const fetchPendingStoreChangeRequests = (
-  params: StoreChangeRequestFilter = {}
-) =>
-  axios.get<StoreChangeRequestListResponse>('/store-change/admin/pending', { params })
diff --git a/src/frontend/src/api/storeRequest.ts b/src/frontend/src/api/storeRequest.ts
new file mode 100644
index 0000000..ab6eb28
--- /dev/null
+++ b/src/frontend/src/api/storeRequest.ts
@@ -0,0 +1,123 @@
+// src/frontend/src/api/storeRequest.ts
+import axios from 'axios'
+
+/** ========== 变更申请（审批流） ========== */
+
+/** 审批流中的变更申请记录 */
+export interface StoreChangeRequest {
+    RequestID: number
+    StoreID: number
+    UserID: number
+    StoreName?: string
+    Description?: string
+    LogoURL?: string
+    RequestStatus: 'PENDING' | 'APPROVED' | 'REJECTED' | 'CANCELLED'
+    AdminComment?: string
+    RequestDate: string
+    ProcessDate?: string
+    ProcessedByUserID?: number
+  }
+  
+  export interface StoreChangeRequestFilter {
+    RequestType?: 'STORE_CREATE' | 'STORE_UPDATE' | 'STORE_DELETE'
+    StoreID?: number
+    MerchantUserID?: number
+    Status?: ('PENDING' | 'APPROVED' | 'REJECTED' | 'CANCELLED')[]
+  }
+  
+  export interface StoreChangeRequestListResponse {
+    Count: number
+    Requests: StoreChangeRequest[]
+  }
+  
+  /** 用于提交审批流的变更申请 */
+  export interface StoreChangeCreate {
+    RequestingUserID: number
+    RequestType: 'STORE_CREATE' | 'STORE_UPDATE'
+    ProposedData_JSON: {
+      StoreName?: string
+      Description?: string
+      LogoURL?: string
+      StoreStatus?: 'ACTIVE' | 'INACTIVE_BY_MERCHANT' | 'SUSPENDED_BY_ADMIN' | 'CLOSED_PERMANENTLY_BY_ADMIN'
+    }
+    SubmitterNotes?: string
+    StoreID?: number    // RequestType=STORE_UPDATE 时必填
+  }
+  
+  /** 提交新建或更新商铺的变更申请 */
+  export const createStoreChangeRequest = (data: StoreChangeCreate) =>
+    axios.post('/store-change-new/', data)
+  
+  /** 获取变更申请列表（可按状态／商铺／用户筛选） */
+  export const fetchStoreChangeRequests = (
+    params: StoreChangeRequestFilter = {}
+  ) => {
+    const { Status, ...queryParams } = params
+    return axios.request<StoreChangeRequestListResponse>({
+        method: 'get',
+        url: '/store-change-new/list/',
+        params: queryParams,
+        data: { Status },
+    })
+  }
+  
+  /** 获取单个变更申请详情 */
+  export const fetchStoreChangeRequestDetail = (requestId: number) =>
+    axios.get<StoreChangeRequest>(`/store-change-new/${requestId}`)
+  
+  /** 更新审批流中的变更申请（管理员操作） */
+  export interface StoreChangeAdminUpdate {
+    AdminComment?: string
+    RequestStatus: 'APPROVED' | 'REJECTED' | 'CANCELLED'
+  }
+  
+  /** 用于用户更新自己的变更申请 */
+  export interface UpdateStoreChangeRequest {
+    RequestType?: 'STORE_CREATE' | 'STORE_UPDATE'
+    ProposedData_JSON?: {
+      StoreName?: string
+      Description?: string
+      LogoURL?: string
+      StoreStatus?: 'ACTIVE' | 'INACTIVE_BY_MERCHANT' | 'SUSPENDED_BY_ADMIN' | 'CLOSED_PERMANENTLY_BY_ADMIN'
+    }
+    Status?: 'PENDING_APPROVAL'
+    SubmitterNotes?: string
+  }
+  
+  /** 管理员处理变更申请 */
+  export const adminProcessStoreChangeRequest = (
+    requestId: number,
+    data: StoreChangeAdminUpdate
+  ) => axios.put(`/store-change-new/${requestId}/review/`, data)
+  
+  /** 用户更新自己的变更申请 */
+  export const updateStoreChangeRequest = (
+    requestId: number,
+    data: UpdateStoreChangeRequest
+  ) => axios.put(`/store-change-new/${requestId}`, data)
+  
+  /** 取消自己提交的变更申请 */
+  export const cancelStoreChangeRequest = (requestId: number) =>
+    axios.delete(`/store-change-new/${requestId}`)
+  
+  /** 商家获取店铺变更请求列表（支持请求体 Status） */
+  export const fetchStoreChangeRequestsByMerchant = (params: StoreChangeRequestFilter = {}) => {
+    const { Status, ...queryParams } = params
+    return axios.request<StoreChangeRequestListResponse>({
+        method: 'get',
+        url: '/store-change-new/list/',
+        params: queryParams,
+        data: { Status },
+    })
+  }
+  
+  /** 管理员获取店铺变更请求列表（支持请求体 Status） */
+  export const fetchAdminStoreChangeRequests = (params: StoreChangeRequestFilter = {}) => {
+    const { Status, ...queryParams } = params
+    return axios.request<StoreChangeRequestListResponse>({
+        method: 'get',
+        url: '/store-change-new/list-admin/',
+        params: queryParams,
+        data: { Status },
+    })
+  }
diff --git a/src/frontend/src/components/cards/store_card.vue b/src/frontend/src/components/cards/store_card.vue
index 80c057b..a08d369 100644
--- a/src/frontend/src/components/cards/store_card.vue
+++ b/src/frontend/src/components/cards/store_card.vue
@@ -72,7 +72,7 @@ const storeLogo = computed(() =>
 const storeName = computed(() => props.store.StoreName);
 const storeStatus = computed(() => props.store.StoreStatus);
 const storeCreationDate = computed(() => props.store.CreationDate);
-const storeProductCount = computed(() => props.store.ProductCount || 0);
+const storeProductCount = computed(() => props.store.productCount || 0);
 
 const formatDate = (d: string) =>
   new Date(d).toLocaleDateString('zh-CN', {
@@ -81,23 +81,10 @@ const formatDate = (d: string) =>
     day: 'numeric'
   });
 
-const statusType = computed(() => {
-  switch (storeStatus.value) {
-    case 'ACTIVE': return 'success';
-    case 'INACTIVE': return 'warning';
-    case 'CLOSED': return 'danger';
-    default: return 'info';
-  }
-});
 
-const statusLabel = computed(() => {
-  switch (storeStatus.value) {
-    case 'ACTIVE': return '营业中';
-    case 'INACTIVE': return '暂停营业';
-    case 'CLOSED': return '已关闭';
-    default: return storeStatus.value;
-  }
-});
+import { getStatusType, translateStatus } from '@/api/store'
+const statusType = computed(() => getStatusType(storeStatus.value));
+const statusLabel = computed(() => translateStatus(storeStatus.value));
 
 const truncatedDescription = computed(() => {
   const desc = props.store.Description || '';
@@ -183,6 +170,7 @@ const navigateToStore = () => {
   line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -218,6 +206,7 @@ const navigateToStore = () => {
   .store-description {
     font-size: 13px;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
   }
 }
 </style>
diff --git a/src/frontend/src/components/dashboard/StoreChangeRequests.vue b/src/frontend/src/components/dashboard/StoreChangeRequests.vue
deleted file mode 100644
index d4285d0..0000000
--- a/src/frontend/src/components/dashboard/StoreChangeRequests.vue
+++ /dev/null
@@ -1,441 +0,0 @@
-
-<template>
-    <div class="store-change-req">
-      <!-- 📌 Header & Filters -->
-      <div class="header-bar">
-        <h2>店铺变更申请</h2>
-        <el-button
-          v-if="!isAdmin"
-          type="primary"
-          @click="openCreateDialog"
-        >
-          新建申请
-        </el-button>
-        <div class="filters">
-          <el-select v-model="filters.status" placeholder="全部状态" clearable style="width: 140px">
-            <el-option label="待审核"  value="PENDING"    />
-            <el-option label="已批准"  value="APPROVED"   />
-            <el-option label="已拒绝"  value="REJECTED"   />
-            <el-option label="已取消"  value="CANCELLED"  />
-          </el-select>
-          <el-input
-            v-if="isAdmin"
-            v-model.number="filters.store_id"
-            placeholder="店铺ID"
-            style="width: 160px"
-            clearable
-          />
-          <el-button @click="fetchRequests" :loading="loading">
-            <el-icon><Search /></el-icon>
-          </el-button>
-        </div>
-      </div>
-  
-      <!-- 📄 Request List -->
-      <el-table
-        :data="requests"
-        v-loading="loading"
-        border
-        style="width: 100%"
-        row-key="RequestID"
-      >
-        <el-table-column prop="RequestID" label="ID" width="80" />
-        <el-table-column prop="StoreID" label="店铺ID" width="100" />
-        <el-table-column prop="StoreName" label="店铺名称" min-width="160" />
-        <el-table-column prop="RequestType" label="类型" width="140" />
-        <el-table-column prop="RequestStatus" label="状态" width="120">
-          <template #default="{ row }">
-            <el-tag :type="statusTagType(row.RequestStatus)">
-              {{ transStatus(row.RequestStatus) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="RequestDate" label="提交时间" width="180" />
-        <el-table-column label="操作" width="220">
-          <template #default="{ row }">
-            <el-button size="small" @click="openDetailDialog(row)">详情</el-button>
-            <el-button
-              v-if="!isAdmin && row.RequestStatus === 'PENDING'"
-              size="small"
-              @click="openEditDialog(row)"
-            >编辑</el-button>
-            <el-button
-              v-if="!isAdmin && row.RequestStatus === 'PENDING'"
-              size="small"
-              type="danger"
-              @click="cancelRequest(row)"
-            >取消</el-button>
-            <template v-if="isAdmin && row.RequestStatus === 'PENDING'">
-              <el-button size="small" type="success" @click="processRequest(row, 'APPROVED')">批准</el-button>
-              <el-button size="small" type="warning" @click="processRequest(row, 'REJECTED')">拒绝</el-button>
-            </template>
-          </template>
-        </el-table-column>
-      </el-table>
-  
-      <!-- ➕  创建 / 编辑对话框  -->
-      <el-dialog
-        v-model="showFormDialog"
-        :title="editingReq ? '编辑申请' : '新建申请'"
-        width="600px"
-        @close="resetForm"
-      >
-        <el-form :model="form" ref="formRef" label-width="120px">
-          <el-form-item label="店铺" prop="StoreID" :rules="storeRules">
-            <el-select v-model="form.StoreID" placeholder="请选择店铺" filterable>
-              <el-option
-                v-for="s in myStores"
-                :key="s.StoreID"
-                :label="`${s.StoreName} (#${s.StoreID})`"
-                :value="s.StoreID"
-              />
-            </el-select>
-          </el-form-item>
-  
-          <el-form-item label="拟变更名称" prop="StoreName">
-            <el-input v-model="form.StoreName" placeholder="留空则不修改" />
-          </el-form-item>
-          <el-form-item label="拟变更描述" prop="Description">
-            <el-input v-model="form.Description" type="textarea" rows="3" placeholder="留空则不修改" />
-          </el-form-item>
-          <el-form-item label="拟变更 Logo URL" prop="LogoURL">
-            <el-input v-model="form.LogoURL" placeholder="留空则不修改" />
-          </el-form-item>
-          <el-form-item label="提交备注" prop="SubmitterNotes">
-            <el-input v-model="form.SubmitterNotes" type="textarea" rows="2" />
-          </el-form-item>
-        </el-form>
-  
-        <template #footer>
-          <el-button @click="showFormDialog = false">取消</el-button>
-          <el-button type="primary" @click="submitForm" :loading="savingForm">保存</el-button>
-        </template>
-      </el-dialog>
-  
-      <!-- 🗂  详情 / 审核对话框 -->
-      <el-dialog
-        v-model="showDetailDialog"
-        title="申请详情"
-        width="640px"
-      >
-        <el-descriptions :column="1" border>
-          <el-descriptions-item label="ID">{{ detail?.RequestID }}</el-descriptions-item>
-          <el-descriptions-item label="店铺">{{ detail?.StoreName }} (ID={{ detail?.StoreID }})</el-descriptions-item>
-          <el-descriptions-item label="申请人">{{ detail?.UserID }}</el-descriptions-item>
-          <el-descriptions-item label="类型">{{ detail?.RequestType }}</el-descriptions-item>
-          <el-descriptions-item label="状态">
-            <el-tag :type="statusTagType(detail?.RequestStatus)">
-              {{ transStatus(detail?.RequestStatus) }}
-            </el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="提交时间">{{ detail?.RequestDate }}</el-descriptions-item>
-          <el-descriptions-item label="处理时间">{{ detail?.ProcessDate || '-' }}</el-descriptions-item>
-          <el-descriptions-item label="管理员备注">{{ detail?.AdminComment || '-' }}</el-descriptions-item>
-          <el-descriptions-item label="提交备注">{{ detail?.SubmitterNotes || '-' }}</el-descriptions-item>
-        </el-descriptions>
-  
-        <!-- Admin quick action -->
-        <template v-if="isAdmin && detail && detail.RequestStatus === 'PENDING'" #footer>
-          <el-input
-            v-model="adminAction.comment"
-            placeholder="审核意见，可选"
-            type="textarea"
-            rows="2"
-            style="flex:1; margin-right: 12px"
-          />
-          <el-button type="danger" @click="processDetail('REJECTED')" :loading="processingDetail">拒绝</el-button>
-          <el-button type="success" @click="processDetail('APPROVED')" :loading="processingDetail">批准</el-button>
-        </template>
-      </el-dialog>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, reactive, computed, onMounted } from 'vue'
-  import { ElMessage, ElMessageBox } from 'element-plus'
-  import { Search } from '@element-plus/icons-vue'
-  
-  // API helpers
-  import {
-    createStoreChangeRequest,
-    fetchStoreChangeRequests,
-    fetchPendingStoreChangeRequests,
-    fetchStoreChangeRequestDetail,
-    updateStoreChangeRequest,
-    cancelStoreChangeRequest,
-    adminProcessStoreChangeRequest,
-    fetchStoreChangeRequestsByUser
-  } from '@/api/store'
-  import { fetchCurrentUser } from '@/api/user'
-  import { fetchStoresByOwner } from '@/api/store'
-  import type {
-    StoreChangeRequest,
-    StoreChangeRequestFilter,
-    StoreChangeCreate,
-    UpdateStoreChangeRequest,
-    StoreDetail
-  } from '@/api/store'
-  
-  /* --------------------------------------------------
-   * reactive state
-   * -------------------------------------------------- */
-  const isAdmin = ref(false)
-  const currentUserId = ref<number | null>(null)
-  
-  const loading = ref(false)
-  const requests = ref<StoreChangeRequest[]>([])
-  
-  const filters = reactive<StoreChangeRequestFilter>({ status: undefined })
-  
-  /* ----------  create / edit form  ---------- */
-  const showFormDialog = ref(false)
-  const editingReq = ref<StoreChangeRequest | null>(null)
-  const savingForm = ref(false)
-  // 编辑表单字段
-  const form = reactive<{
-    StoreID: number
-    StoreName: string
-    Description: string
-    LogoURL: string
-    SubmitterNotes?: string
-  }>({
-    StoreID: 0,
-    StoreName: '',
-    Description: '',
-    LogoURL: '',
-    SubmitterNotes: ''
-  })
-  const formRef = ref()
-  
-  /* ----------  detail / process  ---------- */
-  const showDetailDialog = ref(false)
-  const detail = ref<StoreChangeRequest | null>(null)
-  const processingDetail = ref(false)
-  const adminAction = reactive({ comment: '' })
-  
-  /* ----------  merchant store list  ---------- */
-  const myStores = ref<StoreDetail[]>([])
-  
-  /* --------------------------------------------------
-   * helpers
-   * -------------------------------------------------- */
-  const statusTagType = (status?: string) => ({
-    PENDING: 'warning',
-    APPROVED: 'success',
-    REJECTED: 'danger',
-    CANCELLED: 'info'
-  }[status as string] || 'info')
-  
-  const transStatus = (status?: string) => ({
-    PENDING: '待审核',
-    APPROVED: '已批准',
-    REJECTED: '已拒绝',
-    CANCELLED: '已取消'
-  }[status as string] || status)
-  
-  const storeRules = [{ required: true, message: '请选择店铺' }]
-  
-  /* --------------------------------------------------
-   * data fetching
-   * -------------------------------------------------- */
-  const fetchRequests = async () => {
-    loading.value = true
-    try {
-      let res;
-      if (isAdmin.value) {
-        res = await fetchPendingStoreChangeRequests({ ...filters })
-      } else {
-        // 对于普通用户，使用 by-user 接口获取自己的申请
-        if (!currentUserId.value) {
-          throw new Error('用户ID未获取')
-        }
-        res = await fetchStoreChangeRequestsByUser(currentUserId.value, { ...filters })
-      }
-      requests.value = res.data.Requests
-    } catch (err) {
-      console.error('拉取申请列表失败', err)
-      ElMessage.error('获取申请列表失败')
-    } finally {
-      loading.value = false
-    }
-  }
-  
-  const fetchUserAndStores = async () => {
-    const userRes = await fetchCurrentUser()
-    currentUserId.value = userRes.data.UserID
-    isAdmin.value = !!userRes.data.IsAdmin
-    if (!isAdmin.value) {
-      const storeRes = await fetchStoresByOwner(currentUserId.value)
-      myStores.value = storeRes.data.StoreList
-    }
-  }
-  
-  /* --------------------------------------------------
-   * create / edit workflow
-   * -------------------------------------------------- */
-  const openCreateDialog = () => {
-    editingReq.value = null
-    Object.assign(form, {
-      StoreID: 0,
-      StoreName: '',
-      Description: '',
-      LogoURL: '',
-      SubmitterNotes: ''
-    })
-    showFormDialog.value = true
-  }
-  
-  const openEditDialog = (row: StoreChangeRequest) => {
-    editingReq.value = row
-    Object.assign(form, {
-      StoreID: row.StoreID,
-      StoreName: row.StoreName ?? '',
-      Description: row.Description ?? '',
-      LogoURL: row.LogoURL ?? '',
-      SubmitterNotes: ''
-    })
-    showFormDialog.value = true
-  }
-  
-  const resetForm = () => {
-    editingReq.value = null
-    Object.assign(form, {
-      StoreID: 0,
-      StoreName: '',
-      Description: '',
-      LogoURL: '',
-      SubmitterNotes: ''
-    })
-  }
-  
-  const submitForm = async () => {
-    // @ts-ignore – simple validate
-    await formRef.value?.validate()
-    savingForm.value = true
-    try {
-      if (editingReq.value) {
-        // 更新已有申请 (只有申请者自己能更新)
-        const updatePayload: UpdateStoreChangeRequest = {
-          ProposedData_JSON: {
-            StoreName: form.StoreName || undefined,
-            Description: form.Description || undefined,
-            LogoURL: form.LogoURL || undefined
-          },
-          SubmitterNotes: form.SubmitterNotes
-        }
-        await updateStoreChangeRequest(editingReq.value.RequestID, updatePayload)
-        ElMessage.success('更新成功')
-      } else {
-        // 创建新申请
-        const createPayload: StoreChangeCreate = {
-          RequestingUserID: currentUserId.value as number,
-          RequestType: 'STORE_UPDATE',
-          StoreID: form.StoreID,
-          ProposedData_JSON: {
-            StoreName: form.StoreName || undefined,
-            Description: form.Description || undefined,
-            LogoURL: form.LogoURL || undefined
-          },
-          SubmitterNotes: form.SubmitterNotes
-        }
-        await createStoreChangeRequest(createPayload)
-        ElMessage.success('创建成功，等待审核')
-      }
-      showFormDialog.value = false
-      fetchRequests()
-    } catch (err) {
-      console.error('保存失败', err)
-      ElMessage.error('保存失败')
-    } finally {
-      savingForm.value = false
-    }
-  }
-  
-  /* --------------------------------------------------
-   * detail / audit workflow
-   * -------------------------------------------------- */
-  const openDetailDialog = async (row: StoreChangeRequest) => {
-    showDetailDialog.value = true
-    detail.value = null
-    try {
-      const res = await fetchStoreChangeRequestDetail(row.RequestID)
-      detail.value = res.data
-    } catch (err) {
-      console.error('获取详情失败', err)
-      ElMessage.error('获取详情失败')
-    }
-  }
-  
-  const processDetail = async (action: 'APPROVED' | 'REJECTED') => {
-    if (!detail.value) return
-    processingDetail.value = true
-    try {
-      await adminProcessStoreChangeRequest(detail.value.RequestID, {
-        RequestStatus: action,
-        AdminComment: adminAction.comment || undefined
-      })
-      ElMessage.success(action === 'APPROVED' ? '已批准' : '已拒绝')
-      showDetailDialog.value = false
-      fetchRequests()
-    } catch (err) {
-      console.error('处理失败', err)
-      ElMessage.error('处理失败')
-    } finally {
-      processingDetail.value = false
-    }
-  }
-  
-  const processRequest = async (row: StoreChangeRequest, action: 'APPROVED' | 'REJECTED') => {
-    try {
-      await ElMessageBox.confirm(`确认要将申请 #${row.RequestID} 标记为“${action === 'APPROVED' ? '批准' : '拒绝'}”吗？`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: action === 'APPROVED' ? 'success' : 'warning'
-      })
-      await adminProcessStoreChangeRequest(row.RequestID, { RequestStatus: action })
-      ElMessage.success('操作成功')
-      fetchRequests()
-    } catch { /* cancelled */ }
-  }
-  
-  const cancelRequest = async (row: StoreChangeRequest) => {
-    try {
-      await ElMessageBox.confirm('确定取消该申请？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-      await cancelStoreChangeRequest(row.RequestID)
-      ElMessage.success('已取消')
-      fetchRequests()
-    } catch { /* user cancel */ }
-  }
-  
-  /* --------------------------------------------------
-   * lifecycle
-   * -------------------------------------------------- */
-  onMounted(async () => {
-    await fetchUserAndStores()
-    await fetchRequests()
-  })
-  </script>
-  
-  <style scoped>
-  .store-change-req {
-    padding: 20px;
-    background: #fff;
-    border-radius: 4px;
-  }
-  .header-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-  }
-  .filters {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-  }
-  </style>
-  
\ No newline at end of file
diff --git a/src/frontend/src/components/dashboard/StoreManagement.vue b/src/frontend/src/components/dashboard/StoreManagement.vue
deleted file mode 100644
index eda3a98..0000000
--- a/src/frontend/src/components/dashboard/StoreManagement.vue
+++ /dev/null
@@ -1,586 +0,0 @@
-<template>
-  <div class="store-management">
-    <!-- Header -->
-    <div class="header">
-      <h2>店铺管理</h2>
-      <el-button type="primary" @click="openAddDialog()">新增店铺</el-button>
-    </div>
-
-    <!-- 店铺列表 -->
-    <el-table :data="stores" v-loading="loading" row-key="StoreID" style="width:100%">
-      <el-table-column prop="StoreID" label="店铺ID" width="100" />
-      <el-table-column prop="StoreName" label="店铺名称" />
-      <el-table-column prop="Description" label="描述" />
-      <el-table-column prop="StoreStatus" label="状态" width="120">
-        <template #default="{ row }">
-          <el-tag :type="getStatusType(row.StoreStatus)">{{ translateStatus(row.StoreStatus) }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="220">
-        <template #default="{ row }">
-          <el-button size="small" @click="editStore(row)">编辑</el-button>
-          <el-button size="small" type="primary" @click="manageProducts(row.StoreID)">管理商品</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 新增/编辑店铺对话框 -->
-    <el-dialog v-model="showStoreDialog" :title="editingStore ? '编辑店铺' : '新增店铺'" width="500px" @close="resetStoreForm">
-      <StoreForm :storeForm="storeForm" :storeFormRef="storeFormRef" />
-      <template #footer>
-        <el-button @click="showStoreDialog = false">取消</el-button>
-        <el-button type="primary" @click="saveStore" :loading="saving">提交申请</el-button>
-      </template>
-    </el-dialog>
-    
-    <!-- 商品管理对话框 -->
-    <el-dialog
-      v-model="showProductsDialog"
-      :title="`${currentStore?.StoreName || ''} - 商品管理`"
-      width="80%"
-      :fullscreen="isMobile"
-    >
-      <div class="products-dialog-header">
-        <el-button type="primary" @click="openAddProductDialog">
-          添加商品
-        </el-button>
-        <el-input
-          v-model="productSearchQuery"
-          placeholder="搜索商品"
-          style="width: 250px"
-          clearable
-          @clear="fetchStoreProducts"
-        >
-          <template #append>
-            <el-button @click="fetchStoreProducts">
-              <el-icon><Search /></el-icon>
-            </el-button>
-          </template>
-        </el-input>
-      </div>
-      
-      <!-- 商品列表 -->
-      <el-table
-        :data="products"
-        style="width: 100%"
-        v-loading="loadingProducts"
-        border
-      >
-        <el-table-column prop="ProductID" label="ID" width="80" />
-        <el-table-column label="商品图片" width="120">
-          <template #default="{ row }">
-            <el-image
-              v-if="row.MainImageURL"
-              :src="row.MainImageURL"
-              style="width: 80px; height: 80px"
-              fit="cover"
-              :preview-src-list="[row.MainImageURL]"
-            />
-            <div v-else class="no-image">无图片</div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="ProductName" label="商品名称" min-width="180" />
-        <el-table-column prop="Price" label="价格" width="100">
-          <template #default="{ row }">
-            ¥{{ row.Price }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="StockQuantity" label="库存" width="100" />
-        <el-table-column prop="ProductStatus" label="状态" width="120">
-          <template #default="{ row }">
-            <el-tag :type="getProductStatusType(row.ProductStatus)">
-              {{ translateProductStatus(row.ProductStatus) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="180">
-          <template #default="{ row }">
-            <el-button size="small" @click="editProduct(row)">编辑</el-button>
-            <el-button size="small" type="primary" @click="updateProductStock(row)">
-              更新库存
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-dialog>
-    
-    <!-- 添加/编辑商品对话框 -->
-    <el-dialog
-      v-model="showProductDialog"
-      :title="editingProduct ? '编辑商品' : '添加商品'"
-      width="500px"
-      @close="resetProductForm"
-    >
-      <el-form :model="productForm" label-width="100px" ref="productFormRef">
-        <el-form-item
-          label="商品名称"
-          prop="ProductName"
-          :rules="[{ required: true, message: '请输入商品名称' }]"
-        >
-          <el-input v-model="productForm.ProductName" />
-        </el-form-item>
-        <el-form-item
-          label="价格"
-          prop="Price"
-          :rules="[{ required: true, message: '请输入价格' }]"
-        >
-          <el-input-number v-model="productForm.Price" :min="0" :precision="2" :step="0.1" style="width: 100%" />
-        </el-form-item>
-        <el-form-item
-          label="库存"
-          prop="StockQuantity"
-        >
-          <el-input-number v-model="productForm.StockQuantity" :min="0" :step="1" style="width: 100%" />
-        </el-form-item>
-        <el-form-item
-          label="分类"
-          prop="CategoryID"
-          :rules="[{ required: true, message: '请选择分类' }]"
-        >
-          <el-select v-model="productForm.CategoryID" placeholder="请选择分类" style="width: 100%">
-            <el-option
-              v-for="category in categories"
-              :key="category.CategoryID"
-              :label="category.CategoryName"
-              :value="category.CategoryID"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="描述" prop="ProductDescription">
-          <el-input v-model="productForm.ProductDescription" type="textarea" :rows="3" />
-        </el-form-item>
-        <el-form-item label="图片URL" prop="MainImageURL">
-          <el-input v-model="productForm.MainImageURL" />
-        </el-form-item>
-        <el-form-item label="状态" prop="ProductStatus">
-          <el-select v-model="productForm.ProductStatus" placeholder="请选择状态" style="width: 100%">
-            <el-option label="上架" value="ACTIVE" />
-            <el-option label="下架" value="INACTIVE_BY_MERCHANT" />
-            <el-option label="已停产" value="DISCONTINUED" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="showProductDialog = false">取消</el-button>
-        <el-button type="primary" @click="saveProduct" :loading="savingProduct">保存</el-button>
-      </template>
-    </el-dialog>
-    
-    <!-- 更新库存对话框 -->
-    <el-dialog
-      v-model="showStockDialog"
-      title="更新商品库存"
-      width="400px"
-    >
-      <el-form :model="stockForm" label-width="140px">
-        <el-form-item label="商品名称">
-          <span>{{ editingProduct?.ProductName }}</span>
-        </el-form-item>
-        <el-form-item label="当前库存">
-          <span>{{ editingProduct?.StockQuantity }}</span>
-        </el-form-item>
-        <el-form-item label="库存变化量" prop="stockChange">
-          <el-input-number v-model="stockForm.stockChange" :min="-1000" :max="1000" style="width: 100%" />
-          <div class="form-hint">正数增加库存，负数减少库存</div>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="showStockDialog = false">取消</el-button>
-        <el-button type="primary" @click="submitStockUpdate" :loading="updatingStock">
-          确认更新
-        </el-button>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
-import { ElMessage } from 'element-plus'
-import StoreForm from '@/components/dashboard/manage/StoreForm.vue'
-import { fetchCurrentUser } from '@/api/user'
-import { fetchStoresByOwner, createStoreChangeRequest, type StoreDetail } from '@/api/store'
-
-// 响应式状态
-const stores = ref<StoreDetail[]>([])
-const loading = ref(false)
-const saving = ref(false)
-
-// 当前用户 ID
-const ownerUserId = ref<number | null>(null)
-
-// 当前选中的店铺
-const currentStore = ref<StoreDetail | null>(null)
-
-// 店铺表单
-const showStoreDialog = ref(false)
-const editingStore = ref<StoreDetail | null>(null)
-const storeForm = ref<Partial<StoreDetail>>({
-  StoreName: '',
-  Description: '',
-  LogoURL: '',
-  StoreStatus: 'ACTIVE',
-})
-const storeFormRef = ref()
-
-// 商品列表
-const products = ref<Product[]>([])
-const loadingProducts = ref(false)
-const categories = ref<Category[]>([])
-const showProductsDialog = ref(false)
-const productSearchQuery = ref('')
-
-// 商品表单
-const showProductDialog = ref(false)
-const editingProduct = ref<Product | null>(null)
-const savingProduct = ref(false)
-const productForm = ref<Partial<ProductCreate & ProductUpdate>>({
-  ProductName: '',
-  ProductDescription: '',
-  Price: 0,
-  CategoryID: undefined,
-  StockQuantity: 0,
-  MainImageURL: '',
-  ProductStatus: 'ACTIVE'
-})
-const productFormRef = ref()
-
-// 库存更新
-const showStockDialog = ref(false)
-const updatingStock = ref(false)
-const stockForm = ref({
-  stockChange: 0
-})
-
-// 是否是移动设备
-const isMobile = computed(() => window.innerWidth < 768)
-
-// 1) 先拿当前用户
-const loadCurrentUser = async () => {
-  try {
-    const res = await fetchCurrentUser()
-    ownerUserId.value = res.data.UserID
-  } catch (err) {
-    console.error('获取当前用户失败', err)
-    ElMessage.error('请先登录')
-  }
-}
-
-// 2) 拿到 ownerUserId 后，再拉店铺列表
-const fetchStores = async () => {
-  if (ownerUserId.value == null) return
-  loading.value = true
-  try {
-    const res = await fetchStoresByOwner(ownerUserId.value)
-    stores.value = res.data.StoreList
-  } catch (err) {
-    console.error('获取店铺列表失败', err)
-    ElMessage.error('获取店铺列表失败')
-  } finally {
-    loading.value = false
-  }
-}
-
-// 获取分类列表
-const fetchCategoryList = async () => {
-  try {
-    const res = await fetchCategories()
-    categories.value = res.data
-  } catch (err) {
-    console.error('获取分类列表失败', err)
-    ElMessage.error('获取分类列表失败')
-  }
-}
-
-// 获取店铺的商品
-const fetchStoreProducts = async () => {
-  if (!currentStore.value) return
-  
-  loadingProducts.value = true
-  try {
-    const response = await fetchProducts({
-      store_id: currentStore.value.StoreID,
-      search: productSearchQuery.value || undefined
-    })
-    products.value = response.data
-  } catch (error) {
-    console.error('获取商品失败:', error)
-    ElMessage.error('获取商品列表失败')
-  } finally {
-    loadingProducts.value = false
-  }
-}
-
-// 打开"新增店铺"对话框
-const openAddDialog = () => {
-  editingStore.value = null
-  storeForm.value = {
-    StoreName: '',
-    Description: '',
-    LogoURL: '',
-    StoreStatus: 'ACTIVE',
-  }
-  showStoreDialog.value = true
-}
-
-// 重置店铺表单
-const resetStoreForm = () => {
-  editingStore.value = null
-  storeForm.value = {
-    StoreName: '',
-    Description: '',
-    LogoURL: '',
-    StoreStatus: 'ACTIVE',
-  }
-}
-
-// 打开新增商品对话框
-const openAddProductDialog = async () => {
-  if (!currentStore.value) return
-  
-  // 确保分类已加载
-  if (categories.value.length === 0) {
-    await fetchCategoryList()
-  }
-  
-  editingProduct.value = null
-  productForm.value = {
-    ProductName: '',
-    ProductDescription: '',
-    Price: 0,
-    CategoryID: undefined,
-    StockQuantity: 0,
-    MainImageURL: '',
-    ProductStatus: 'ACTIVE',
-    StoreID: currentStore.value.StoreID
-  }
-  showProductDialog.value = true
-}
-
-// 重置商品表单
-const resetProductForm = () => {
-  if (!currentStore.value) return
-  
-  editingProduct.value = null
-  productForm.value = {
-    ProductName: '',
-    ProductDescription: '',
-    Price: 0,
-    CategoryID: undefined,
-    StockQuantity: 0,
-    MainImageURL: '',
-    ProductStatus: 'ACTIVE',
-    StoreID: currentStore.value.StoreID
-  }
-}
-
-// 编辑店铺
-const editStore = (store: StoreDetail) => {
-  editingStore.value = store
-  storeForm.value = { ...store }
-  showStoreDialog.value = true
-}
-
-// 编辑商品
-const editProduct = (product: Product) => {
-  editingProduct.value = product
-  productForm.value = { ...product }
-  showProductDialog.value = true
-}
-
-// 更新商品库存
-const updateProductStock = (product: Product) => {
-  editingProduct.value = product
-  stockForm.value.stockChange = 0
-  showStockDialog.value = true
-}
-
-// 提交库存更新
-const submitStockUpdate = async () => {
-  if (!editingProduct.value) return
-  
-  updatingStock.value = true
-  try {
-    await updateProductStockApi(
-      editingProduct.value.ProductID, 
-      stockForm.value.stockChange
-    )
-    ElMessage.success('库存更新成功')
-    showStockDialog.value = false
-    // 刷新商品列表
-    fetchStoreProducts()
-  } catch (error) {
-    console.error('更新库存失败:', error)
-    ElMessage.error('更新库存失败')
-  } finally {
-    updatingStock.value = false
-  }
-}
-
-const saveStore = async () => {
-  saving.value = true
-  try {
-    // 构造变更申请的 payload
-    const payload = {
-      RequestingUserID: ownerUserId.value!,
-      RequestType: editingStore.value ? 'STORE_UPDATE' : 'STORE_CREATE',
-      ProposedData_JSON: {
-      StoreName: storeForm.value.StoreName,
-      Description: storeForm.value.Description,
-      LogoURL: storeForm.value.LogoURL,
-      StoreStatus: storeForm.value.StoreStatus,
-    },
-    ...(editingStore.value && { StoreID: editingStore.value.StoreID }),
-    SubmitterNotes: '',
-    }
-    await createStoreChangeRequest(payload)
-    ElMessage.success(
-      editingStore.value ? '更新申请已提交，等待审核' : '创建申请已提交，等待审核'
-    )
-    showStoreDialog.value = false
-    // 刷新列表，用于显示最新的店铺（实际生效需后台审核后才会变动）
-    await fetchStores()
-  } catch (err) {
-    console.error('提交变更申请失败', err)
-    ElMessage.error('提交失败，请稍后再试')
-  } finally {
-    saving.value = false
-  }
-}
-
-// 保存商品
-const saveProduct = async () => {
-  if (!currentStore.value) return
-  
-  savingProduct.value = true
-  try {
-    if (editingProduct.value) {
-      // 更新商品
-      await updateProduct(
-        editingProduct.value.ProductID, 
-        productForm.value as ProductUpdate
-      )
-      ElMessage.success('商品更新成功')
-    } else {
-      // 创建新商品
-      await createProduct({
-        ...productForm.value,
-        StoreID: currentStore.value.StoreID
-      } as ProductCreate)
-      ElMessage.success('商品添加成功')
-    }
-    showProductDialog.value = false
-    fetchStoreProducts()
-  } catch (error) {
-    console.error('保存商品失败:', error)
-    ElMessage.error('保存商品失败')
-  } finally {
-    savingProduct.value = false
-  }
-}
-
-// 管理商品
-const manageProducts = async (storeId: number) => {
-  // 查找并设置当前店铺
-  currentStore.value = stores.value.find(s => s.StoreID === storeId) || null
-  if (!currentStore.value) {
-    ElMessage.error('未找到店铺信息')
-    return
-  }
-  
-  // 打开商品管理对话框
-  showProductsDialog.value = true
-  
-  // 加载商品和分类
-  await Promise.all([
-    fetchStoreProducts(),
-    fetchCategoryList()
-  ])
-}
-
-// 店铺状态对应 Tag 类型
-const getStatusType = (status: string) => {
-  return {
-    ACTIVE: 'success',
-    INACTIVE: 'warning',
-    CLOSED: 'danger',
-  }[status] || 'info'
-}
-
-// 商品状态对应 Tag 类型
-const getProductStatusType = (status: string) => {
-  return {
-    ACTIVE: 'success',
-    INACTIVE_BY_MERCHANT: 'warning',
-    SUSPENDED_BY_ADMIN: 'danger',
-    DISCONTINUED: 'info'
-  }[status] || 'info'
-}
-
-// 翻译店铺状态
-const translateStatus = (status: string) => {
-  return {
-    ACTIVE: '营业中',
-    INACTIVE: '休息中',
-    CLOSED: '已关闭'
-  }[status] || status
-}
-
-// 翻译商品状态
-const translateProductStatus = (status: string) => {
-  return {
-    ACTIVE: '上架',
-    INACTIVE_BY_MERCHANT: '下架',
-    SUSPENDED_BY_ADMIN: '已禁用',
-    DISCONTINUED: '已停产'
-  }[status] || status
-}
-
-// 生命周期：先拿用户，再拿列表
-onMounted(async () => {
-  await loadCurrentUser()
-  await fetchStores()
-})
-</script>
-
-<style scoped>
-.store-management {
-  padding: 20px;
-  background: #fff;
-  border-radius: 4px;
-  height: 100%;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.products-dialog-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.no-image {
-  width: 80px;
-  height: 80px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f5f7fa;
-  color: #909399;
-  font-size: 12px;
-  border-radius: 4px;
-}
-
-.form-hint {
-  font-size: 12px;
-  color: #909399;
-  margin-top: 5px;
-}
-.store-management { padding:20px; background:#fff; border-radius:4px; }
-</style>
diff --git a/src/frontend/src/components/dashboard/manage/order_manage_card.vue b/src/frontend/src/components/dashboard/manage/order_manage_card.vue
deleted file mode 100644
index 56d7193..0000000
--- a/src/frontend/src/components/dashboard/manage/order_manage_card.vue
+++ /dev/null
@@ -1,211 +0,0 @@
-<template>
-    <div class="order-manage-card">
-      <!-- 头部：订单号 + 日期 + 编辑按钮 -->
-      <div class="order-header">
-        <div class="order-basic">
-          <span class="order-id">#{{ orderId }}</span>
-          <span class="order-date">from {{ date }}</span>
-        </div>
-  
-        <el-button
-          type="primary"
-          text
-          size="small"
-          @click="dialogVisible = true"
-        >
-          <el-icon><edit /></el-icon>
-          编辑
-        </el-button>
-      </div>
-  
-      <el-divider />
-  
-      <!-- 订单信息行 -->
-      <div
-        class="order-row"
-        v-for="row in rows"
-        :key="row.label"
-      >
-        <span>{{ row.label }}</span>
-        <span>
-          <!-- status 行要高亮 tag，其他行直接渲染值 -->
-          <template v-if="row.label === 'Status'">
-            <el-tag :type="statusType(form.status)" effect="plain">
-              {{ form.status }}
-            </el-tag>
-          </template>
-          <template v-else>{{ row.value }}</template>
-        </span>
-      </div>
-  
-      <!-- 编辑对话框 -->
-      <el-dialog
-        v-model="dialogVisible"
-        title="编辑订单"
-        width="480px"
-        @closed="resetForm"
-      >
-        <el-form :model="form" label-width="90px" ref="formRef">
-          <el-form-item label="Items">
-            <el-input-number v-model="form.items" :min="1" />
-          </el-form-item>
-  
-          <el-form-item label="Shipping">
-            <el-input v-model="form.shipping" />
-          </el-form-item>
-  
-          <el-form-item label="Payment">
-            <el-input v-model="form.payment" />
-          </el-form-item>
-  
-          <el-form-item label="Total">
-            <el-input-number v-model="form.total" :min="0" :step="0.01" />
-          </el-form-item>
-  
-          <el-form-item label="Status">
-            <el-select v-model="form.status" placeholder="Select">
-              <el-option label="PROCESSING" value="PROCESSING" />
-              <el-option label="COMPLETED"  value="COMPLETED" />
-              <el-option label="CANCELED"   value="CANCELED" />
-            </el-select>
-          </el-form-item>
-        </el-form>
-  
-        <template #footer>
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleSave">保存</el-button>
-        </template>
-      </el-dialog>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, reactive, computed, watch } from 'vue'
-  import {
-    Edit,
-    Check,
-    CircleClose
-  } from '@element-plus/icons-vue'
-  import {
-    ElButton,
-    ElIcon,
-    ElDialog,
-    ElForm,
-    ElFormItem,
-    ElInput,
-    ElInputNumber,
-    ElSelect,
-    ElOption,
-    ElTag,
-    ElDivider
-  } from 'element-plus'
-  
-  /* ---------- 接收初始化 props ---------- */
-  const props = defineProps<{
-    orderId: string | number
-    date: string
-    items: number
-    shipping: string
-    payment: string
-    total: number
-    status: 'PROCESSING' | 'COMPLETED' | 'CANCELED'
-  }>()
-  
-  /* ---------- 抛事件给父组件 ---------- */
-  const emit = defineEmits<{
-    /** 保存按钮点击后，把最新数据抛出去 */
-    (e: 'update', payload: { orderId: string | number, updatedData: any }): void
-  }>()
-  
-  /* ---------- 本地可编辑副本 ---------- */
-  const form = reactive({
-    items:     props.items,
-    shipping:  props.shipping,
-    payment:   props.payment,
-    total:     props.total,
-    status:    props.status
-  })
-  
-  /* ---------- 展示用行数据 ---------- */
-  const rows = computed(() => [
-    { label: 'Items',    value: form.items },
-    { label: 'Shipping', value: form.shipping },
-    { label: 'Payment',  value: form.payment },
-    { label: 'Total',    value: `$${Number(form.total).toFixed(2)}` },
-    { label: 'Status',   value: form.status }
-  ])
-  
-  /* ---------- 状态 tag 颜色 ---------- */
-  const statusType = (s: string): 'info' | 'danger' | 'success' | 'warning' | 'primary' =>
-    s === 'PROCESSING' ? 'info'
-    : s === 'CANCELED' ? 'danger'
-    : s === 'COMPLETED' ? 'success'
-    : 'info'
-  
-  /* ---------- Dialog 控制 ---------- */
-  const dialogVisible = ref(false)
-  
-  /* 每次打开 Dialog 时，把 props 值复制到 form */
-  watch(dialogVisible, v => {
-    if (v) resetForm()
-  })
-  
-  function resetForm () {
-    Object.assign(form, { ...props })
-  }
-  
-  /* 保存：触发 update -> 关闭 */
-  function handleSave () {
-    emit('update', {
-      orderId: props.orderId,
-      updatedData: {
-        items: form.items,
-        shipping: form.shipping,
-        payment: form.payment,
-        total: Number(form.total),
-        status: form.status
-      }
-    })
-    dialogVisible.value = false
-  }
-  </script>
-  
-  <style scoped>
-  .order-manage-card {
-    background: #fff;
-    border-radius: 8px;
-    margin-bottom: 32px;
-    padding: 24px 20px 12px 20px;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
-  }
-  
-  .order-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-  }
-  
-  .order-basic {
-    display: flex;
-    align-items: baseline;
-    gap: 16px;
-    font-size: 22px;
-    font-weight: 500;
-  }
-  
-  .order-id   { color: #222; }
-  .order-date { color: #aaa; font-size: 15px; font-weight: 400; }
-  
-  .order-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 17px;
-    padding: 8px 0;
-  }
-  .order-row:not(:last-child) {
-    border-bottom: 1px solid #f0f0f0;
-  }
-  </style>
-  
\ No newline at end of file
diff --git a/src/frontend/src/components/dashboard/General.vue b/src/frontend/src/components/dashboard/merchant/General.vue
similarity index 100%
rename from src/frontend/src/components/dashboard/General.vue
rename to src/frontend/src/components/dashboard/merchant/General.vue
diff --git a/src/frontend/src/components/dashboard/OrderManage.vue b/src/frontend/src/components/dashboard/merchant/OrderManage.vue
similarity index 97%
rename from src/frontend/src/components/dashboard/OrderManage.vue
rename to src/frontend/src/components/dashboard/merchant/OrderManage.vue
index fb70f9e..9856d25 100644
--- a/src/frontend/src/components/dashboard/OrderManage.vue
+++ b/src/frontend/src/components/dashboard/merchant/OrderManage.vue
@@ -44,7 +44,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
-import OrderCard from './manage/OrderCard.vue'
+import OrderCard from '@/components/dashboard/merchant/orderManage/OrderCard.vue'
 import { fetchOrders as fetchOrdersApi, updateOrderStatus as updateOrderStatusApi } from '@/api/order'
 import type { Order } from '@/api/order'
 
diff --git a/src/frontend/src/components/dashboard/merchant/StoreChangeRequests.vue b/src/frontend/src/components/dashboard/merchant/StoreChangeRequests.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/frontend/src/components/dashboard/merchant/StoreEditor.vue b/src/frontend/src/components/dashboard/merchant/StoreEditor.vue
deleted file mode 100644
index d7ab884..0000000
--- a/src/frontend/src/components/dashboard/merchant/StoreEditor.vue
+++ /dev/null
@@ -1,428 +0,0 @@
-<template>
-  <div class="store-editor">
-    <el-card class="box-card">
-      <template #header>
-        <div class="card-header">
-          <span>{{ isEdit ? '编辑店铺信息' : '店铺信息' }}</span>
-          <div>
-            <el-button 
-              v-if="!isEdit" 
-              type="primary" 
-              @click="startEdit"
-              :disabled="hasActiveChangeRequest"
-            >
-              {{ hasActiveChangeRequest ? '有待审核的变更申请' : '申请变更' }}
-            </el-button>
-            <template v-else>
-              <el-button @click="cancelEdit">取消</el-button>
-              <el-button type="primary" @click="submitChangeRequest" :loading="submitting">提交变更申请</el-button>
-            </template>
-          </div>
-        </div>
-      </template>
-      
-      <div v-if="loading" class="loading-placeholder">
-        <el-skeleton :rows="3" animated />
-      </div>
-      
-      <div v-else>
-        <el-form 
-          :model="form" 
-          :rules="rules" 
-          ref="formRef" 
-          label-width="120px" 
-          :disabled="!isEdit"
-        >
-          <el-form-item label="店铺名称" prop="StoreName">
-            <el-input v-model="form.StoreName" placeholder="请输入店铺名称" />
-          </el-form-item>
-          
-          <el-form-item label="店铺描述" prop="Description">
-            <el-input 
-              v-model="form.Description" 
-              type="textarea" 
-              :rows="4" 
-              placeholder="请输入店铺描述"
-            />
-          </el-form-item>
-          
-          <el-form-item label="Logo URL" prop="LogoURL">
-            <el-input v-model="form.LogoURL" placeholder="请输入店铺Logo URL" />
-            <div v-if="form.LogoURL" class="logo-preview">
-              <img :src="form.LogoURL" alt="店铺Logo预览" @error="handleImageError" />
-              <div v-if="imageError" class="image-error">图片加载失败，请检查URL是否有效</div>
-            </div>
-          </el-form-item>
-          
-          <el-form-item label="店铺状态">
-            <el-tag :type="storeStatusType">{{ storeStatusText }}</el-tag>
-            <div class="status-note">
-              <i class="el-icon-info"></i>
-              店铺状态变更需联系客服
-            </div>
-          </el-form-item>
-        </el-form>
-
-        <!-- 变更申请历史记录 -->
-        <div v-if="changeRequests.length > 0" class="change-requests-section">
-          <h3 class="section-title">变更申请历史</h3>
-          <el-table :data="changeRequests" style="width: 100%">
-            <el-table-column prop="RequestDate" label="申请日期" width="180">
-              <template #default="scope">
-                {{ formatDate(scope.row.RequestDate) }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="RequestStatus" label="状态" width="120">
-              <template #default="scope">
-                <el-tag :type="getRequestStatusType(scope.row.RequestStatus)">
-                  {{ getRequestStatusText(scope.row.RequestStatus) }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column prop="AdminComment" label="管理员备注" />
-            <el-table-column label="操作" width="120">
-              <template #default="scope">
-                <el-button 
-                  type="danger" 
-                  size="small" 
-                  @click="cancelRequest(scope.row.RequestID)"
-                  :disabled="scope.row.RequestStatus !== 'PENDING'"
-                >
-                  取消
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-      </div>
-    </el-card>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { 
-  fetchStoreDetail, 
-  createStoreChangeRequest, 
-  fetchStoreChangeRequestsByStore, 
-  cancelStoreChangeRequest,
-  type StoreDetail, 
-  type StoreChangeRequest 
-} from '@/api/store'
-import { useUserStore } from '@/stores/user'
-
-const props = defineProps<{
-  storeId: number
-}>()
-
-const userStore = useUserStore()
-const formRef = ref<FormInstance>()
-const loading = ref(true)
-const submitting = ref(false)
-const isEdit = ref(false)
-const imageError = ref(false)
-const changeRequests = ref<StoreChangeRequest[]>([])
-
-// 表单数据
-const form = reactive({
-  StoreName: '',
-  Description: '',
-  LogoURL: '',
-  StoreStatus: 'ACTIVE' as 'ACTIVE' | 'INACTIVE' | 'CLOSED'
-})
-
-// 表单验证规则
-const rules = reactive<FormRules>({
-  StoreName: [
-    { required: true, message: '请输入店铺名称', trigger: 'blur' },
-    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
-  ],
-  Description: [
-    { max: 500, message: '长度不超过 500 个字符', trigger: 'blur' }
-  ],
-  LogoURL: [
-    { pattern: /^(https?:\/\/).*/, message: '请输入有效的 URL', trigger: 'blur' }
-  ]
-})
-
-// 原始店铺数据（用于比较变化）
-const originalStore = ref<StoreDetail | null>(null)
-
-// 加载店铺详情
-const loadStoreDetail = async () => {
-  loading.value = true
-  try {
-    const response = await fetchStoreDetail(props.storeId)
-    originalStore.value = response.data
-    
-    // 填充表单
-    form.StoreName = response.data.StoreName
-    form.Description = response.data.Description
-    form.LogoURL = response.data.LogoURL
-    form.StoreStatus = response.data.StoreStatus
-    
-    // 重置图片错误状态
-    imageError.value = false
-  } catch (error) {
-    console.error('Failed to load store details:', error)
-    ElMessage.error('加载店铺信息失败')
-  } finally {
-    loading.value = false
-  }
-}
-
-// 加载变更请求历史
-const loadChangeRequests = async () => {
-  try {
-    const response = await fetchStoreChangeRequestsByStore(props.storeId)
-    changeRequests.value = response.data.Requests || []
-  } catch (error) {
-    console.error('Failed to load change requests:', error)
-    ElMessage.error('加载变更申请历史失败')
-  }
-}
-
-// 处理图片加载错误
-const handleImageError = () => {
-  imageError.value = true
-}
-
-// 格式化日期
-const formatDate = (dateString: string) => {
-  const date = new Date(dateString)
-  return date.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
-}
-
-// 店铺状态类型和文本
-const storeStatusType = computed(() => {
-  switch (form.StoreStatus) {
-    case 'ACTIVE':
-      return 'success'
-    case 'INACTIVE':
-      return 'warning'
-    case 'CLOSED':
-      return 'danger'
-    default:
-      return 'info'
-  }
-})
-
-const storeStatusText = computed(() => {
-  switch (form.StoreStatus) {
-    case 'ACTIVE':
-      return '营业中'
-    case 'INACTIVE':
-      return '暂停营业'
-    case 'CLOSED':
-      return '已关闭'
-    default:
-      return form.StoreStatus
-  }
-})
-
-// 判断是否有活跃的变更申请
-const hasActiveChangeRequest = computed(() => {
-  return changeRequests.value.some(req => req.RequestStatus === 'PENDING')
-})
-
-// 获取申请状态类型
-const getRequestStatusType = (status: string) => {
-  switch (status) {
-    case 'PENDING':
-      return 'warning'
-    case 'APPROVED':
-      return 'success'
-    case 'REJECTED':
-      return 'danger'
-    case 'CANCELLED':
-      return 'info'
-    default:
-      return 'info'
-  }
-}
-
-// 获取申请状态文本
-const getRequestStatusText = (status: string) => {
-  switch (status) {
-    case 'PENDING':
-      return '待审核'
-    case 'APPROVED':
-      return '已批准'
-    case 'REJECTED':
-      return '已拒绝'
-    case 'CANCELLED':
-      return '已取消'
-    default:
-      return status
-  }
-}
-
-// 开始编辑
-const startEdit = () => {
-  isEdit.value = true
-}
-
-// 取消编辑
-const cancelEdit = () => {
-  ElMessageBox.confirm(
-    '确定要取消编辑吗？所有未保存的修改将会丢失。',
-    '提示',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }
-  )
-    .then(() => {
-      // 重置表单
-      if (originalStore.value) {
-        form.StoreName = originalStore.value.StoreName
-        form.Description = originalStore.value.Description
-        form.LogoURL = originalStore.value.LogoURL
-      }
-      isEdit.value = false
-      // 重置表单验证
-      formRef.value?.resetFields()
-    })
-    .catch(() => {
-      // 用户取消操作
-    })
-}
-
-// 提交变更申请
-const submitChangeRequest = async () => {
-  if (!formRef.value) return
-  
-  await formRef.value.validate(async (valid) => {
-    if (valid) {
-      // 检查是否有变更
-      if (
-        originalStore.value &&
-        form.StoreName === originalStore.value.StoreName &&
-        form.Description === originalStore.value.Description &&
-        form.LogoURL === originalStore.value.LogoURL
-      ) {
-        ElMessage.warning('没有检测到任何变更')
-        return
-      }
-      
-      submitting.value = true
-      try {
-        await createStoreChangeRequest({
-          StoreID: props.storeId,
-          StoreName: form.StoreName,
-          Description: form.Description,
-          LogoURL: form.LogoURL
-        })
-        
-        ElMessage.success('变更申请已提交，请等待管理员审核')
-        isEdit.value = false
-        
-        // 重新加载变更请求历史
-        await loadChangeRequests()
-      } catch (error) {
-        console.error('Failed to submit change request:', error)
-        ElMessage.error('提交变更申请失败')
-      } finally {
-        submitting.value = false
-      }
-    } else {
-      ElMessage.error('请修正表单中的错误')
-    }
-  })
-}
-
-// 取消变更申请
-const cancelRequest = async (requestId: number) => {
-  try {
-    await ElMessageBox.confirm(
-      '确定要取消这个变更申请吗？',
-      '确认取消',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '返回',
-        type: 'warning'
-      }
-    )
-    
-    await cancelStoreChangeRequest(requestId)
-    ElMessage.success('变更申请已取消')
-    
-    // 重新加载变更请求历史
-    await loadChangeRequests()
-  } catch (error) {
-    if (error !== 'cancel') {
-      console.error('Failed to cancel change request:', error)
-      ElMessage.error('取消变更申请失败')
-    }
-  }
-}
-
-// 初始化
-onMounted(async () => {
-  await Promise.all([
-    loadStoreDetail(),
-    loadChangeRequests()
-  ])
-})
-</script>
-
-<style scoped>
-.store-editor {
-  margin-bottom: 20px;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.loading-placeholder {
-  padding: 20px 0;
-}
-
-.logo-preview {
-  margin-top: 10px;
-  position: relative;
-}
-
-.logo-preview img {
-  max-width: 200px;
-  max-height: 200px;
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
-}
-
-.image-error {
-  color: #f56c6c;
-  font-size: 12px;
-  margin-top: 5px;
-}
-
-.status-note {
-  margin-top: 5px;
-  color: #909399;
-  font-size: 12px;
-}
-
-.change-requests-section {
-  margin-top: 30px;
-}
-
-.section-title {
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 15px;
-  border-bottom: 1px solid #ebeef5;
-  padding-bottom: 10px;
-}
-</style>
diff --git a/src/frontend/src/components/dashboard/merchant/StoreManagement.vue b/src/frontend/src/components/dashboard/merchant/StoreManagement.vue
new file mode 100644
index 0000000..51ab98d
--- /dev/null
+++ b/src/frontend/src/components/dashboard/merchant/StoreManagement.vue
@@ -0,0 +1,467 @@
+<template>
+  <div class="store-management">
+    <!-- 顶部标题 + 新增按钮 -->
+    <store-header @add="openAddDialog" />
+
+    <!-- 店铺列表 -->
+    <store-list-table
+      :stores="stores"
+      :loading="loading"
+      @edit="editStore"
+      @manage-products="manageProducts"
+    />
+
+    <!-- ☆ 以下均改成独立弹窗组件 -->
+    <store-form-dialog
+      v-model:visible="showStoreDialog"
+      :store="editingStore"
+      @submit="handleStoreSubmit"
+    />
+
+    <product-management-dialog
+      v-model:visible="showProductsDialog"
+      :store="currentStore"
+      @add-product="openAddProductDialog"
+      @edit-product="editProduct"
+      @update-stock="updateProductStock"
+    />
+
+    <product-form-dialog
+      v-model:visible="showProductDialog"
+      :product="editingProduct"
+      :categories="categories"
+      @submit="handleProductSubmit"
+    />
+
+    <stock-dialog
+      v-model:visible="showStockDialog"
+      :product="editingProduct"
+      @submit="submitStockUpdate"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 保留原有状态 & 逻辑，引入新组件
+import StoreHeader from '@/components/dashboard/merchant/storeManage/StoreHeader.vue'
+import StoreListTable from '@/components/dashboard/merchant/storeManage/StoreListTable.vue'
+import StoreFormDialog from '@/components/dashboard/merchant/storeManage/StoreFormDialog.vue'
+import ProductManagementDialog from '@/components/dashboard/merchant/storeManage/ProductManagementDialog.vue'
+import ProductFormDialog from '@/components/dashboard/merchant/storeManage/ProductFormDialog.vue'
+import StockDialog from '@/components/dashboard/merchant/storeManage/StockDialog.vue'
+import { ref, onMounted, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import { fetchCurrentUser } from '@/api/user'
+import { fetchStoresByOwner, type StoreDetail } from '@/api/store'
+// ✅ 新增：从 storeRequest 中引入 createStoreChangeRequest
+import { createStoreChangeRequest } from '@/api/storeRequest'
+
+// 其余 product 相关 API 按照项目原有路径引入
+import { fetchProducts, createProduct, updateProduct, updateProductStock as updateProductStockApi } from '@/api/product'
+import { fetchCategories, type Category } from '@/api/category'
+import type { Product, ProductCreate, ProductUpdate } from '@/api/product'
+
+// 响应式状态
+const stores = ref<StoreDetail[]>([])
+const loading = ref(false)
+const saving = ref(false)
+
+// 当前用户 ID
+const ownerUserId = ref<number | null>(null)
+
+// 当前选中的店铺
+const currentStore = ref<StoreDetail | null>(null)
+
+// 店铺表单
+const showStoreDialog = ref(false)
+const editingStore = ref<StoreDetail | null>(null)
+const storeForm = ref<Partial<StoreDetail>>({
+  StoreName: '',
+  Description: '',
+  LogoURL: '',
+  StoreStatus: 'ACTIVE',
+})
+const storeFormRef = ref()
+
+// 商品列表
+const products = ref<Product[]>([])
+const loadingProducts = ref(false)
+const categories = ref<Category[]>([])
+const showProductsDialog = ref(false)
+const productSearchQuery = ref('')
+
+// 商品表单
+const showProductDialog = ref(false)
+const editingProduct = ref<Product | null>(null)
+const savingProduct = ref(false)
+const productForm = ref<Partial<ProductCreate & ProductUpdate>>({
+  ProductName: '',
+  ProductDescription: '',
+  Price: 0,
+  CategoryID: undefined,
+  StockQuantity: 0,
+  MainImageURL: '',
+  ProductStatus: 'ACTIVE'
+})
+const productFormRef = ref()
+
+// 库存更新
+const showStockDialog = ref(false)
+const updatingStock = ref(false)
+const stockForm = ref({
+  stockChange: 0
+})
+
+// 是否是移动设备
+const isMobile = computed(() => window.innerWidth < 768)
+
+// 1) 先拿当前用户
+const loadCurrentUser = async () => {
+  try {
+    const res = await fetchCurrentUser()
+    ownerUserId.value = res.data.UserID
+  } catch (err) {
+    console.error('获取当前用户失败', err)
+    ElMessage.error('请先登录')
+  }
+}
+
+// 2) 拿到 ownerUserId 后，再拉店铺列表
+const fetchStores = async () => {
+  if (ownerUserId.value == null) return
+  loading.value = true
+  try {
+    const res = await fetchStoresByOwner(ownerUserId.value)
+    stores.value = res.data.StoreList.map((s: any) => ({
+      StoreID: s.StoreID,
+      StoreName: s.StoreName,
+      OwnerUserID: s.OwnerUserID,
+      Description: s.Description ?? '', // Provide default if missing
+      LogoURL: s.LogoURL ?? '',
+      StoreStatus: s.StoreStatus,
+      CreationDate: s.CreationDate ?? '',
+      LastUpdatedDate: s.LastUpdatedDate ?? ''
+    }))
+  } catch (err) {
+    console.error('获取店铺列表失败', err)
+    ElMessage.error('获取店铺列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取分类列表
+const fetchCategoryList = async () => {
+  try {
+    const res = await fetchCategories()
+    categories.value = res.data
+  } catch (err) {
+    console.error('获取分类列表失败', err)
+    ElMessage.error('获取分类列表失败')
+  }
+}
+
+// 获取店铺的商品
+const fetchStoreProducts = async () => {
+  if (!currentStore.value) return
+  
+  loadingProducts.value = true
+  try {
+    const response = await fetchProducts({
+      store_id: currentStore.value.StoreID,
+      search: productSearchQuery.value || undefined
+    })
+    products.value = response.data
+  } catch (error) {
+    console.error('获取商品失败:', error)
+    ElMessage.error('获取商品列表失败')
+  } finally {
+    loadingProducts.value = false
+  }
+}
+
+// 打开"新增店铺"对话框
+const openAddDialog = () => {
+  editingStore.value = null
+  storeForm.value = {
+    StoreName: '',
+    Description: '',
+    LogoURL: '',
+    StoreStatus: 'ACTIVE',
+  }
+  showStoreDialog.value = true
+}
+
+// 重置店铺表单
+const resetStoreForm = () => {
+  editingStore.value = null
+  storeForm.value = {
+    StoreName: '',
+    Description: '',
+    LogoURL: '',
+    StoreStatus: 'ACTIVE',
+  }
+}
+
+// 打开新增商品对话框
+const openAddProductDialog = async () => {
+  if (!currentStore.value) return
+  
+  // 确保分类已加载
+  if (categories.value.length === 0) {
+    await fetchCategoryList()
+  }
+  
+  editingProduct.value = null
+  productForm.value = {
+    ProductName: '',
+    ProductDescription: '',
+    Price: 0,
+    CategoryID: undefined,
+    StockQuantity: 0,
+    MainImageURL: '',
+    ProductStatus: 'ACTIVE',
+    StoreID: currentStore.value.StoreID
+  }
+  showProductDialog.value = true
+}
+
+// 重置商品表单
+const resetProductForm = () => {
+  if (!currentStore.value) return
+  
+  editingProduct.value = null
+  productForm.value = {
+    ProductName: '',
+    ProductDescription: '',
+    Price: 0,
+    CategoryID: undefined,
+    StockQuantity: 0,
+    MainImageURL: '',
+    ProductStatus: 'ACTIVE',
+    StoreID: currentStore.value.StoreID
+  }
+}
+
+// 编辑店铺
+const editStore = (store: StoreDetail) => {
+  editingStore.value = store
+  storeForm.value = { ...store }
+  showStoreDialog.value = true
+}
+
+// 编辑商品
+const editProduct = (product: Product) => {
+  editingProduct.value = product
+  productForm.value = {
+    ProductName: product.ProductName,
+    ProductDescription: product.ProductDescription,
+    Price: typeof product.Price === 'string' ? parseFloat(product.Price) : product.Price,
+    CategoryID: product.CategoryID,
+    StockQuantity: product.StockQuantity,
+    MainImageURL: product.MainImageURL,
+    StoreID: product.StoreID,
+    ProductStatus: product.ProductStatus
+  }
+  showProductDialog.value = true
+}
+
+// 更新商品库存
+const updateProductStock = (product: Product) => {
+  editingProduct.value = product
+  stockForm.value.stockChange = 0
+  showStockDialog.value = true
+}
+
+// 提交库存更新
+const submitStockUpdate = async (delta: number) => {
+  if (!editingProduct.value) return
+  updatingStock.value = true
+  try {
+    await updateProductStockApi(
+      editingProduct.value.ProductID,
+      delta
+    )
+    ElMessage.success('库存更新成功')
+    showStockDialog.value = false
+    // 刷新商品列表
+    fetchStoreProducts()
+  } catch (error) {
+    console.error('更新库存失败:', error)
+    ElMessage.error('更新库存失败')
+  } finally {
+    updatingStock.value = false
+  }
+}
+
+// 处理提交店铺表单事件（StoreFormDialog调用）
+const handleStoreSubmit = async (formData: Partial<StoreDetail>) => {
+  if (!ownerUserId.value) {
+    ElMessage.error('无法获取当前用户信息')
+    return
+  }
+  saving.value = true
+  try {
+    // 构造变更申请的 payload
+    const payload = {
+      RequestingUserID: ownerUserId.value,
+      RequestType: editingStore.value ? 'STORE_UPDATE' as 'STORE_UPDATE' : 'STORE_CREATE' as 'STORE_CREATE',
+      ProposedData_JSON: {
+        StoreName: formData.StoreName,
+        Description: formData.Description,
+        LogoURL: formData.LogoURL,
+        StoreStatus: formData.StoreStatus,
+      },
+      ...(editingStore.value && { StoreID: editingStore.value.StoreID }),
+      SubmitterNotes: '',
+    }
+    await createStoreChangeRequest(payload)
+    ElMessage.success(
+      editingStore.value ? '更新申请已提交，等待审核' : '创建申请已提交，等待审核'
+    )
+    // 刷新列表，用于显示最新的店铺（实际生效需后台审核后才会变动）
+    await fetchStores()
+  } catch (err) {
+    console.error('提交变更申请失败', err)
+    ElMessage.error('提交失败，请稍后再试')
+  } finally {
+    saving.value = false
+  }
+}
+
+// 处理提交商品表单事件（ProductFormDialog调用）
+const handleProductSubmit = async (formData: Partial<ProductCreate & ProductUpdate>) => {
+  if (!currentStore.value) return
+  
+  savingProduct.value = true
+  try {
+    if (editingProduct.value) {
+      // 更新商品
+      await updateProduct(
+        editingProduct.value.ProductID, 
+        formData as ProductUpdate
+      )
+      ElMessage.success('商品更新成功')
+    } else {
+      // 创建新商品
+      await createProduct({
+        ...formData,
+        StoreID: currentStore.value.StoreID
+      } as ProductCreate)
+      ElMessage.success('商品添加成功')
+    }
+    fetchStoreProducts()
+  } catch (error) {
+    console.error('保存商品失败:', error)
+    ElMessage.error('保存商品失败')
+  } finally {
+    savingProduct.value = false
+  }
+}
+
+// 管理商品
+const manageProducts = async (storeId: number) => {
+  // 查找并设置当前店铺
+  currentStore.value = stores.value.find(s => s.StoreID === storeId) || null
+  if (!currentStore.value) {
+    ElMessage.error('未找到店铺信息')
+    return
+  }
+  
+  // 打开商品管理对话框
+  showProductsDialog.value = true
+  
+  // 加载商品和分类
+  await Promise.all([
+    fetchStoreProducts(),
+    fetchCategoryList()
+  ])
+}
+
+// 店铺状态对应 Tag 类型
+const getStatusType = (status: string) => {
+  return {
+    ACTIVE: 'success',
+    INACTIVE: 'warning',
+    CLOSED: 'danger',
+  }[status] || 'info'
+}
+
+// 商品状态对应 Tag 类型
+const getProductStatusType = (status: string) => {
+  return {
+    ACTIVE: 'success',
+    INACTIVE_BY_MERCHANT: 'warning',
+    SUSPENDED_BY_ADMIN: 'danger',
+    DISCONTINUED: 'info'
+  }[status] || 'info'
+}
+
+// 翻译店铺状态
+const translateStatus = (status: string) => {
+  return {
+    ACTIVE: '营业中',
+    INACTIVE: '休息中',
+    CLOSED: '已关闭'
+  }[status] || status
+}
+
+// 翻译商品状态
+const translateProductStatus = (status: string) => {
+  return {
+    ACTIVE: '上架',
+    INACTIVE_BY_MERCHANT: '下架',
+    SUSPENDED_BY_ADMIN: '已禁用',
+    DISCONTINUED: '已停产'
+  }[status] || status
+}
+
+// 生命周期：先拿用户，再拿列表
+onMounted(async () => {
+  await loadCurrentUser()
+  await fetchStores()
+})
+</script>
+
+<style scoped>
+.store-management {
+  padding: 20px;
+  background: #fff;
+  border-radius: 4px;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.products-dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.no-image {
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f7fa;
+  color: #909399;
+  font-size: 12px;
+  border-radius: 4px;
+}
+
+.form-hint {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 5px;
+}
+
+.store-management { padding:20px; background:#fff; border-radius:4px; }
+</style>
diff --git a/src/frontend/src/components/dashboard/manage/OrderCard.vue b/src/frontend/src/components/dashboard/merchant/orderManage/OrderCard.vue
similarity index 98%
rename from src/frontend/src/components/dashboard/manage/OrderCard.vue
rename to src/frontend/src/components/dashboard/merchant/orderManage/OrderCard.vue
index 17313a7..792db81 100644
--- a/src/frontend/src/components/dashboard/manage/OrderCard.vue
+++ b/src/frontend/src/components/dashboard/merchant/orderManage/OrderCard.vue
@@ -204,7 +204,7 @@ const formatDate = (d?: string) => d ? new Date(d).toLocaleString('zh-CN') : '-'
 const getStatusType = (s: string) => {
   const map: Record<string, 'success'|'danger'|'warning'|'info'> = {
     PENDING_PAYMENT: 'warning', PAID_AND_PENDING_PROCESSING: 'info', PROCESSING_BY_MERCHANT: 'info',
-    SHIPPED: 'primary', DELIVERED: 'success', COMPLETED: 'success',
+    SHIPPED: 'info', DELIVERED: 'success', COMPLETED: 'success',
     CANCELLED_BY_USER: 'danger', CANCELLED_BY_MERCHANT: 'danger', CANCELLED_BY_SYSTEM: 'danger'
   }
   return map[s] || 'info'
@@ -235,6 +235,6 @@ const translateStatus = (s: string) => {
 .order-items h4 { margin-bottom: 10px; font-weight: 600; }
 .product-info { display: flex; align-items: center; }
 .product-image { width: 40px; height: 40px; margin-right: 10px; border-radius: 4px; }
-.product-name { font-size: 13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
+.product-name { font-size: 13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;line-clamp: 2; overflow: hidden; }
 .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
 </style>
\ No newline at end of file
diff --git a/src/frontend/src/components/dashboard/merchant/storeManage/ProductFormDialog.vue b/src/frontend/src/components/dashboard/merchant/storeManage/ProductFormDialog.vue
new file mode 100644
index 0000000..48c4df6
--- /dev/null
+++ b/src/frontend/src/components/dashboard/merchant/storeManage/ProductFormDialog.vue
@@ -0,0 +1,60 @@
+<template>
+    <el-dialog
+      :model-value="visible"
+      :title="product ? '编辑商品' : '添加商品'"
+      width="500px"
+      @update:modelValue="$emit('update:visible', $event)"
+      @close="reset"
+    >
+      <el-form :model="form" label-width="100px" ref="formRef">
+        <el-form-item label="商品名称" prop="ProductName" :rules="[{ required: true, message: '请输入商品名称' }]"><el-input v-model="form.ProductName" /></el-form-item>
+        <el-form-item label="价格" prop="Price" :rules="[{ required: true, message: '请输入价格' }]"><el-input-number v-model="form.Price" :min="0" :precision="2" :step="0.1" style="width:100%" /></el-form-item>
+        <el-form-item label="库存" prop="StockQuantity"><el-input-number v-model="form.StockQuantity" :min="0" :step="1" style="width:100%" /></el-form-item>
+        <el-form-item label="分类" prop="CategoryID" :rules="[{ required: true, message: '请选择分类' }]"><el-select v-model="form.CategoryID" placeholder="请选择分类" style="width:100%"><el-option v-for="c in categories" :key="c.CategoryID" :label="c.CategoryName" :value="c.CategoryID" /></el-select></el-form-item>
+        <el-form-item label="描述" prop="ProductDescription"><el-input v-model="form.ProductDescription" type="textarea" :rows="3" /></el-form-item>
+        <el-form-item label="图片URL" prop="MainImageURL"><el-input v-model="form.MainImageURL" /></el-form-item>
+        <el-form-item label="状态" prop="ProductStatus"><el-select v-model="form.ProductStatus" placeholder="请选择状态" style="width:100%"><el-option label="上架" value="ACTIVE" /><el-option label="下架" value="INACTIVE_BY_MERCHANT" /><el-option label="已停产" value="DISCONTINUED" /></el-select></el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="$emit('update:visible', false)">取消</el-button>
+        <el-button type="primary" :loading="submitting" @click="submit">保存</el-button>
+      </template>
+    </el-dialog>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, watch } from 'vue'
+  import type { ProductCreate, ProductUpdate, Product } from '@/api/product'
+  const props = defineProps<{ visible: boolean; product: Product | null; categories: { CategoryID: number; CategoryName: string }[] }>()
+  const emits = defineEmits<{
+    (e: 'update:visible', v: boolean): void
+    (e: 'submit', data: Partial<ProductCreate & ProductUpdate>): void
+  }>()
+  
+  const form = ref<Partial<ProductCreate & ProductUpdate>>({ ProductName: '', Price: 0, StockQuantity: 0, CategoryID: undefined, ProductDescription: '', MainImageURL: '', ProductStatus: 'ACTIVE' })
+  const formRef = ref()
+  const submitting = ref(false)
+  
+  watch(
+    () => props.product,
+    (p) => {
+      form.value = p
+        ? { ...p, Price: Number(p.Price) }
+        : { ProductName: '', Price: 0, StockQuantity: 0, CategoryID: undefined, ProductDescription: '', MainImageURL: '', ProductStatus: 'ACTIVE' }
+    },
+    { immediate: true }
+  )
+  
+  const reset = () => {
+    form.value = { ProductName: '', Price: 0, StockQuantity: 0, CategoryID: undefined, ProductDescription: '', MainImageURL: '', ProductStatus: 'ACTIVE' }
+  }
+  
+  const submit = async () => {
+    submitting.value = true
+    await Promise.resolve()
+    emits('submit', form.value)
+    submitting.value = false
+    emits('update:visible', false)
+  }
+  </script>
+  
\ No newline at end of file
diff --git a/src/frontend/src/components/dashboard/merchant/storeManage/ProductListTable.vue b/src/frontend/src/components/dashboard/merchant/storeManage/ProductListTable.vue
new file mode 100644
index 0000000..a5a4097
--- /dev/null
+++ b/src/frontend/src/components/dashboard/merchant/storeManage/ProductListTable.vue
@@ -0,0 +1,38 @@
+<template>
+    <el-table :data="products" v-loading="loading" border style="width: 100%">
+      <el-table-column prop="ProductID" label="ID" width="80" />
+      <el-table-column label="商品图片" width="120">
+        <template #default="{ row }">
+          <el-image v-if="row.MainImageURL" :src="row.MainImageURL" fit="cover" style="width:80px;height:80px" :preview-src-list="[row.MainImageURL]" />
+          <div v-else class="no-image">无图片</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="ProductName" label="商品名称" min-width="180" />
+      <el-table-column prop="Price" label="价格" width="100"><template #default="{ row }">¥{{ row.Price }}</template></el-table-column>
+      <el-table-column prop="StockQuantity" label="库存" width="100" />
+      <el-table-column prop="ProductStatus" label="状态" width="120">
+        <template #default="{ row }"><el-tag :type="statusType(row.ProductStatus)">{{ translateStatus(row.ProductStatus) }}</el-tag></template>
+      </el-table-column>
+      <el-table-column label="操作" width="180">
+        <template #default="{ row }">
+          <el-button size="small" @click="$emit('edit', row)">编辑</el-button>
+          <el-button size="small" type="primary" @click="$emit('update-stock', row)">更新库存</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </template>
+  
+  <script setup lang="ts">
+  import { defineProps, defineEmits } from 'vue'
+  import type { Product } from '@/api/product'
+  const props = defineProps<{ products: Product[]; loading: boolean }>()
+  const emits = defineEmits<{ (e: 'edit', p: Product): void; (e: 'update-stock', p: Product): void }>()
+  
+  const statusType = (s: string) => ({ ACTIVE: 'success', INACTIVE_BY_MERCHANT: 'warning', SUSPENDED_BY_ADMIN: 'danger', DISCONTINUED: 'info' }[s] || 'info')
+  const translateStatus = (s: string) => ({ ACTIVE: '上架', INACTIVE_BY_MERCHANT: '下架', SUSPENDED_BY_ADMIN: '已禁用', DISCONTINUED: '已停产' }[s] || s)
+  </script>
+  
+  <style scoped>
+  .no-image { width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:#f5f7fa;color:#909399;font-size:12px;border-radius:4px; }
+  </style>
+  
\ No newline at end of file
diff --git a/src/frontend/src/components/dashboard/merchant/storeManage/ProductManagementDialog.vue b/src/frontend/src/components/dashboard/merchant/storeManage/ProductManagementDialog.vue
new file mode 100644
index 0000000..3f10cce
--- /dev/null
+++ b/src/frontend/src/components/dashboard/merchant/storeManage/ProductManagementDialog.vue
@@ -0,0 +1,66 @@
+<template>
+    <el-dialog
+      :model-value="visible"
+      :title="store ? `${store.StoreName} - 商品管理` : '商品管理'"
+      width="80%"
+      :fullscreen="isMobile"
+      @update:modelValue="$emit('update:visible', $event)"
+      @open="init"
+    >
+      <div class="products-dialog-header">
+        <el-button type="primary" @click="$emit('add-product')">添加商品</el-button>
+        <el-button @click="fetch">刷新列表</el-button>
+      </div>
+
+      <product-list-table
+        :products="products"
+        :loading="loading"
+        @edit="$emit('edit-product', $event)"
+        @update-stock="$emit('update-stock', $event)"
+      />
+    </el-dialog>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, computed } from 'vue'
+  import ProductListTable from './ProductListTable.vue'
+  import { fetchProducts } from '@/api/product'
+  import type { StoreSummary } from '@/api/store'
+  import type { Product } from '@/api/product'
+  import { ElMessage } from 'element-plus'
+  
+  const props = defineProps<{ visible: boolean; store: StoreSummary | null }>()
+  const emits = defineEmits<{
+    (e: 'update:visible', val: boolean): void
+    (e: 'add-product'): void
+    (e: 'edit-product', p: Product): void
+    (e: 'update-stock', p: Product): void
+  }>()
+  
+  const products = ref<Product[]>([])
+  const loading = ref(false)
+  const isMobile = computed(() => window.innerWidth < 768)
+  
+  const fetch = async () => {
+    if (!props.store) return
+    loading.value = true
+    try {
+      const res = await fetchProducts({ store_id: props.store.StoreID })
+      products.value = res.data
+    } catch (err) {
+      console.error(err)
+      ElMessage.error('获取商品列表失败')
+    } finally {
+      loading.value = false
+    }
+  }
+  
+  const init = () => {
+    products.value = []
+    fetch()
+  }
+  </script>
+  
+  <style scoped>
+  .products-dialog-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
+  </style>
diff --git a/src/frontend/src/components/dashboard/merchant/storeManage/StockDialog.vue b/src/frontend/src/components/dashboard/merchant/storeManage/StockDialog.vue
new file mode 100644
index 0000000..01c674f
--- /dev/null
+++ b/src/frontend/src/components/dashboard/merchant/storeManage/StockDialog.vue
@@ -0,0 +1,46 @@
+<template>
+    <el-dialog
+      :model-value="visible"
+      title="更新商品库存"
+      width="400px"
+      @update:modelValue="$emit('update:visible', $event)"
+      @close="reset"
+    >
+      <el-form :model="form" label-width="140px">
+        <el-form-item label="商品名称"><span>{{ product?.ProductName }}</span></el-form-item>
+        <el-form-item label="当前库存"><span>{{ product?.StockQuantity }}</span></el-form-item>
+        <el-form-item label="库存变化量" prop="stockChange"><el-input-number v-model="form.stockChange" :min="-1000" :max="1000" style="width:100%" /></el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="$emit('update:visible', false)">取消</el-button>
+        <el-button type="primary" :loading="submitting" @click="submit">确认更新</el-button>
+      </template>
+    </el-dialog>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref } from 'vue'
+  import type { Product } from '@/api/product'
+  
+  const props = defineProps<{ visible: boolean; product: Product | null }>()
+  const emits = defineEmits<{
+    (e: 'update:visible', v: boolean): void
+    (e: 'submit', delta: number): void
+  }>()
+  
+  const form = ref<{ stockChange: number }>({ stockChange: 0 })
+  const submitting = ref(false)
+  
+  const reset = () => {
+    form.value.stockChange = 0
+  }
+  
+  const submit = async () => {
+    submitting.value = true
+    await Promise.resolve()
+    emits('submit', form.value.stockChange)
+    submitting.value = false
+    emits('update:visible', false)
+  }
+  </script>
+  
\ No newline at end of file
diff --git a/src/frontend/src/components/dashboard/manage/StoreForm.vue b/src/frontend/src/components/dashboard/merchant/storeManage/StoreForm.vue
similarity index 95%
rename from src/frontend/src/components/dashboard/manage/StoreForm.vue
rename to src/frontend/src/components/dashboard/merchant/storeManage/StoreForm.vue
index 52d2b3d..b521e60 100644
--- a/src/frontend/src/components/dashboard/manage/StoreForm.vue
+++ b/src/frontend/src/components/dashboard/merchant/storeManage/StoreForm.vue
@@ -1,3 +1,4 @@
+<!-- src/frontend/src/components/dashboard/manage/StoreForm.vue -->
 <template>
     <el-form
       :model="storeForm"
diff --git a/src/frontend/src/components/dashboard/merchant/storeManage/StoreFormDialog.vue b/src/frontend/src/components/dashboard/merchant/storeManage/StoreFormDialog.vue
new file mode 100644
index 0000000..87d4b42
--- /dev/null
+++ b/src/frontend/src/components/dashboard/merchant/storeManage/StoreFormDialog.vue
@@ -0,0 +1,52 @@
+<template>
+    <el-dialog
+      :model-value="visible"
+      :title="dialogTitle"
+      width="500px"
+      @update:modelValue="$emit('update:visible', $event)"
+      @close="resetForm"
+    >
+      <store-form :storeForm="form" :storeFormRef="formRef" />
+      <template #footer>
+        <el-button @click="$emit('update:visible', false)">取消</el-button>
+        <el-button type="primary" :loading="submitting" @click="submit">提交申请</el-button>
+      </template>
+    </el-dialog>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, watch, computed } from 'vue'
+
+  import StoreForm from '@/components/dashboard/merchant/storeManage/StoreForm.vue'
+  import type { StoreSummary } from '@/api/store'
+  
+  const props = defineProps<{ visible: boolean; store: StoreSummary | null }>()
+  const emits = defineEmits<{ (e: 'update:visible', val: boolean): void; (e: 'submit', storeForm: Partial<StoreSummary & { Description: string; LogoURL: string }>): void }>()
+  
+  const form = ref<Partial<StoreSummary & { Description: string; LogoURL: string }>>({ StoreName: '', Description: '', LogoURL: '', StoreStatus: 'ACTIVE' })
+  const formRef = ref()
+  const submitting = ref(false)
+  
+  watch(
+    () => props.store,
+    (s) => {
+      form.value = s ? { ...s } : { StoreName: '', Description: '', LogoURL: '', StoreStatus: 'ACTIVE' }
+    },
+    { immediate: true }
+  )
+  
+  const dialogTitle = computed(() => (props.store ? '编辑店铺' : '新增店铺'))
+  
+  const resetForm = () => {
+    form.value = { StoreName: '', Description: '', LogoURL: '', StoreStatus: 'ACTIVE' }
+  }
+  
+  const submit = async () => {
+    submitting.value = true
+    await Promise.resolve() // parent handles actual API; here仅负责表单校验
+    emits('submit', form.value)
+    submitting.value = false
+    emits('update:visible', false)
+  }
+  </script>
+  
\ No newline at end of file
diff --git a/src/frontend/src/components/dashboard/merchant/storeManage/StoreHeader.vue b/src/frontend/src/components/dashboard/merchant/storeManage/StoreHeader.vue
new file mode 100644
index 0000000..3a66d9a
--- /dev/null
+++ b/src/frontend/src/components/dashboard/merchant/storeManage/StoreHeader.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="header">
+    <h2>店铺管理</h2>
+    <el-button type="primary" @click="$emit('add')">新增店铺</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineEmits<{ (e: 'add'): void }>()
+</script>
+
+<style scoped>
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/frontend/src/components/dashboard/merchant/storeManage/StoreListTable.vue b/src/frontend/src/components/dashboard/merchant/storeManage/StoreListTable.vue
new file mode 100644
index 0000000..b6f6b1a
--- /dev/null
+++ b/src/frontend/src/components/dashboard/merchant/storeManage/StoreListTable.vue
@@ -0,0 +1,38 @@
+<template>
+    <el-table
+      :data="stores"
+      v-loading="loading"
+      row-key="StoreID"
+      style="width: 100%"
+    >
+      <el-table-column prop="StoreID" label="店铺ID" width="100" />
+      <el-table-column prop="StoreName" label="店铺名称" />
+      <el-table-column prop="Description" label="描述" />
+      <el-table-column prop="StoreStatus" label="状态" width="120">
+        <template #default="{ row }">
+          <el-tag :type="getStatusType(row.StoreStatus)">{{ translateStatus(row.StoreStatus) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="220">
+        <template #default="{ row }">
+          <el-button size="small" @click="$emit('edit', row)">编辑</el-button>
+          <el-button size="small" type="primary" @click="$emit('manage-products', row.StoreID)">管理商品</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </template>
+  
+  <script setup lang="ts">
+  import { defineProps, defineEmits } from 'vue'
+  import type { StoreSummary } from '@/api/store'
+  
+  const props = defineProps<{ stores: StoreSummary[]; loading: boolean }>()
+  const emits = defineEmits<{
+    (e: 'edit', store: StoreSummary): void
+    (e: 'manage-products', storeId: number): void
+  }>()
+  
+  const getStatusType = (status: string) => ({ ACTIVE: 'success', INACTIVE: 'warning', CLOSED: 'danger' }[status] || 'info')
+  const translateStatus = (status: string) => ({ ACTIVE: '营业中', INACTIVE: '休息中', CLOSED: '已关闭' }[status] || status)
+  </script>
+  
\ No newline at end of file
diff --git a/src/frontend/src/router/index.js b/src/frontend/src/router/index.js
index 44f05e3..a71b52a 100644
--- a/src/frontend/src/router/index.js
+++ b/src/frontend/src/router/index.js
@@ -33,7 +33,7 @@ const router = createRouter({
     {
       path: '/merchant',
       name: 'Merchant',
-      component: () => import('../views/Analysis/Dashboard.vue'),
+      component: () => import('../views/DashBoard/Dashboard.vue'),
     },
     {
       path: '/explore',
diff --git a/src/frontend/src/views/Analysis/Dashboard.vue b/src/frontend/src/views/DashBoard/Dashboard.vue
similarity index 90%
rename from src/frontend/src/views/Analysis/Dashboard.vue
rename to src/frontend/src/views/DashBoard/Dashboard.vue
index 0e23c21..62d8a68 100644
--- a/src/frontend/src/views/Analysis/Dashboard.vue
+++ b/src/frontend/src/views/DashBoard/Dashboard.vue
@@ -15,10 +15,10 @@ import {
   Shop
 } from '@element-plus/icons-vue'
 
-import General from '@/components/dashboard/General.vue'
-import OrderManage from '@/components/dashboard/OrderManage.vue'
-import StoreManagement from '@/components/dashboard/StoreManagement.vue'
-import StoreChangeRequests from '@/components/dashboard/StoreChangeRequests.vue'
+import General from '@/components/dashboard/merchant/General.vue'
+import OrderManage from '@/components/dashboard/merchant/OrderManage.vue'
+import StoreManagement from '@/components/dashboard/merchant/StoreManagement.vue'
+import StoreChangeRequests from '@/components/dashboard/merchant/StoreChangeRequests.vue'
 
 /** 菜单配置（icon 直接放组件） */
 const menus = [
diff --git a/src/openapi.json b/src/openapi.json
new file mode 100644
index 0000000..881b38a
--- /dev/null
+++ b/src/openapi.json
@@ -0,0 +1 @@
+{"openapi":"3.1.0","info":{"title":"FastAPI","version":"0.1.0"},"paths":{"/api/v1/user/register":{"post":{"tags":["API V1","User Accounts"],"summary":"Register User","description":"注册新用户。\n:param user_in: 用户创建数据模型\n:param db: 数据库连接\n:param user_service: 用户服务实例\n:param performing_user_id: 执行操作的用户 ID（通常是管理员或NULL）\n:return: 注册成功的用户响应模型","operationId":"register_user_api_v1_user_register_post","parameters":[{"name":"performing_user_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Performing User Id"}}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserCreate"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/user/me":{"get":{"tags":["API V1","User Accounts","Users"],"summary":"Get Current User Information","description":"获取当前已认证用户的信息。\n如果token无效或会话过期，此端点将不会被执行，而是返回401错误。","operationId":"read_users_me_api_v1_user_me_get","parameters":[{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/product":{"post":{"tags":["API V1","Products"],"summary":"Create Product","description":"创建新商品\n:param product_in: 商品创建数据模型\n:param db: 数据库连接\n:param current_user_id: 当前用户ID（应该由认证中间件提供）\n:param product_service: 产品服务实例\n:return: 创建成功的商品响应模型","operationId":"create_product_api_v1_product_post","parameters":[{"name":"current_user_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Current User Id"}}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/ProductCreate"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ProductResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"get":{"tags":["API V1","Products"],"summary":"List Products","description":"获取商品列表，支持按店铺、分类筛选或搜索（保留兼容旧版接口）\n:param query_params: 商品查询参数\n:param db: 数据库连接\n:param current_user_id: 当前用户ID\n:param product_service: 产品服务实例\n:return: 商品列表","operationId":"list_products_api_v1_product_get","parameters":[{"name":"current_user_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Current User Id"}},{"name":"store_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer","exclusiveMinimum":0},{"type":"null"}],"title":"Store Id"}},{"name":"category_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer","exclusiveMinimum":0},{"type":"null"}],"title":"Category Id"}},{"name":"search","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Search"}},{"name":"limit","in":"query","required":false,"schema":{"type":"integer","maximum":1000,"minimum":1,"default":100,"title":"Limit"}},{"name":"offset","in":"query","required":false,"schema":{"type":"integer","minimum":0,"default":0,"title":"Offset"}}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/ProductResponse"},"title":"Response List Products Api V1 Product Get"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/product/{product_id}":{"get":{"tags":["API V1","Products"],"summary":"Get Product","description":"获取特定商品的详细信息\n:param product_id: 商品ID\n:param db: 数据库连接\n:param current_user_id: 当前用户ID\n:param product_service: 产品服务实例\n:return: 商品详细信息","operationId":"get_product_api_v1_product__product_id__get","parameters":[{"name":"product_id","in":"path","required":true,"schema":{"type":"integer","title":"Product Id"}},{"name":"current_user_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Current User Id"}}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ProductWithCategoryInfo"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"put":{"tags":["API V1","Products"],"summary":"Update Product","description":"更新商品信息\n:param product_id: 商品ID\n:param product_update: 商品更新数据模型\n:param db: 数据库连接\n:param current_user_id: 当前用户ID\n:param product_service: 产品服务实例\n:return: 更新后的商品信息","operationId":"update_product_api_v1_product__product_id__put","parameters":[{"name":"product_id","in":"path","required":true,"schema":{"type":"integer","title":"Product Id"}},{"name":"current_user_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Current User Id"}}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/ProductUpdate"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ProductResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"delete":{"tags":["API V1","Products"],"summary":"Delete Product","description":"删除商品（将状态设置为DISCONTINUED）\n:param product_id: 商品ID\n:param db: 数据库连接\n:param current_user_id: 当前用户ID\n:param product_service: 产品服务实例","operationId":"delete_product_api_v1_product__product_id__delete","parameters":[{"name":"product_id","in":"path","required":true,"schema":{"type":"integer","title":"Product Id"}},{"name":"current_user_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Current User Id"}}],"responses":{"204":{"description":"Successful Response"},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/product/customer":{"get":{"tags":["API V1","Products"],"summary":"List Products For Customer","description":"获取面向普通用户的商品列表，只返回ACTIVE状态的商品\n:param query_params: 商品查询参数\n:param db: 数据库连接\n:param current_user_id: 当前用户ID\n:param product_service: 产品服务实例\n:return: 商品列表","operationId":"list_products_for_customer_api_v1_product_customer_get","parameters":[{"name":"current_user_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Current User Id"}},{"name":"TextInclude","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Textinclude"}},{"name":"CategoryID","in":"query","required":false,"schema":{"anyOf":[{"type":"integer","exclusiveMinimum":0},{"type":"null"}],"title":"Categoryid"}},{"name":"StoreID","in":"query","required":false,"schema":{"anyOf":[{"type":"integer","exclusiveMinimum":0},{"type":"null"}],"title":"Storeid"}},{"name":"MinPrice","in":"query","required":false,"schema":{"anyOf":[{"type":"number","minimum":0.0},{"type":"string"},{"type":"null"}],"title":"Minprice"}},{"name":"MaxPrice","in":"query","required":false,"schema":{"anyOf":[{"type":"number","exclusiveMinimum":0.0},{"type":"string"},{"type":"null"}],"title":"Maxprice"}},{"name":"OrderBy","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Orderby"}},{"name":"Offset","in":"query","required":false,"schema":{"type":"integer","minimum":0,"default":0,"title":"Offset"}},{"name":"Limit","in":"query","required":false,"schema":{"type":"integer","maximum":100,"minimum":1,"default":20,"title":"Limit"}}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/ProductResponse"},"title":"Response List Products For Customer Api V1 Product Customer Get"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/product/merchant":{"get":{"tags":["API V1","Products"],"summary":"List Products For Merchant","description":"获取面向商家的商品列表，支持按商品状态筛选\n:param query_params: 商品查询参数\n:param db: 数据库连接\n:param current_user_id: 当前用户ID\n:param product_service: 产品服务实例\n:return: 商品列表","operationId":"list_products_for_merchant_api_v1_product_merchant_get","parameters":[{"name":"current_user_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Current User Id"}},{"name":"TextInclude","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Textinclude"}},{"name":"CategoryID","in":"query","required":false,"schema":{"anyOf":[{"type":"integer","exclusiveMinimum":0},{"type":"null"}],"title":"Categoryid"}},{"name":"StoreID","in":"query","required":false,"schema":{"anyOf":[{"type":"integer","exclusiveMinimum":0},{"type":"null"}],"title":"Storeid"}},{"name":"MinPrice","in":"query","required":false,"schema":{"anyOf":[{"type":"number","minimum":0.0},{"type":"string"},{"type":"null"}],"title":"Minprice"}},{"name":"MaxPrice","in":"query","required":false,"schema":{"anyOf":[{"type":"number","exclusiveMinimum":0.0},{"type":"string"},{"type":"null"}],"title":"Maxprice"}},{"name":"OrderBy","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Orderby"}},{"name":"Offset","in":"query","required":false,"schema":{"type":"integer","minimum":0,"default":0,"title":"Offset"}},{"name":"Limit","in":"query","required":false,"schema":{"type":"integer","maximum":100,"minimum":1,"default":20,"title":"Limit"}},{"name":"ProductStatus","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Productstatus"}}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/ProductResponse"},"title":"Response List Products For Merchant Api V1 Product Merchant Get"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/product/admin":{"get":{"tags":["API V1","Products"],"summary":"List Products For Admin","description":"获取面向管理员的商品列表，支持完整的筛选和排序功能\n:param query_params: 商品查询参数\n:param db: 数据库连接\n:param current_user_id: 当前用户ID\n:param product_service: 产品服务实例\n:return: 商品列表","operationId":"list_products_for_admin_api_v1_product_admin_get","parameters":[{"name":"current_user_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Current User Id"}},{"name":"TextInclude","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Textinclude"}},{"name":"CategoryID","in":"query","required":false,"schema":{"anyOf":[{"type":"integer","exclusiveMinimum":0},{"type":"null"}],"title":"Categoryid"}},{"name":"StoreID","in":"query","required":false,"schema":{"anyOf":[{"type":"integer","exclusiveMinimum":0},{"type":"null"}],"title":"Storeid"}},{"name":"MinPrice","in":"query","required":false,"schema":{"anyOf":[{"type":"number","minimum":0.0},{"type":"string"},{"type":"null"}],"title":"Minprice"}},{"name":"MaxPrice","in":"query","required":false,"schema":{"anyOf":[{"type":"number","exclusiveMinimum":0.0},{"type":"string"},{"type":"null"}],"title":"Maxprice"}},{"name":"OrderBy","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Orderby"}},{"name":"Offset","in":"query","required":false,"schema":{"type":"integer","minimum":0,"default":0,"title":"Offset"}},{"name":"Limit","in":"query","required":false,"schema":{"type":"integer","maximum":100,"minimum":1,"default":20,"title":"Limit"}},{"name":"ProductStatus","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Productstatus"}}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/ProductResponse"},"title":"Response List Products For Admin Api V1 Product Admin Get"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/product/{product_id}/stock":{"put":{"tags":["API V1","Products"],"summary":"Update Product Stock","description":"更新商品库存\n:param product_id: 商品ID\n:param stock_change: 库存变化量（正数增加，负数减少）\n:param db: 数据库连接\n:param current_user_id: 当前用户ID\n:param product_service: 产品服务实例\n:return: 更新后的商品信息","operationId":"update_product_stock_api_v1_product__product_id__stock_put","parameters":[{"name":"product_id","in":"path","required":true,"schema":{"type":"integer","title":"Product Id"}},{"name":"stock_change","in":"query","required":true,"schema":{"type":"integer","title":"Stock Change"}},{"name":"current_user_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Current User Id"}}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ProductResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/category":{"post":{"tags":["API V1","Product Categories"],"summary":"Create Category","description":"创建新商品分类\n:param category_in: 分类创建数据模型\n:param db: 数据库连接\n:param current_user_id: 当前用户ID（应该由认证中间件提供）\n:return: 创建成功的分类响应模型","operationId":"create_category_api_v1_category_post","parameters":[{"name":"current_user_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Current User Id"}}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/CategoryCreate"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/CategoryResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"get":{"tags":["API V1","Product Categories"],"summary":"List Categories","description":"获取分类列表，如果指定了parent_id，则获取该分类的子分类，否则获取所有一级分类\n:param parent_id: 父分类ID，可选\n:param db: 数据库连接\n:param current_user_id: 当前用户ID\n:return: 分类列表","operationId":"list_categories_api_v1_category_get","parameters":[{"name":"parent_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Parent Id"}},{"name":"current_user_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Current User Id"}}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/CategoryResponse"},"title":"Response List Categories Api V1 Category Get"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/category/tree":{"get":{"tags":["API V1","Product Categories"],"summary":"Get Category Tree","description":"获取分类树结构\n:param db: 数据库连接\n:param current_user_id: 当前用户ID\n:return: 树形结构的分类列表","operationId":"get_category_tree_api_v1_category_tree_get","parameters":[{"name":"current_user_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Current User Id"}}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/CategoryWithChildren"},"title":"Response Get Category Tree Api V1 Category Tree Get"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/category/{category_id}":{"get":{"tags":["API V1","Product Categories"],"summary":"Get Category","description":"获取特定分类的详细信息\n:param category_id: 分类ID\n:param db: 数据库连接\n:param current_user_id: 当前用户ID\n:return: 分类详细信息","operationId":"get_category_api_v1_category__category_id__get","parameters":[{"name":"category_id","in":"path","required":true,"schema":{"type":"integer","title":"Category Id"}},{"name":"current_user_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Current User Id"}}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/CategoryResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"put":{"tags":["API V1","Product Categories"],"summary":"Update Category","description":"更新分类信息\n:param category_id: 分类ID\n:param category_update: 分类更新数据模型\n:param db: 数据库连接\n:param current_user_id: 当前用户ID\n:return: 更新后的分类信息","operationId":"update_category_api_v1_category__category_id__put","parameters":[{"name":"category_id","in":"path","required":true,"schema":{"type":"integer","title":"Category Id"}},{"name":"current_user_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Current User Id"}}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/CategoryUpdate"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/CategoryResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"delete":{"tags":["API V1","Product Categories"],"summary":"Delete Category","description":"删除分类\n:param category_id: 分类ID\n:param db: 数据库连接\n:param current_user_id: 当前用户ID","operationId":"delete_category_api_v1_category__category_id__delete","parameters":[{"name":"category_id","in":"path","required":true,"schema":{"type":"integer","title":"Category Id"}},{"name":"current_user_id","in":"query","required":false,"schema":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Current User Id"}}],"responses":{"204":{"description":"Successful Response"},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/auth/token":{"post":{"tags":["API V1","Authentication","Authentication"],"summary":"Login For Access Token","description":"用户登录以获取访问令牌。\n使用 OAuth2PasswordRequestForm，客户端应以表单形式提交 `username` 和 `password`。\n这里的 `form_data.username` 将被用作 `identifier`。","operationId":"login_for_access_token_api_v1_auth_token_post","requestBody":{"content":{"application/x-www-form-urlencoded":{"schema":{"$ref":"#/components/schemas/Body_login_for_access_token_api_v1_auth_token_post"}}},"required":true},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/Token"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/auth/logout":{"post":{"tags":["API V1","Authentication","Authentication"],"summary":"Logout Current Session","description":"登出当前用户的当前会话。\n客户端必须在其 Authorization header 中提供有效的 Bearer token。","operationId":"logout_current_session_api_v1_auth_logout_post","parameters":[{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"object","additionalProperties":{"type":"string"},"title":"Response Logout Current Session Api V1 Auth Logout Post"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/auth/logout-all":{"post":{"tags":["API V1","Authentication","Authentication"],"summary":"Logout All Sessions for Current User","description":"登出当前用户的所有会话（所有设备）。","operationId":"logout_all_sessions_api_v1_auth_logout_all_post","parameters":[{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"object","additionalProperties":true,"title":"Response Logout All Sessions Api V1 Auth Logout All Post"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/cart/":{"get":{"tags":["API V1","Shopping Cart","Shopping Cart"],"summary":"获取当前用户的购物车内容","description":"检索当前已认证用户的完整购物车信息。\n包括所有商品条目、条目数量。","operationId":"get_user_cart_api_v1_cart__get","parameters":[{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/CartResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"delete":{"tags":["API V1","Shopping Cart","Shopping Cart"],"summary":"清空当前用户的购物车","description":"删除当前已认证用户购物车中的所有商品条目。","operationId":"clear_user_cart_api_v1_cart__delete","parameters":[{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/CartActionResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/cart/items":{"post":{"tags":["API V1","Shopping Cart","Shopping Cart"],"summary":"向购物车添加新商品或增加已存在商品的数量","description":"将指定商品添加到当前用户的购物车。\n如果商品已存在于购物车中，通常会增加其数量（具体行为由服务层定义）。\n需要提供 `ProductID` 和 `Quantity`。","operationId":"add_item_to_cart_api_v1_cart_items_post","parameters":[{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/CartItemCreateRequest"}}}},"responses":{"201":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/CartItemResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/cart/items/{cart_item_id}":{"put":{"tags":["API V1","Shopping Cart","Shopping Cart"],"summary":"更新购物车中特定商品的数量","description":"更新购物车中指定 `CartItemID` 的商品数量。\n新的 `Quantity` 必须大于0。","operationId":"update_cart_item_quantity_api_v1_cart_items__cart_item_id__put","parameters":[{"name":"cart_item_id","in":"path","required":true,"schema":{"type":"integer","exclusiveMinimum":0,"title":"购物车条目ID","description":"要更新的购物车条目的唯一ID"},"description":"要更新的购物车条目的唯一ID"},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/CartItemUpdateRequest"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/CartItemResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"delete":{"tags":["API V1","Shopping Cart","Shopping Cart"],"summary":"从购物车中移除特定商品条目","description":"根据 `CartItemID` 从当前用户的购物车中移除一个商品条目。","operationId":"remove_cart_item_api_v1_cart_items__cart_item_id__delete","parameters":[{"name":"cart_item_id","in":"path","required":true,"schema":{"type":"integer","exclusiveMinimum":0,"title":"购物车条目ID","description":"要移除的购物车条目的唯一ID"},"description":"要移除的购物车条目的唯一ID"},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/CartActionResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/address/":{"post":{"tags":["API V1","Shipping Addresses","Shipping Addresses"],"summary":"为当前用户添加新的收货地址","description":"为当前认证的用户创建一个新的收货地址。\n如果 `IsDefault` 在请求中为 `true`，服务层需要处理将其他地址设为非默认的逻辑，\n并更新用户的 `DefaultAddressID`。","operationId":"add_new_address_api_v1_address__post","parameters":[{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/AddressCreateRequest"}}}},"responses":{"201":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/AddressResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"get":{"tags":["API V1","Shipping Addresses","Shipping Addresses"],"summary":"获取当前用户的所有收货地址","description":"检索当前已认证用户的所有收货地址列表。","operationId":"get_user_addresses_api_v1_address__get","parameters":[{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/AddressListResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/address/{address_id}":{"get":{"tags":["API V1","Shipping Addresses","Shipping Addresses"],"summary":"获取特定收货地址的详情","description":"根据 AddressID 获取单个收货地址的详细信息。\n需要验证该地址是否属于当前用户。","operationId":"get_address_by_id_api_v1_address__address_id__get","parameters":[{"name":"address_id","in":"path","required":true,"schema":{"type":"integer","exclusiveMinimum":0,"title":"地址ID","description":"要检索的地址的唯一ID"},"description":"要检索的地址的唯一ID"},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/AddressResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"put":{"tags":["API V1","Shipping Addresses","Shipping Addresses"],"summary":"更新现有收货地址的详情","description":"更新指定 `AddressID` 的收货地址的文本内容（收货人、电话、地址详情）。\n此端点不处理将地址设为默认的逻辑。\n需要验证该地址是否属于当前用户。","operationId":"update_address_details_api_v1_address__address_id__put","parameters":[{"name":"address_id","in":"path","required":true,"schema":{"type":"integer","exclusiveMinimum":0,"title":"地址ID","description":"要更新的地址的唯一ID"},"description":"要更新的地址的唯一ID"},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/AddressUpdateRequest"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/AddressResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"delete":{"tags":["API V1","Shipping Addresses","Shipping Addresses"],"summary":"删除用户的特定收货地址","description":"根据 `AddressID` 删除当前用户的某个收货地址。\n需要验证该地址是否属于当前用户。\n如果删除的是默认地址，服务层需要处理 `User.DefaultAddressID` 的更新 (例如设为 NULL)。","operationId":"delete_address_api_v1_address__address_id__delete","parameters":[{"name":"address_id","in":"path","required":true,"schema":{"type":"integer","exclusiveMinimum":0,"title":"地址ID","description":"要删除的地址的唯一ID"},"description":"要删除的地址的唯一ID"},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"204":{"description":"Successful Response"},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/address/{address_id}/set-default":{"post":{"tags":["API V1","Shipping Addresses","Shipping Addresses"],"summary":"将指定地址设为当前用户的默认收货地址","description":"将指定的 `AddressID` 设置为当前认证用户的默认收货地址。\n服务层需要处理以下逻辑：\n1. 验证 `address_id` 属于 `current_user`。\n2. 将该用户的所有其他地址的 `IsDefault` 设为 `false`。\n3. 将目标 `address_id` 的 `IsDefault` 设为 `true`。\n4. 更新 `User` 表中该用户的 `DefaultAddressID` 字段。","operationId":"set_address_as_default_api_v1_address__address_id__set_default_post","parameters":[{"name":"address_id","in":"path","required":true,"schema":{"type":"integer","exclusiveMinimum":0,"title":"地址ID","description":"要设为默认的地址的唯一ID"},"description":"要设为默认的地址的唯一ID"},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/SetDefaultAddressResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/order/create":{"post":{"tags":["API V1","Orders","Orders"],"summary":"创建新订单 (基于购物车项目)","description":"为当前认证的用户创建一个或多个新订单（可能按店铺拆分）。\n- 从请求中获取要购买的购物车项目列表和收货地址。\n- 服务层将处理库存扣减。\n- 服务层将创建支付事务，并将订单关联到此事务。\n- 响应包含支付事务ID、支付URL（如果适用）以及创建的订单列表。","operationId":"create_order_from_cart_items_api_v1_order_create_post","parameters":[{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/OrderCreateRequest"}}}},"responses":{"201":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/InitiateOrderResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/order/":{"get":{"tags":["API V1","Orders","Orders"],"summary":"获取当前用户的所有订单列表，应当是一个按照创建时间降序的列表。","description":"检索当前已认证用户的所有订单列表，支持分页。","operationId":"get_my_orders_api_v1_order__get","parameters":[{"name":"offset","in":"query","required":false,"schema":{"type":"integer","default":0,"title":"Offset"}},{"name":"limit","in":"query","required":false,"schema":{"type":"integer","default":20,"title":"Limit"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/OrderListResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/order/{order_id}":{"get":{"tags":["API V1","Orders","Orders"],"summary":"获取单个订单的详细信息","description":"根据 OrderID 获取单个订单的详细信息。\n服务层需要验证该订单是否属于当前用户（或当前用户是否为管理员）。","operationId":"get_order_details_api_v1_order__order_id__get","parameters":[{"name":"order_id","in":"path","required":true,"schema":{"type":"integer","exclusiveMinimum":0,"title":"订单ID","description":"要检索的订单的唯一ID"},"description":"要检索的订单的唯一ID"},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/OrderViewResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/order/{order_id}/status":{"put":{"tags":["API V1","Orders","Orders"],"summary":"更新订单状态 (例如：用户取消或确认收货)","description":"允许用户更新其订单的状态。\n例如：\n- 用户可以将 `PENDING_PAYMENT` 或 `PROCESSING` 状态的订单取消为 `CANCELLED_BY_USER`。\n- 用户可以将 `SHIPPED` 状态的订单更新为 `DELIVERED` (确认收货)。\n服务层需要包含严格的状态转换逻辑和权限检查。","operationId":"update_order_status_by_user_api_v1_order__order_id__status_put","parameters":[{"name":"order_id","in":"path","required":true,"schema":{"type":"integer","exclusiveMinimum":0,"title":"订单ID","description":"要更新状态的订单的唯一ID"},"description":"要更新状态的订单的唯一ID"},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/OrderUpdateStatusRequest"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/OrderActionResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/payment/{payment_transaction_id}/simulate-pay":{"post":{"tags":["API V1","Payments","Payments"],"summary":"模拟用户确认支付并处理支付事务","description":"模拟用户在其选择的支付方式上“确认支付”后的后端处理流程。\n此端点将：\n1. 验证 payment_transaction_id 是否有效且属于当前用户。\n2. 根据 `payment_details_in.SimulatedPaymentMethod` (例如 'mock_success_pay') 模拟支付成功或失败。\n3. 更新数据库中 `PaymentTransaction` 表的状态。\n4. 如果支付成功，更新所有关联 `Order` 表的状态。\n5. 返回一个包含最终支付状态和用户应重定向到的URL的响应。","operationId":"simulate_payment_processing_api_v1_payment__payment_transaction_id__simulate_pay_post","parameters":[{"name":"payment_transaction_id","in":"path","required":true,"schema":{"type":"integer","exclusiveMinimum":0,"description":"要处理的系统内部支付事务ID。","title":"Payment Transaction Id"},"description":"要处理的系统内部支付事务ID。"},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/SimulatedExternPaymentResponse"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/PaymentProcessingResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/payment/{payment_transaction_id}/status":{"get":{"tags":["API V1","Payments","Payments"],"summary":"查询特定支付事务的状态","description":"查询特定支付事务的当前状态。\n服务层需要验证该支付事务是否属于当前用户。","operationId":"get_payment_transaction_status_api_v1_payment__payment_transaction_id__status_get","parameters":[{"name":"payment_transaction_id","in":"path","required":true,"schema":{"type":"integer","exclusiveMinimum":0,"description":"要查询状态的系统内部支付事务ID。","title":"Payment Transaction Id"},"description":"要查询状态的系统内部支付事务ID。"},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/PaymentResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/store/info/{store_id}":{"get":{"tags":["API V1","Store","Store"],"summary":"获取店铺信息。当前默认都是普通顾客，只能查看ACTIVE的店铺","description":"获取指定店铺的信息。","operationId":"get_store_info_api_v1_store_info__store_id__get","parameters":[{"name":"store_id","in":"path","required":true,"schema":{"type":"integer","description":"店铺 ID","title":"Store Id"},"description":"店铺 ID"},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/StoreResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/store/owner/{owner_user_id}":{"get":{"tags":["API V1","Store","Store"],"summary":"获取店主的所有店铺","description":"获取指定店主的所有店铺。","operationId":"get_stores_by_owner_api_v1_store_owner__owner_user_id__get","parameters":[{"name":"owner_user_id","in":"path","required":true,"schema":{"type":"integer","description":"店主用户 ID","title":"Owner User Id"},"description":"店主用户 ID"},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/StoreListResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/store/list":{"get":{"tags":["API V1","Store","Store"],"summary":"获取所有店铺的简要信息。只能查看ACTIVE的店铺","description":"获取所有店铺的简要信息。","operationId":"get_all_stores_simple_api_v1_store_list_get","parameters":[{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/StoreListSimpleResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/store/list-full":{"get":{"tags":["API V1","Store","Store"],"summary":"获取所有店铺的完整信息。只能查看ACTIVE的店铺","description":"获取所有店铺的信息。","operationId":"get_all_stores_api_v1_store_list_full_get","parameters":[{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/StoreListResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/store-change":{"post":{"tags":["API V1","Store Change Requests"],"summary":"Create Store Change Request","description":"创建新店铺变更请求\n:param change_request_in: 变更请求创建数据模型\n:param db: 数据库连接\n:param current_user: 当前用户（由认证中间件提供）\n:param change_request_service: 变更请求服务实例\n:return: 创建成功的变更请求响应模型","operationId":"create_store_change_request_api_v1_store_change_post","parameters":[{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/StoreChangeRequestCreate"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/StoreChangeRequestResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"get":{"tags":["API V1","Store Change Requests"],"summary":"Filter Store Change Requests","description":"过滤店铺变更请求列表\n:param query_params: 查询参数\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例\n:return: 变更请求列表","operationId":"filter_store_change_requests_api_v1_store_change_get","parameters":[{"name":"StoreID","in":"query","required":false,"schema":{"anyOf":[{"type":"integer","exclusiveMinimum":0},{"type":"null"}],"title":"Storeid"}},{"name":"RequestingUserID","in":"query","required":false,"schema":{"anyOf":[{"type":"integer","exclusiveMinimum":0},{"type":"null"}],"title":"Requestinguserid"}},{"name":"RequestType","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Requesttype"}},{"name":"Status","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Status"}},{"name":"AdminReviewerID","in":"query","required":false,"schema":{"anyOf":[{"type":"integer","exclusiveMinimum":0},{"type":"null"}],"title":"Adminreviewerid"}},{"name":"StartDate","in":"query","required":false,"schema":{"anyOf":[{"type":"string","format":"date-time"},{"type":"null"}],"title":"Startdate"}},{"name":"EndDate","in":"query","required":false,"schema":{"anyOf":[{"type":"string","format":"date-time"},{"type":"null"}],"title":"Enddate"}},{"name":"Offset","in":"query","required":false,"schema":{"type":"integer","minimum":0,"default":0,"title":"Offset"}},{"name":"Limit","in":"query","required":false,"schema":{"type":"integer","maximum":100,"minimum":1,"default":20,"title":"Limit"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/StoreChangeRequestResponse"},"title":"Response Filter Store Change Requests Api V1 Store Change Get"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/store-change/{request_id}":{"get":{"tags":["API V1","Store Change Requests"],"summary":"Get Store Change Request","description":"获取特定店铺变更请求的详细信息\n:param request_id: 变更请求ID\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例\n:return: 变更请求详细信息","operationId":"get_store_change_request_api_v1_store_change__request_id__get","parameters":[{"name":"request_id","in":"path","required":true,"schema":{"type":"integer","title":"Request Id"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/StoreChangeRequestResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"put":{"tags":["API V1","Store Change Requests"],"summary":"Update Store Change Request","description":"更新店铺变更请求信息\n:param request_id: 变更请求ID\n:param update_data: 更新数据\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例\n:return: 更新后的变更请求信息","operationId":"update_store_change_request_api_v1_store_change__request_id__put","parameters":[{"name":"request_id","in":"path","required":true,"schema":{"type":"integer","title":"Request Id"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/StoreChangeRequestUpdate"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/StoreChangeRequestResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"delete":{"tags":["API V1","Store Change Requests"],"summary":"Cancel Store Change Request","description":"取消店铺变更请求（用户自行取消）\n:param request_id: 变更请求ID\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例","operationId":"cancel_store_change_request_api_v1_store_change__request_id__delete","parameters":[{"name":"request_id","in":"path","required":true,"schema":{"type":"integer","title":"Request Id"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"204":{"description":"Successful Response"},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/store-change/by-store/{store_id}":{"get":{"tags":["API V1","Store Change Requests"],"summary":"Get Store Change Requests By Store","description":"获取指定店铺的变更请求列表\n:param store_id: 店铺ID\n:param status: 请求状态，可选\n:param limit: 返回结果数量限制\n:param offset: 分页偏移量\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例\n:return: 变更请求列表","operationId":"get_store_change_requests_by_store_api_v1_store_change_by_store__store_id__get","parameters":[{"name":"store_id","in":"path","required":true,"schema":{"type":"integer","title":"Store Id"}},{"name":"status","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Status"}},{"name":"limit","in":"query","required":false,"schema":{"type":"integer","default":100,"title":"Limit"}},{"name":"offset","in":"query","required":false,"schema":{"type":"integer","default":0,"title":"Offset"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/StoreChangeRequestResponse"},"title":"Response Get Store Change Requests By Store Api V1 Store Change By Store  Store Id  Get"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/store-change/by-user/{user_id}":{"get":{"tags":["API V1","Store Change Requests"],"summary":"Get Store Change Requests By User","description":"获取指定用户的店铺变更请求列表\n:param user_id: 用户ID\n:param status: 请求状态，可选\n:param limit: 返回结果数量限制\n:param offset: 分页偏移量\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例\n:return: 变更请求列表","operationId":"get_store_change_requests_by_user_api_v1_store_change_by_user__user_id__get","parameters":[{"name":"user_id","in":"path","required":true,"schema":{"type":"integer","title":"User Id"}},{"name":"status","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Status"}},{"name":"limit","in":"query","required":false,"schema":{"type":"integer","default":100,"title":"Limit"}},{"name":"offset","in":"query","required":false,"schema":{"type":"integer","default":0,"title":"Offset"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/StoreChangeRequestResponse"},"title":"Response Get Store Change Requests By User Api V1 Store Change By User  User Id  Get"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/store-change/admin/pending":{"get":{"tags":["API V1","Store Change Requests"],"summary":"Get All Pending Store Change Requests","description":"获取所有待审核的店铺变更请求列表（管理员专用）\n:param limit: 返回结果数量限制\n:param offset: 分页偏移量\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例\n:return: 变更请求列表","operationId":"get_all_pending_store_change_requests_api_v1_store_change_admin_pending_get","parameters":[{"name":"limit","in":"query","required":false,"schema":{"type":"integer","default":100,"title":"Limit"}},{"name":"offset","in":"query","required":false,"schema":{"type":"integer","default":0,"title":"Offset"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/StoreChangeRequestResponse"},"title":"Response Get All Pending Store Change Requests Api V1 Store Change Admin Pending Get"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/store-change/{request_id}/admin":{"put":{"tags":["API V1","Store Change Requests"],"summary":"Admin Update Store Change Request","description":"管理员审核店铺变更请求\n:param request_id: 变更请求ID\n:param admin_update: 管理员更新数据\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例\n:return: 更新后的变更请求信息","operationId":"admin_update_store_change_request_api_v1_store_change__request_id__admin_put","parameters":[{"name":"request_id","in":"path","required":true,"schema":{"type":"integer","title":"Request Id"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/StoreChangeRequestAdminUpdate"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/StoreChangeRequestResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/product-change":{"post":{"tags":["API V1","Product Change Requests"],"summary":"Create Product Change Request","description":"创建新商品变更请求\n:param change_request_in: 变更请求创建数据模型\n:param db: 数据库连接\n:param current_user: 当前用户（由认证中间件提供）\n:param change_request_service: 变更请求服务实例\n:return: 创建成功的变更请求响应模型","operationId":"create_product_change_request_api_v1_product_change_post","parameters":[{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/ProductChangeRequestCreate"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ProductChangeRequestResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"get":{"tags":["API V1","Product Change Requests"],"summary":"Filter Product Change Requests","description":"过滤商品变更请求列表\n:param query_params: 查询参数\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例\n:return: 变更请求列表","operationId":"filter_product_change_requests_api_v1_product_change_get","parameters":[{"name":"ProductID","in":"query","required":false,"schema":{"anyOf":[{"type":"integer","exclusiveMinimum":0},{"type":"null"}],"title":"Productid"}},{"name":"StoreID","in":"query","required":false,"schema":{"anyOf":[{"type":"integer","exclusiveMinimum":0},{"type":"null"}],"title":"Storeid"}},{"name":"MerchantUserID","in":"query","required":false,"schema":{"anyOf":[{"type":"integer","exclusiveMinimum":0},{"type":"null"}],"title":"Merchantuserid"}},{"name":"RequestType","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Requesttype"}},{"name":"Status","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Status"}},{"name":"AdminReviewerID","in":"query","required":false,"schema":{"anyOf":[{"type":"integer","exclusiveMinimum":0},{"type":"null"}],"title":"Adminreviewerid"}},{"name":"StartDate","in":"query","required":false,"schema":{"anyOf":[{"type":"string","format":"date-time"},{"type":"null"}],"title":"Startdate"}},{"name":"EndDate","in":"query","required":false,"schema":{"anyOf":[{"type":"string","format":"date-time"},{"type":"null"}],"title":"Enddate"}},{"name":"Offset","in":"query","required":false,"schema":{"type":"integer","minimum":0,"default":0,"title":"Offset"}},{"name":"Limit","in":"query","required":false,"schema":{"type":"integer","maximum":100,"minimum":1,"default":20,"title":"Limit"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/ProductChangeRequestResponse"},"title":"Response Filter Product Change Requests Api V1 Product Change Get"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/product-change/{request_id}":{"get":{"tags":["API V1","Product Change Requests"],"summary":"Get Product Change Request","description":"获取特定商品变更请求的详细信息\n:param request_id: 变更请求ID\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例\n:return: 变更请求详细信息","operationId":"get_product_change_request_api_v1_product_change__request_id__get","parameters":[{"name":"request_id","in":"path","required":true,"schema":{"type":"integer","title":"Request Id"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ProductChangeRequestResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"put":{"tags":["API V1","Product Change Requests"],"summary":"Update Product Change Request","description":"更新商品变更请求信息\n:param request_id: 变更请求ID\n:param update_data: 更新数据\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例\n:return: 更新后的变更请求信息","operationId":"update_product_change_request_api_v1_product_change__request_id__put","parameters":[{"name":"request_id","in":"path","required":true,"schema":{"type":"integer","title":"Request Id"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/ProductChangeRequestUpdate"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ProductChangeRequestResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"delete":{"tags":["API V1","Product Change Requests"],"summary":"Cancel Product Change Request","description":"取消商品变更请求（商家自行取消）\n:param request_id: 变更请求ID\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例","operationId":"cancel_product_change_request_api_v1_product_change__request_id__delete","parameters":[{"name":"request_id","in":"path","required":true,"schema":{"type":"integer","title":"Request Id"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"204":{"description":"Successful Response"},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/product-change/by-product/{product_id}":{"get":{"tags":["API V1","Product Change Requests"],"summary":"Get Product Change Requests By Product","description":"获取指定商品的变更请求列表\n:param product_id: 商品ID\n:param request_status: 请求状态，可选\n:param limit: 返回结果数量限制\n:param offset: 分页偏移量\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例\n:return: 变更请求列表","operationId":"get_product_change_requests_by_product_api_v1_product_change_by_product__product_id__get","parameters":[{"name":"product_id","in":"path","required":true,"schema":{"type":"integer","title":"Product Id"}},{"name":"status","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Status"}},{"name":"limit","in":"query","required":false,"schema":{"type":"integer","default":100,"title":"Limit"}},{"name":"offset","in":"query","required":false,"schema":{"type":"integer","default":0,"title":"Offset"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/ProductChangeRequestResponse"},"title":"Response Get Product Change Requests By Product Api V1 Product Change By Product  Product Id  Get"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/product-change/by-store/{store_id}":{"get":{"tags":["API V1","Product Change Requests"],"summary":"Get Product Change Requests By Store","description":"获取指定店铺的商品变更请求列表\n:param store_id: 店铺ID\n:param request_status: 请求状态，可选\n:param limit: 返回结果数量限制\n:param offset: 分页偏移量\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例\n:return: 变更请求列表","operationId":"get_product_change_requests_by_store_api_v1_product_change_by_store__store_id__get","parameters":[{"name":"store_id","in":"path","required":true,"schema":{"type":"integer","title":"Store Id"}},{"name":"status","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Status"}},{"name":"limit","in":"query","required":false,"schema":{"type":"integer","default":100,"title":"Limit"}},{"name":"offset","in":"query","required":false,"schema":{"type":"integer","default":0,"title":"Offset"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/ProductChangeRequestResponse"},"title":"Response Get Product Change Requests By Store Api V1 Product Change By Store  Store Id  Get"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/product-change/by-merchant/{merchant_id}":{"get":{"tags":["API V1","Product Change Requests"],"summary":"Get Product Change Requests By Merchant","description":"获取指定商家的商品变更请求列表\n:param merchant_id: 商家用户ID\n:param request_status: 请求状态，可选\n:param limit: 返回结果数量限制\n:param offset: 分页偏移量\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例\n:return: 变更请求列表","operationId":"get_product_change_requests_by_merchant_api_v1_product_change_by_merchant__merchant_id__get","parameters":[{"name":"merchant_id","in":"path","required":true,"schema":{"type":"integer","title":"Merchant Id"}},{"name":"status","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Status"}},{"name":"limit","in":"query","required":false,"schema":{"type":"integer","default":100,"title":"Limit"}},{"name":"offset","in":"query","required":false,"schema":{"type":"integer","default":0,"title":"Offset"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/ProductChangeRequestResponse"},"title":"Response Get Product Change Requests By Merchant Api V1 Product Change By Merchant  Merchant Id  Get"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/product-change/admin/pending":{"get":{"tags":["API V1","Product Change Requests"],"summary":"Get All Pending Product Change Requests","description":"获取所有待审核的商品变更请求列表（管理员专用）\n:param limit: 返回结果数量限制\n:param offset: 分页偏移量\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例\n:return: 变更请求列表","operationId":"get_all_pending_product_change_requests_api_v1_product_change_admin_pending_get","parameters":[{"name":"limit","in":"query","required":false,"schema":{"type":"integer","default":100,"title":"Limit"}},{"name":"offset","in":"query","required":false,"schema":{"type":"integer","default":0,"title":"Offset"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/ProductChangeRequestResponse"},"title":"Response Get All Pending Product Change Requests Api V1 Product Change Admin Pending Get"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/api/v1/product-change/{request_id}/admin":{"put":{"tags":["API V1","Product Change Requests"],"summary":"Admin Update Product Change Request","description":"管理员审核商品变更请求\n:param request_id: 变更请求ID\n:param admin_update: 管理员更新数据\n:param db: 数据库连接\n:param current_user: 当前用户\n:param change_request_service: 变更请求服务实例\n:return: 更新后的变更请求信息","operationId":"admin_update_product_change_request_api_v1_product_change__request_id__admin_put","parameters":[{"name":"request_id","in":"path","required":true,"schema":{"type":"integer","title":"Request Id"}},{"name":"authorization","in":"header","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"description":"用于用户认证的 Bearer Token：`Bearer <token>`","title":"Authorization"},"description":"用于用户认证的 Bearer Token：`Bearer <token>`"}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/ProductChangeRequestAdminUpdate"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ProductChangeRequestResponse"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}},"/":{"get":{"summary":"Read Root","operationId":"read_root__get","responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{}}}}}}},"/test_db":{"get":{"summary":"Test Db","operationId":"test_db_test_db_get","responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{}}}}}}}},"components":{"schemas":{"AddressCreateRequest":{"properties":{"RecipientName":{"type":"string","maxLength":255,"minLength":1,"title":"Recipientname","description":"收货人姓名。"},"PhoneNumber":{"type":"string","maxLength":50,"minLength":5,"pattern":"^\\+?[0-9\\s\\-\\(\\)]+$","title":"Phonenumber","description":"收货人电话号码。"},"FullAddress_Text":{"type":"string","maxLength":1000,"minLength":5,"title":"Fulladdress Text","description":"完整收货地址（省市区、详细地址、邮编等）。"}},"type":"object","required":["RecipientName","PhoneNumber","FullAddress_Text"],"title":"AddressCreateRequest","description":"客户端创建新地址时发送的数据。\nUserID 将从已认证的用户中获取。"},"AddressListResponse":{"properties":{"Addresses":{"items":{"$ref":"#/components/schemas/AddressResponse"},"type":"array","title":"Addresses","description":"用户的地址列表。"},"TotalCount":{"type":"integer","title":"Totalcount","description":"地址总数。"}},"type":"object","required":["Addresses","TotalCount"],"title":"AddressListResponse","description":"API 返回用户的所有地址列表时使用的数据模型。"},"AddressResponse":{"properties":{"RecipientName":{"type":"string","maxLength":255,"minLength":1,"title":"Recipientname","description":"收货人姓名。"},"PhoneNumber":{"type":"string","maxLength":50,"minLength":5,"pattern":"^\\+?[0-9\\s\\-\\(\\)]+$","title":"Phonenumber","description":"收货人电话号码。"},"FullAddress_Text":{"type":"string","maxLength":1000,"minLength":5,"title":"Fulladdress Text","description":"完整收货地址（省市区、详细地址、邮编等）。"},"AddressID":{"type":"integer","title":"Addressid","description":"地址的唯一ID。"},"UserID":{"type":"integer","title":"Userid","description":"所属用户的ID。"},"IsDefault":{"type":"boolean","title":"Isdefault","description":"是否为默认地址。","default":false}},"type":"object","required":["RecipientName","PhoneNumber","FullAddress_Text","AddressID","UserID"],"title":"AddressResponse","description":"从 API 返回地址信息时使用的数据模型。"},"AddressUpdateRequest":{"properties":{"RecipientName":{"anyOf":[{"type":"string","maxLength":255,"minLength":1},{"type":"null"}],"title":"Recipientname","description":"新的收货人姓名 (可选)。"},"PhoneNumber":{"anyOf":[{"type":"string","maxLength":50,"minLength":5,"pattern":"^\\+?[0-9\\s\\-\\(\\)]+$"},{"type":"null"}],"title":"Phonenumber","description":"新的收货人电话号码 (可选)。"},"FullAddress_Text":{"anyOf":[{"type":"string","maxLength":1000,"minLength":5},{"type":"null"}],"title":"Fulladdress Text","description":"新的完整收货地址 (可选)。"}},"type":"object","title":"AddressUpdateRequest","description":"客户端更新现有地址时发送的数据。\n此 schema 用于更新地址的收件人姓名、电话号码和完整地址。不处理 IsDefault 字段（由专门的 API 端点处理）。\n所有字段都是可选的。"},"Body_login_for_access_token_api_v1_auth_token_post":{"properties":{"grant_type":{"anyOf":[{"type":"string","pattern":"^password$"},{"type":"null"}],"title":"Grant Type"},"username":{"type":"string","title":"Username"},"password":{"type":"string","title":"Password"},"scope":{"type":"string","title":"Scope","default":""},"client_id":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Client Id"},"client_secret":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Client Secret"}},"type":"object","required":["username","password"],"title":"Body_login_for_access_token_api_v1_auth_token_post"},"CartActionResponse":{"properties":{"Message":{"type":"string","title":"Message","description":"操作结果消息。"},"Detail":{"anyOf":[{"additionalProperties":true,"type":"object"},{"type":"null"}],"title":"Detail","description":"可选的详细信息。"}},"type":"object","required":["Message"],"title":"CartActionResponse","description":"用于购物车操作（如清空、删除条目）的通用响应。"},"CartItemCreateRequest":{"properties":{"ProductID":{"type":"integer","title":"Productid","description":"商品的唯一ID。"},"Quantity":{"type":"integer","exclusiveMinimum":0.0,"title":"Quantity","description":"商品数量，必须大于0。"}},"type":"object","required":["ProductID","Quantity"],"title":"CartItemCreateRequest","description":"客户端将商品添加到购物车时发送的数据。\nUserID 将从已认证的用户中获取。\nPriceAtAddition 将由服务层在添加时从产品信息中获取。"},"CartItemResponse":{"properties":{"ProductID":{"type":"integer","title":"Productid","description":"商品的唯一ID。"},"Quantity":{"type":"integer","exclusiveMinimum":0.0,"title":"Quantity","description":"商品数量，必须大于0。"},"CartItemID":{"type":"integer","title":"Cartitemid","description":"购物车项目的唯一ID。"},"UserID":{"type":"integer","title":"Userid","description":"所属用户的ID。"},"PriceAtAddition":{"type":"number","title":"Priceataddition","description":"商品加入购物车时的单价。"},"AddedDate":{"type":"string","format":"date-time","title":"Addeddate","description":"商品添加到购物车的时间。"},"ProductName":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Productname","description":"商品名称。"},"MainImageURL":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Mainimageurl","description":"商品主图片URL。"},"Price":{"anyOf":[{"type":"number"},{"type":"null"}],"title":"Price","description":"商品当前价格。"}},"type":"object","required":["ProductID","Quantity","CartItemID","UserID","PriceAtAddition","AddedDate"],"title":"CartItemResponse","description":"从 API 返回购物车项目信息时使用的数据模型。"},"CartItemUpdateRequest":{"properties":{"Quantity":{"type":"integer","exclusiveMinimum":0.0,"title":"Quantity","description":"新的商品数量，必须大于0。"}},"type":"object","required":["Quantity"],"title":"CartItemUpdateRequest","description":"客户端更新购物车中商品数量时发送的数据。"},"CartResponse":{"properties":{"Items":{"items":{"$ref":"#/components/schemas/CartItemResponse"},"type":"array","title":"Items","description":"购物车中的商品项目列表。"},"TotalItems":{"type":"integer","title":"Totalitems","description":"购物车中商品项目的总数。"}},"type":"object","required":["Items","TotalItems"],"title":"CartResponse","description":"API 返回整个购物车内容时使用的数据模型。"},"CategoryCreate":{"properties":{"CategoryName":{"type":"string","maxLength":255,"minLength":1,"title":"Categoryname","description":"分类名称，长度在1到255个字符之间。"},"CategoryDescription":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Categorydescription","description":"分类描述，可选。"},"ParentCategoryID":{"anyOf":[{"type":"integer","exclusiveMinimum":0.0},{"type":"null"}],"title":"Parentcategoryid","description":"父分类ID，可选。如果为空，则表示一级分类。"}},"type":"object","required":["CategoryName"],"title":"CategoryCreate","description":"创建新分类时，API 端点期望的分类数据模型。"},"CategoryResponse":{"properties":{"CategoryName":{"type":"string","maxLength":255,"minLength":1,"title":"Categoryname","description":"分类名称，长度在1到255个字符之间。"},"CategoryDescription":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Categorydescription","description":"分类描述，可选。"},"ParentCategoryID":{"anyOf":[{"type":"integer","exclusiveMinimum":0.0},{"type":"null"}],"title":"Parentcategoryid","description":"父分类ID，可选。如果为空，则表示一级分类。"},"CategoryID":{"type":"integer","title":"Categoryid","description":"分类的唯一标识符。"}},"type":"object","required":["CategoryName","CategoryID"],"title":"CategoryResponse","description":"分类响应模型，包含分类的基本信息和额外信息。"},"CategoryUpdate":{"properties":{"CategoryName":{"anyOf":[{"type":"string","maxLength":255,"minLength":1},{"type":"null"}],"title":"Categoryname","description":"分类名称，长度在1到255个字符之间。"},"CategoryDescription":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Categorydescription","description":"分类描述，可选。"},"ParentCategoryID":{"anyOf":[{"type":"integer","exclusiveMinimum":0.0},{"type":"null"}],"title":"Parentcategoryid","description":"父分类ID，可选。如果为空，则表示一级分类。"}},"type":"object","title":"CategoryUpdate","description":"更新分类信息时，API 端点期望的分类数据模型。\n包含可选字段。"},"CategoryWithChildren":{"properties":{"CategoryName":{"type":"string","maxLength":255,"minLength":1,"title":"Categoryname","description":"分类名称，长度在1到255个字符之间。"},"CategoryDescription":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Categorydescription","description":"分类描述，可选。"},"ParentCategoryID":{"anyOf":[{"type":"integer","exclusiveMinimum":0.0},{"type":"null"}],"title":"Parentcategoryid","description":"父分类ID，可选。如果为空，则表示一级分类。"},"CategoryID":{"type":"integer","title":"Categoryid","description":"分类的唯一标识符。"},"Children":{"anyOf":[{"items":{"$ref":"#/components/schemas/CategoryWithChildren"},"type":"array"},{"type":"null"}],"title":"Children","description":"子分类列表。","default":[]}},"type":"object","required":["CategoryName","CategoryID"],"title":"CategoryWithChildren","description":"包含子分类信息的分类响应模型"},"CreatedOrderDetailResponse":{"properties":{"OrderID":{"type":"integer","title":"Orderid","description":"新创建的订单的ID。"},"StoreID":{"type":"integer","title":"Storeid","description":"此订单所属的店铺ID。"},"FinalAmountForThisOrder":{"type":"string","title":"Finalamountforthisorder","description":"此特定订单的最终应付金额。"},"OrderStatus":{"$ref":"#/components/schemas/OrderStatusEnum","description":"此订单的初始状态 (通常是 PENDING_PAYMENT)。"},"Items":{"items":{"$ref":"#/components/schemas/OrderItemDetailResponse"},"type":"array","title":"Items","description":"此订单包含的商品项。"}},"type":"object","required":["OrderID","StoreID","FinalAmountForThisOrder","OrderStatus","Items"],"title":"CreatedOrderDetailResponse","description":"在创建订单流程后，针对每个实际生成的（可能按店铺拆分的）订单的概要响应。\n会被嵌入到 InitiateOrderResponse 中。\n对应 DDL 中的 Order 表的部分字段。"},"HTTPValidationError":{"properties":{"detail":{"items":{"$ref":"#/components/schemas/ValidationError"},"type":"array","title":"Detail"}},"type":"object","title":"HTTPValidationError"},"InitiateOrderResponse":{"properties":{"PaymentTransactionID":{"type":"integer","title":"Paymenttransactionid","description":"为此批订单创建的支付事务的ID。"},"ExternalPaymentURL":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Externalpaymenturl","description":"重定向到第三方支付网关的URL (如果适用)。"},"TotalAmountDue":{"type":"string","title":"Totalamountdue","description":"需要支付的总金额 (对应 PaymentTransaction.TotalAmount)。"},"Currency":{"type":"string","title":"Currency","description":"货币类型，例如 CNY, USD。","default":"CNY"},"OrdersCreated":{"items":{"$ref":"#/components/schemas/CreatedOrderDetailResponse"},"type":"array","title":"Orderscreated","description":"本次操作创建的订单列表。"},"Message":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Message","description":"给用户的提示信息，例如“请在30分钟内完成支付”。"}},"type":"object","required":["PaymentTransactionID","TotalAmountDue","OrdersCreated"],"title":"InitiateOrderResponse","description":"创建订单流程（可能生成一个支付事务和多个订单）成功后的顶层响应。\n由 POST /api/v1/orders/ (创建订单) 端点返回。"},"OrderActionResponse":{"properties":{"Message":{"type":"string","title":"Message","description":"操作结果消息。"},"OrderID":{"type":"integer","title":"Orderid","description":"相关的订单ID。"},"NewStatus":{"anyOf":[{"$ref":"#/components/schemas/OrderStatusEnum"},{"type":"null"}],"description":"操作后的新订单状态 (可选)。"}},"type":"object","required":["Message","OrderID"],"title":"OrderActionResponse","description":"用于订单操作（如取消订单成功、状态更新成功）的通用简单响应。\n可被 PUT /api/v1/orders/{order_id}/status 或其他执行动作的端点使用。"},"OrderCreateRequest":{"properties":{"ShippingAddressID":{"type":"integer","title":"Shippingaddressid","description":"选择的收货地址ID。"},"Items":{"items":{"$ref":"#/components/schemas/OrderItemCreationInput"},"type":"array","minItems":1,"title":"Items","description":"要购买的购物车项目列表。"},"Notes_ByUser":{"anyOf":[{"type":"string","maxLength":65535},{"type":"null"}],"title":"Notes Byuser","description":"用户订单备注 (可选，对应 DDL 的 TEXT 类型)。"}},"type":"object","required":["ShippingAddressID","Items"],"title":"OrderCreateRequest","description":"客户端发起创建新订单请求时发送的数据。\n会被 POST /api/v1/orders/ (创建订单) 端点使用。"},"OrderItemCreationInput":{"properties":{"CartItemID":{"type":"integer","title":"Cartitemid","description":"要购买的购物车项目ID。"}},"type":"object","required":["CartItemID"],"title":"OrderItemCreationInput","description":"在创建订单请求中，指定要购买的购物车项目。\n会被 POST /api/v1/orders/ (创建订单) 端点使用，作为 OrderCreateRequest 的一部分。"},"OrderItemDetailResponse":{"properties":{"OrderItemID":{"type":"integer","title":"Orderitemid","description":"订单项目ID。"},"OrderID":{"type":"integer","title":"Orderid","description":"所属订单ID。"},"ProductID":{"type":"integer","title":"Productid","description":"商品ID。"},"StoreID":{"type":"integer","title":"Storeid","description":"所属店铺ID (冗余)。"},"Quantity":{"type":"integer","title":"Quantity","description":"购买数量。"},"PriceAtPurchase":{"type":"string","title":"Priceatpurchase","description":"购买时商品单价。"},"ProductNameAtPurchase":{"type":"string","title":"Productnameatpurchase","description":"购买时商品名称 (冗余)。"},"ProductImageURLAtPurchase":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Productimageurlatpurchase","description":"购买时商品主图URL (冗余, 可选)。"},"Subtotal":{"type":"string","title":"Subtotal","description":"小计金额 (PriceAtPurchase * Quantity)。"}},"type":"object","required":["OrderItemID","OrderID","ProductID","StoreID","Quantity","PriceAtPurchase","ProductNameAtPurchase","Subtotal"],"title":"OrderItemDetailResponse","description":"API 返回订单项详细信息时使用的数据模型。\n会被嵌入到各种订单相关的响应中。\n对应 DDL 中的 OrderItem 表。"},"OrderListResponse":{"properties":{"Orders":{"items":{"$ref":"#/components/schemas/OrderViewResponse"},"type":"array","title":"Orders","description":"订单列表。"},"TotalCount":{"type":"integer","title":"Totalcount","description":"符合条件的订单总数 (用于分页)。"},"Offset":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Offset","description":"当前分页的偏移量。"},"Limit":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Limit","description":"当前分页的每页数量。"}},"type":"object","required":["Orders","TotalCount"],"title":"OrderListResponse","description":"API 返回用户订单列表时使用的数据模型。\n会被 GET /api/v1/users/me/orders (获取用户所有订单) 端点使用。\n也会被管理员查看订单列表的端点使用 (可能带有额外过滤参数)。"},"OrderStatusEnum":{"type":"string","enum":["PENDING_PAYMENT","PAID_AND_PENDING_PROCESSING","PROCESSING_BY_MERCHANT","SHIPPED","DELIVERED","COMPLETED","CANCELLED_BY_USER","CANCELLED_BY_MERCHANT","CANCELLED_BY_SYSTEM"],"title":"OrderStatusEnum","description":"订单状态枚举 (基于 DDL)。\n会被 OrderViewResponse, CreatedOrderDetailResponse, OrderUpdateStatusRequest, OrderActionResponse 使用。"},"OrderUpdateStatusRequest":{"properties":{"NewStatus":{"$ref":"#/components/schemas/OrderStatusEnum","description":"新的订单状态。"},"TrackingNumber":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Trackingnumber","description":"物流追踪号 (如果状态更新为 SHIPPED，由商家或管理员填写)。"},"UserNotes":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Usernotes","description":"用户备注 (例如取消原因)。"},"AdminNotes":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Adminnotes","description":"管理员备注 (如果由管理员操作)。"}},"type":"object","required":["NewStatus"],"title":"OrderUpdateStatusRequest","description":"用于用户或管理员更新订单状态的请求。\n会被 PUT /api/v1/orders/{order_id}/status (更新订单状态) 端点使用。"},"OrderViewResponse":{"properties":{"OrderID":{"type":"integer","title":"Orderid"},"UserID":{"type":"integer","title":"Userid"},"StoreID":{"type":"integer","title":"Storeid"},"PaymentTransactionID":{"type":"integer","title":"Paymenttransactionid"},"OrderStatus":{"$ref":"#/components/schemas/OrderStatusEnum"},"OrderTotalAmount":{"type":"string","title":"Ordertotalamount","description":"订单商品总金额 (不含运费和优惠)。"},"DiscountAmount":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Discountamount","description":"优惠金额。","default":0.0},"ShippingFee":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Shippingfee","description":"运费。","default":0.0},"FinalAmountForThisOrder":{"type":"string","title":"Finalamountforthisorder","description":"此订单最终应付金额。"},"ShippingAddress_RecipientName":{"type":"string","title":"Shippingaddress Recipientname"},"ShippingAddress_PhoneNumber":{"type":"string","title":"Shippingaddress Phonenumber"},"ShippingAddress_Full":{"type":"string","title":"Shippingaddress Full"},"Notes_ByUser":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Notes Byuser"},"Notes_ByMerchant":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Notes Bymerchant"},"CreationTime":{"type":"string","format":"date-time","title":"Creationtime"},"PaymentConfirmationTime":{"anyOf":[{"type":"string","format":"date-time"},{"type":"null"}],"title":"Paymentconfirmationtime"},"ShippingTime":{"anyOf":[{"type":"string","format":"date-time"},{"type":"null"}],"title":"Shippingtime"},"DeliveryTime":{"anyOf":[{"type":"string","format":"date-time"},{"type":"null"}],"title":"Deliverytime"},"CompletionTime":{"anyOf":[{"type":"string","format":"date-time"},{"type":"null"}],"title":"Completiontime"},"LastUpdatedDate":{"type":"string","format":"date-time","title":"Lastupdateddate"},"Items":{"items":{"$ref":"#/components/schemas/OrderItemDetailResponse"},"type":"array","title":"Items","description":"订单中的商品项目列表。"},"PaymentStatus":{"anyOf":[{"$ref":"#/components/schemas/PaymentTransactionStatusEnum"},{"type":"null"}],"description":"关联支付事务的状态。"}},"type":"object","required":["OrderID","UserID","StoreID","PaymentTransactionID","OrderStatus","OrderTotalAmount","FinalAmountForThisOrder","ShippingAddress_RecipientName","ShippingAddress_PhoneNumber","ShippingAddress_Full","CreationTime","LastUpdatedDate","Items"],"title":"OrderViewResponse","description":"从 API 返回单个完整订单详情时使用的数据模型。\n会被 GET /api/v1/orders/{order_id} (获取单个订单) 端点使用。\n也会被 GET /api/v1/users/me/orders (获取用户所有订单) 端点中的列表项使用。\n对应 DDL 中的 Order 表。"},"PaymentProcessingResponse":{"properties":{"PaymentTransactionID":{"type":"integer","title":"Paymenttransactionid","description":"系统内部的支付事务ID。"},"TransactionStatusInSystem":{"type":"string","title":"Transactionstatusinsystem","description":"更新后的系统内部支付事务状态 (例如，来自您系统的 PaymentTransactionStatusEnum: 'SUCCESSFUL', 'FAILED')。"},"MessageToUser":{"type":"string","title":"Messagetouser","description":"给用户的最终消息 (例如，“支付成功，您的订单正在处理中！”或“支付失败，请重试。”)。"},"AffectedOrderIDs":{"anyOf":[{"items":{"type":"integer"},"type":"array"},{"type":"null"}],"title":"Affectedorderids","description":"与此支付事务成功关联并更新状态的订单ID列表 (如果支付成功)。"}},"type":"object","required":["PaymentTransactionID","TransactionStatusInSystem","MessageToUser"],"title":"PaymentProcessingResponse","description":"在后端处理完模拟支付（并更新了数据库状态）后，返回给前端支付页面的响应。\n前端将根据此响应将用户重定向到合适的订单页面。\n会被 POST /api/v1/payment/{PaymentTransactionID}/simulate-pay (示例路径) 端点使用。"},"PaymentResponse":{"properties":{"PaymentTransactionID":{"type":"integer","title":"Paymenttransactionid","description":"系统内部的支付事务ID。"},"UserID":{"type":"integer","title":"Userid","description":"发起支付的用户ID。"},"TotalAmount":{"type":"string","title":"Totalamount","description":"支付的总金额。"},"PaymentMethod":{"type":"string","title":"Paymentmethod","description":"支付方式 (例如，'CreditCard', 'PayPal')。"},"ExternalGatewayTxID":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Externalgatewaytxid","description":"外部支付网关的交易ID (如果适用)。"},"Status":{"$ref":"#/components/schemas/PaymentTransactionStatusEnum","description":"支付事务的当前状态 (例如，'PENDING', 'SUCCESSFUL', 'FAILED')。"},"CreationTime":{"type":"string","format":"date-time","title":"Creationtime","description":"支付事务创建的时间戳。"},"CompletionTime":{"anyOf":[{"type":"string","format":"date-time"},{"type":"null"}],"title":"Completiontime","description":"支付事务完成的时间戳 (如果适用)。"},"LastUpdatedTime":{"type":"string","format":"date-time","title":"Lastupdatedtime","description":"支付事务最后更新的时间戳。"}},"type":"object","required":["PaymentTransactionID","UserID","TotalAmount","PaymentMethod","Status","CreationTime","LastUpdatedTime"],"title":"PaymentResponse","description":"支付响应模型，包含支付事务的详细信息。\n会被 GET /api/v1/payment/{PaymentTransactionID}/status (示例路径) 端点使用。"},"PaymentTransactionStatusEnum":{"type":"string","enum":["PENDING","SUCCESSFUL","FAILED"],"title":"PaymentTransactionStatusEnum","description":"支付事务状态枚举 (基于 DDL)。\n会被 OrderViewResponse (作为 PaymentStatus) 使用。"},"ProductChangeRequestAdminUpdate":{"properties":{"AdminReviewerID":{"type":"integer","exclusiveMinimum":0.0,"title":"Adminreviewerid","description":"审核管理员ID，外键关联User表。"},"Status":{"type":"string","enum":["APPROVED","REJECTED","APPLIED"],"title":"Status","description":"请求状态。可以是 'APPROVED'、'REJECTED' 或 'APPLIED'。"},"AdminNotes":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Adminnotes","description":"管理员审核备注，可选。"},"ReviewTimestamp":{"type":"string","format":"date-time","title":"Reviewtimestamp","description":"审核时间。"}},"type":"object","required":["AdminReviewerID","Status","ReviewTimestamp"],"title":"ProductChangeRequestAdminUpdate","description":"管理员更新商品变更请求的数据模型。"},"ProductChangeRequestCreate":{"properties":{"MerchantUserID":{"type":"integer","exclusiveMinimum":0.0,"title":"Merchantuserid","description":"提交请求的商家UserID，外键关联User表。"},"StoreID":{"type":"integer","exclusiveMinimum":0.0,"title":"Storeid","description":"商品所属的StoreID，外键关联Store表。"},"RequestType":{"type":"string","enum":["PRODUCT_CREATE","PRODUCT_UPDATE","PRODUCT_DELETE"],"title":"Requesttype","description":"请求类型。可以是 'PRODUCT_CREATE'、'PRODUCT_UPDATE' 或 'PRODUCT_DELETE'。"},"ProposedData_JSON":{"anyOf":[{"additionalProperties":true,"type":"object"},{"type":"null"}],"title":"Proposeddata Json","description":"建议数据体 (JSON格式)，包含请求的具体更改内容。"},"SubmitterNotes":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Submitternotes","description":"商家提交备注，可选。"},"ProductID":{"anyOf":[{"type":"integer","exclusiveMinimum":0.0},{"type":"null"}],"title":"Productid","description":"目标商品ID，对于PRODUCT_CREATE可为空，应用后可回填。"}},"type":"object","required":["MerchantUserID","StoreID","RequestType"],"title":"ProductChangeRequestCreate","description":"创建新商品变更请求时，API 端点期望的数据模型。"},"ProductChangeRequestResponse":{"properties":{"MerchantUserID":{"type":"integer","exclusiveMinimum":0.0,"title":"Merchantuserid","description":"提交请求的商家UserID，外键关联User表。"},"StoreID":{"type":"integer","exclusiveMinimum":0.0,"title":"Storeid","description":"商品所属的StoreID，外键关联Store表。"},"RequestType":{"type":"string","enum":["PRODUCT_CREATE","PRODUCT_UPDATE","PRODUCT_DELETE"],"title":"Requesttype","description":"请求类型。可以是 'PRODUCT_CREATE'、'PRODUCT_UPDATE' 或 'PRODUCT_DELETE'。"},"ProposedData_JSON":{"anyOf":[{"additionalProperties":true,"type":"object"},{"type":"null"}],"title":"Proposeddata Json","description":"建议数据体 (JSON格式)，包含请求的具体更改内容。"},"SubmitterNotes":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Submitternotes","description":"商家提交备注，可选。"},"ChangeRequestID":{"type":"integer","title":"Changerequestid","description":"变更请求的唯一标识符。"},"ProductID":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Productid","description":"目标商品ID，对于PRODUCT_CREATE可为空，应用后可回填。"},"Status":{"type":"string","enum":["PENDING_APPROVAL","APPROVED","REJECTED","APPLIED","CANCELLED_BY_USER"],"title":"Status","description":"请求状态。"},"AdminReviewerID":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Adminreviewerid","description":"审核管理员ID，外键关联User表，可为空。"},"ReviewTimestamp":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Reviewtimestamp","description":"审核时间，可为空。"},"AdminNotes":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Adminnotes","description":"管理员审核备注，可选。"},"CreationTime":{"type":"string","title":"Creationtime","description":"请求创建时间。"},"LastUpdatedDate":{"type":"string","title":"Lastupdateddate","description":"请求最后更新时间。"}},"type":"object","required":["MerchantUserID","StoreID","RequestType","ChangeRequestID","Status","CreationTime","LastUpdatedDate"],"title":"ProductChangeRequestResponse","description":"商品变更请求响应模型，包含请求的基本信息和额外信息。"},"ProductChangeRequestUpdate":{"properties":{"RequestType":{"anyOf":[{"type":"string","enum":["PRODUCT_CREATE","PRODUCT_UPDATE","PRODUCT_DELETE"]},{"type":"null"}],"title":"Requesttype","description":"请求类型。可以是 'PRODUCT_CREATE'、'PRODUCT_UPDATE' 或 'PRODUCT_DELETE'。"},"ProposedData_JSON":{"anyOf":[{"additionalProperties":true,"type":"object"},{"type":"null"}],"title":"Proposeddata Json","description":"建议数据体 (JSON格式)，包含请求的具体更改内容。"},"Status":{"anyOf":[{"type":"string","enum":["PENDING_APPROVAL","APPROVED","REJECTED","APPLIED","CANCELLED_BY_USER"]},{"type":"null"}],"title":"Status","description":"请求状态。可以是 'PENDING_APPROVAL'、'APPROVED'、'REJECTED'、'APPLIED' 或 'CANCELLED_BY_USER'。"},"SubmitterNotes":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Submitternotes","description":"商家提交备注，可选。"}},"type":"object","title":"ProductChangeRequestUpdate","description":"更新商品变更请求信息时，API 端点期望的数据模型。\n包含可选字段。"},"ProductCreate":{"properties":{"ProductName":{"type":"string","maxLength":255,"minLength":1,"title":"Productname","description":"商品名称，长度在1到255个字符之间。"},"ProductDescription":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Productdescription","description":"商品详细介绍，可选。"},"Price":{"anyOf":[{"type":"number","exclusiveMinimum":0.0},{"type":"string"}],"title":"Price","description":"商品单价，必须大于0。"},"CategoryID":{"type":"integer","exclusiveMinimum":0.0,"title":"Categoryid","description":"商品所属分类ID。"},"StockQuantity":{"type":"integer","minimum":0.0,"title":"Stockquantity","description":"库存数量，默认为0，不能为负数。","default":0},"MainImageURL":{"anyOf":[{"type":"string","maxLength":512},{"type":"null"}],"title":"Mainimageurl","description":"商品主图片URL地址，可选。"},"StoreID":{"type":"integer","exclusiveMinimum":0.0,"title":"Storeid","description":"商品所属店铺ID。"}},"type":"object","required":["ProductName","Price","CategoryID","StoreID"],"title":"ProductCreate","description":"创建新商品时，API 端点期望的商品数据模型。"},"ProductResponse":{"properties":{"ProductName":{"type":"string","maxLength":255,"minLength":1,"title":"Productname","description":"商品名称，长度在1到255个字符之间。"},"ProductDescription":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Productdescription","description":"商品详细介绍，可选。"},"Price":{"type":"string","title":"Price","description":"商品单价，必须大于0。"},"CategoryID":{"type":"integer","exclusiveMinimum":0.0,"title":"Categoryid","description":"商品所属分类ID。"},"StockQuantity":{"type":"integer","minimum":0.0,"title":"Stockquantity","description":"库存数量，默认为0，不能为负数。","default":0},"MainImageURL":{"anyOf":[{"type":"string","maxLength":512},{"type":"null"}],"title":"Mainimageurl","description":"商品主图片URL地址，可选。"},"ProductID":{"type":"integer","title":"Productid","description":"商品的唯一标识符。"},"StoreID":{"type":"integer","title":"Storeid","description":"商品所属店铺ID。"},"ProductStatus":{"type":"string","title":"Productstatus","description":"商品状态。"},"CreationDate":{"type":"string","format":"date-time","title":"Creationdate","description":"商品创建日期。"},"LastUpdatedDate":{"type":"string","format":"date-time","title":"Lastupdateddate","description":"商品信息最后更新日期。"}},"type":"object","required":["ProductName","Price","CategoryID","ProductID","StoreID","ProductStatus","CreationDate","LastUpdatedDate"],"title":"ProductResponse","description":"商品响应模型，包含商品的基本信息和额外信息。"},"ProductUpdate":{"properties":{"ProductName":{"anyOf":[{"type":"string","maxLength":255,"minLength":1},{"type":"null"}],"title":"Productname","description":"商品名称，长度在1到255个字符之间。"},"ProductDescription":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Productdescription","description":"商品详细介绍，可选。"},"Price":{"anyOf":[{"type":"number","exclusiveMinimum":0.0},{"type":"string"},{"type":"null"}],"title":"Price","description":"商品单价，必须大于0。"},"CategoryID":{"anyOf":[{"type":"integer","exclusiveMinimum":0.0},{"type":"null"}],"title":"Categoryid","description":"商品所属分类ID。"},"StockQuantity":{"anyOf":[{"type":"integer","minimum":0.0},{"type":"null"}],"title":"Stockquantity","description":"库存数量，不能为负数。"},"MainImageURL":{"anyOf":[{"type":"string","maxLength":512},{"type":"null"}],"title":"Mainimageurl","description":"商品主图片URL地址。"},"ProductStatus":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Productstatus","description":"商品状态。可以是 'ACTIVE'、'INACTIVE_BY_MERCHANT'、'SUSPENDED_BY_ADMIN' 或 'DISCONTINUED'。"}},"type":"object","title":"ProductUpdate","description":"更新商品信息时，API 端点期望的商品数据模型。\n包含可选字段。"},"ProductWithCategoryInfo":{"properties":{"ProductName":{"type":"string","maxLength":255,"minLength":1,"title":"Productname","description":"商品名称，长度在1到255个字符之间。"},"ProductDescription":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Productdescription","description":"商品详细介绍，可选。"},"Price":{"type":"string","title":"Price","description":"商品单价，必须大于0。"},"CategoryID":{"type":"integer","exclusiveMinimum":0.0,"title":"Categoryid","description":"商品所属分类ID。"},"StockQuantity":{"type":"integer","minimum":0.0,"title":"Stockquantity","description":"库存数量，默认为0，不能为负数。","default":0},"MainImageURL":{"anyOf":[{"type":"string","maxLength":512},{"type":"null"}],"title":"Mainimageurl","description":"商品主图片URL地址，可选。"},"ProductID":{"type":"integer","title":"Productid","description":"商品的唯一标识符。"},"StoreID":{"type":"integer","title":"Storeid","description":"商品所属店铺ID。"},"ProductStatus":{"type":"string","title":"Productstatus","description":"商品状态。"},"CreationDate":{"type":"string","format":"date-time","title":"Creationdate","description":"商品创建日期。"},"LastUpdatedDate":{"type":"string","format":"date-time","title":"Lastupdateddate","description":"商品信息最后更新日期。"},"CategoryName":{"type":"string","title":"Categoryname","description":"商品所属分类名称。"}},"type":"object","required":["ProductName","Price","CategoryID","ProductID","StoreID","ProductStatus","CreationDate","LastUpdatedDate","CategoryName"],"title":"ProductWithCategoryInfo","description":"包含分类信息的商品响应模型"},"SetDefaultAddressResponse":{"properties":{"Message":{"type":"string","title":"Message","description":"操作结果消息。"},"DefaultAddress":{"anyOf":[{"$ref":"#/components/schemas/AddressResponse"},{"type":"null"}],"description":"新的默认地址信息 (可选)。"}},"type":"object","required":["Message"],"title":"SetDefaultAddressResponse","description":"设置默认地址操作的响应。"},"SimulatedExternPaymentResponse":{"properties":{"SimulatedPaymentMethod":{"type":"string","title":"Simulatedpaymentmethod","description":"模拟支付方式名称","default":"MockPayment"},"ExternalGatewayTxID":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Externalgatewaytxid","description":"外部支付网关的交易ID (如果适用)。可以是前端随机生成的字符串。"}},"type":"object","title":"SimulatedExternPaymentResponse","description":"当用户在我们的支付页面点击“支付”时，模拟的支付网关将返回给我们的响应。\n接受到这个响应就代表支付成功。\nPaymentTransactionID 通常作为路径参数传递给API端点。\n这个请求体可以包含用户选择的模拟支付方式或其他相关信息。\n会被 POST /api/v1/payment/{PaymentTransactionID}/simulate-pay (示例路径) 端点使用。"},"StoreChangeRequestAdminUpdate":{"properties":{"AdminReviewerID":{"type":"integer","exclusiveMinimum":0.0,"title":"Adminreviewerid","description":"审核管理员ID，外键关联User表。"},"Status":{"type":"string","enum":["APPROVED","REJECTED","APPLIED"],"title":"Status","description":"请求状态。可以是 'APPROVED'、'REJECTED' 或 'APPLIED'。"},"AdminNotes":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Adminnotes","description":"管理员审核备注，可选。"},"ReviewTimestamp":{"type":"string","format":"date-time","title":"Reviewtimestamp","description":"审核时间。"}},"type":"object","required":["AdminReviewerID","Status","ReviewTimestamp"],"title":"StoreChangeRequestAdminUpdate","description":"管理员更新店铺变更请求的数据模型。"},"StoreChangeRequestCreate":{"properties":{"RequestingUserID":{"type":"integer","exclusiveMinimum":0.0,"title":"Requestinguserid","description":"请求用户ID，外键关联User表。"},"RequestType":{"type":"string","enum":["STORE_CREATE","STORE_UPDATE","STORE_DELETE"],"title":"Requesttype","description":"请求类型。可以是 'STORE_CREATE'、'STORE_UPDATE' 或 'STORE_DELETE'。"},"ProposedData_JSON":{"anyOf":[{"additionalProperties":true,"type":"object"},{"type":"null"}],"title":"Proposeddata Json","description":"建议数据体 (JSON格式)，包含请求的具体更改内容。"},"SubmitterNotes":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Submitternotes","description":"提交者备注，可选。"},"StoreID":{"anyOf":[{"type":"integer","exclusiveMinimum":0.0},{"type":"null"}],"title":"Storeid","description":"目标店铺ID，对于STORE_CREATE可为空，应用后可回填。"}},"type":"object","required":["RequestingUserID","RequestType"],"title":"StoreChangeRequestCreate","description":"创建新店铺变更请求时，API 端点期望的数据模型。"},"StoreChangeRequestResponse":{"properties":{"RequestingUserID":{"type":"integer","exclusiveMinimum":0.0,"title":"Requestinguserid","description":"请求用户ID，外键关联User表。"},"RequestType":{"type":"string","enum":["STORE_CREATE","STORE_UPDATE","STORE_DELETE"],"title":"Requesttype","description":"请求类型。可以是 'STORE_CREATE'、'STORE_UPDATE' 或 'STORE_DELETE'。"},"ProposedData_JSON":{"anyOf":[{"additionalProperties":true,"type":"object"},{"type":"null"}],"title":"Proposeddata Json","description":"建议数据体 (JSON格式)，包含请求的具体更改内容。"},"SubmitterNotes":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Submitternotes","description":"提交者备注，可选。"},"ChangeRequestID":{"type":"integer","title":"Changerequestid","description":"变更请求的唯一标识符。"},"StoreID":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Storeid","description":"目标店铺ID，对于STORE_CREATE可为空，应用后可回填。"},"Status":{"type":"string","enum":["PENDING_APPROVAL","APPROVED","REJECTED","APPLIED","CANCELLED_BY_USER"],"title":"Status","description":"请求状态。"},"AdminReviewerID":{"anyOf":[{"type":"integer"},{"type":"null"}],"title":"Adminreviewerid","description":"审核管理员ID，外键关联User表，可为空。"},"ReviewTimestamp":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Reviewtimestamp","description":"审核时间，可为空。"},"AdminNotes":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Adminnotes","description":"管理员审核备注，可选。"},"CreationTime":{"type":"string","title":"Creationtime","description":"请求创建时间。"},"LastUpdatedDate":{"type":"string","title":"Lastupdateddate","description":"请求最后更新时间。"}},"type":"object","required":["RequestingUserID","RequestType","ChangeRequestID","Status","CreationTime","LastUpdatedDate"],"title":"StoreChangeRequestResponse","description":"店铺变更请求响应模型，包含请求的基本信息和额外信息。"},"StoreChangeRequestUpdate":{"properties":{"RequestType":{"anyOf":[{"type":"string","enum":["STORE_CREATE","STORE_UPDATE","STORE_DELETE"]},{"type":"null"}],"title":"Requesttype","description":"请求类型。可以是 'STORE_CREATE'、'STORE_UPDATE' 或 'STORE_DELETE'。"},"ProposedData_JSON":{"anyOf":[{"additionalProperties":true,"type":"object"},{"type":"null"}],"title":"Proposeddata Json","description":"建议数据体 (JSON格式)，包含请求的具体更改内容。"},"Status":{"anyOf":[{"type":"string","enum":["PENDING_APPROVAL","APPROVED","REJECTED","APPLIED","CANCELLED_BY_USER"]},{"type":"null"}],"title":"Status","description":"请求状态。可以是 'PENDING_APPROVAL'、'APPROVED'、'REJECTED'、'APPLIED' 或 'CANCELLED_BY_USER'。"},"SubmitterNotes":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Submitternotes","description":"提交者备注，可选。"}},"type":"object","title":"StoreChangeRequestUpdate","description":"更新店铺变更请求信息时，API 端点期望的数据模型。\n包含可选字段。"},"StoreListResponse":{"properties":{"Count":{"type":"integer","title":"Count","description":"店铺数量"},"StoreList":{"items":{"$ref":"#/components/schemas/StoreResponse"},"type":"array","title":"Storelist","description":"店铺列表"}},"type":"object","required":["Count","StoreList"],"title":"StoreListResponse","description":"查询店铺列表时，API 端点返回的商店数据模型。"},"StoreListSimpleResponse":{"properties":{"Count":{"type":"integer","title":"Count","description":"店铺数量"},"StoreList":{"items":{"$ref":"#/components/schemas/StoreSimpleResponse"},"type":"array","title":"Storelist","description":"店铺列表"}},"type":"object","required":["Count","StoreList"],"title":"StoreListSimpleResponse","description":"查询店铺列表时，API 端点返回的商店数据模型。\n这个模型只包含店铺 ID 和名称。"},"StoreResponse":{"properties":{"StoreID":{"type":"integer","title":"Storeid","description":"店铺 ID"},"StoreName":{"type":"string","title":"Storename","description":"店铺名称"},"OwnerUserID":{"type":"integer","title":"Owneruserid","description":"店主用户 ID"},"Description":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Description","description":"店铺描述"},"LogoURL":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Logourl","description":"店铺 Logo 的 URL"},"StoreStatus":{"type":"string","title":"Storestatus","description":"店铺状态"},"CreationDate":{"type":"string","format":"date-time","title":"Creationdate","description":"店铺创建日期"},"LastUpdatedDate":{"type":"string","format":"date-time","title":"Lastupdateddate","description":"店铺最后更新时间"}},"type":"object","required":["StoreID","StoreName","OwnerUserID","StoreStatus","CreationDate","LastUpdatedDate"],"title":"StoreResponse","description":"查询店铺信息时，API 端点返回的商店数据模型。"},"StoreSimpleResponse":{"properties":{"StoreID":{"type":"integer","title":"Storeid","description":"店铺 ID"},"StoreName":{"type":"string","title":"Storename","description":"店铺名称"}},"type":"object","required":["StoreID","StoreName"],"title":"StoreSimpleResponse","description":"查询店铺列表时，API 端点返回的商店数据模型。\n这个模型只包含店铺 ID 和名称。"},"Token":{"properties":{"access_token":{"type":"string","title":"Access Token","description":"JWT 访问令牌。"},"token_type":{"type":"string","title":"Token Type","description":"令牌类型，通常为 'bearer'。","default":"bearer"}},"type":"object","required":["access_token"],"title":"Token","description":"API 认证成功后返回的 Token 模型。"},"UserCreate":{"properties":{"Username":{"type":"string","maxLength":50,"minLength":3,"pattern":"^[a-zA-Z0-9_]+$","title":"Username","description":"用户名，长度在3到50个字符之间，只能包含字母、数字、下划线。"},"Email":{"anyOf":[{"type":"string","format":"email"},{"type":"string"},{"type":"null"}],"title":"Email","description":"用户邮箱，必须是有效的电子邮件地址。"},"PhoneNumber":{"anyOf":[{"type":"string","maxLength":20,"pattern":"^\\+?[0-9\\s\\-\\(\\)]+$"},{"type":"null"}],"title":"Phonenumber","description":"用户的手机号码 (可选)。数字可以用空格、连字符和括号分隔，允许以+开头的国际格式。"},"Password":{"type":"string","maxLength":128,"minLength":8,"title":"Password","description":"用户密码，长度在8到128个字符之间。"}},"type":"object","required":["Username","Email","Password"],"title":"UserCreate","description":"创建新用户时，API 端点期望的用户数据模型。包含密码明文。"},"UserResponse":{"properties":{"Username":{"type":"string","maxLength":50,"minLength":3,"pattern":"^[a-zA-Z0-9_]+$","title":"Username","description":"用户名，长度在3到50个字符之间，只能包含字母、数字、下划线。"},"Email":{"anyOf":[{"type":"string","format":"email"},{"type":"string"},{"type":"null"}],"title":"Email","description":"用户邮箱，必须是有效的电子邮件地址。"},"PhoneNumber":{"anyOf":[{"type":"string","maxLength":20,"pattern":"^\\+?[0-9\\s\\-\\(\\)]+$"},{"type":"null"}],"title":"Phonenumber","description":"用户的手机号码 (可选)。数字可以用空格、连字符和括号分隔，允许以+开头的国际格式。"},"UserID":{"type":"integer","title":"Userid","description":"用户的唯一标识符。"},"RegistrationDate":{"type":"string","format":"date-time","title":"Registrationdate","description":"用户注册的日期和时间。"},"LastLoginDate":{"anyOf":[{"type":"string","format":"date-time"},{"type":"null"}],"title":"Lastlogindate","description":"用户上次登录的日期和时间。"}},"type":"object","required":["Username","Email","UserID","RegistrationDate"],"title":"UserResponse","description":"用户响应模型，包含用户的基本信息和 ID。"},"ValidationError":{"properties":{"loc":{"items":{"anyOf":[{"type":"string"},{"type":"integer"}]},"type":"array","title":"Location"},"msg":{"type":"string","title":"Message"},"type":{"type":"string","title":"Error Type"}},"type":"object","required":["loc","msg","type"],"title":"ValidationError"}}}}
\ No newline at end of file

From e3c232bd2f553a013e3584a2b4ee8939ddf6c38a Mon Sep 17 00:00:00 2001
From: Renyye <1457077123@qq.com>
Date: Sun, 25 May 2025 21:59:33 +0800
Subject: [PATCH 11/16] =?UTF-8?q?feat(frontend):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=BA=97=E9=93=BA=E5=8F=98=E6=9B=B4=E7=94=B3=E8=AF=B7=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=8C=85=E5=90=AB=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E3=80=81=E7=B1=BB=E5=9E=8B=E6=9E=9A=E4=B8=BE=E5=8F=8A?=
 =?UTF-8?q?=E7=BF=BB=E8=AF=91=E6=98=A0=E5=B0=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/api/storeRequest.ts          | 133 ++++++++-
 .../merchant/StoreChangeRequests.vue          | 265 ++++++++++++++++++
 2 files changed, 386 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/api/storeRequest.ts b/src/frontend/src/api/storeRequest.ts
index ab6eb28..00e8828 100644
--- a/src/frontend/src/api/storeRequest.ts
+++ b/src/frontend/src/api/storeRequest.ts
@@ -3,20 +3,129 @@ import axios from 'axios'
 
 /** ========== 变更申请（审批流） ========== */
 
+/** 店铺变更请求状态枚举 */
+export enum StoreChangeRequestStatus {
+  PENDING_APPROVAL = 'PENDING_APPROVAL',
+  PENDING = 'PENDING',  // 兼容现有代码
+  APPROVED = 'APPROVED',
+  REJECTED = 'REJECTED',
+  APPLIED = 'APPLIED',
+  CANCELLED_BY_USER = 'CANCELLED_BY_USER',
+  CANCELLED = 'CANCELLED'  // 兼容现有代码
+}
+
+/** 店铺变更请求类型枚举 */
+export enum StoreChangeRequestType {
+  STORE_CREATE = 'STORE_CREATE',
+  STORE_UPDATE = 'STORE_UPDATE',
+  STORE_DELETE = 'STORE_DELETE'
+}
+
+/** 店铺状态枚举 */
+export enum StoreStatus {
+  ACTIVE = 'ACTIVE',
+  INACTIVE_BY_MERCHANT = 'INACTIVE_BY_MERCHANT',
+  SUSPENDED_BY_ADMIN = 'SUSPENDED_BY_ADMIN',
+  CLOSED_PERMANENTLY_BY_ADMIN = 'CLOSED_PERMANENTLY_BY_ADMIN'
+}
+
+/** 状态翻译映射 */
+export const translateRequestStatus = (status: string): string => {
+  const statusMap: Record<string, string> = {
+    [StoreChangeRequestStatus.PENDING_APPROVAL]: '审核中',
+    [StoreChangeRequestStatus.PENDING]: '审核中',
+    [StoreChangeRequestStatus.APPROVED]: '已通过',
+    [StoreChangeRequestStatus.REJECTED]: '已拒绝',
+    [StoreChangeRequestStatus.APPLIED]: '已应用',
+    [StoreChangeRequestStatus.CANCELLED_BY_USER]: '用户已取消',
+    [StoreChangeRequestStatus.CANCELLED]: '已取消'
+  }
+  return statusMap[status] || status
+}
+
+/** 申请类型翻译映射 */
+export const translateRequestType = (type: string): string => {
+  const typeMap: Record<string, string> = {
+    [StoreChangeRequestType.STORE_CREATE]: '创建店铺',
+    [StoreChangeRequestType.STORE_UPDATE]: '更新店铺',
+    [StoreChangeRequestType.STORE_DELETE]: '删除店铺'
+  }
+  return typeMap[type] || type
+}
+
+/** 店铺状态翻译映射 */
+export const translateStoreStatus = (status?: string): string => {
+  if (!status) return '-'
+  const statusMap: Record<string, string> = {
+    [StoreStatus.ACTIVE]: '营业中',
+    [StoreStatus.INACTIVE_BY_MERCHANT]: '商家休息中',
+    [StoreStatus.SUSPENDED_BY_ADMIN]: '管理员已暂停',
+    [StoreStatus.CLOSED_PERMANENTLY_BY_ADMIN]: '管理员已永久关闭'
+  }
+  return statusMap[status] || status
+}
+
+/** 状态颜色映射 */
+export const getStatusColor = (status: string): string => {
+  const colorMap: Record<string, string> = {
+    [StoreChangeRequestStatus.PENDING_APPROVAL]: 'warning',
+    [StoreChangeRequestStatus.PENDING]: 'warning',
+    [StoreChangeRequestStatus.APPROVED]: 'success',
+    [StoreChangeRequestStatus.REJECTED]: 'danger',
+    [StoreChangeRequestStatus.APPLIED]: 'info',
+    [StoreChangeRequestStatus.CANCELLED_BY_USER]: 'info',
+    [StoreChangeRequestStatus.CANCELLED]: 'info'
+  }
+  return colorMap[status] || 'info'
+}
+
+/** 请求类型颜色映射 */
+export const getRequestTypeColor = (type: string): string => {
+  const colorMap: Record<string, string> = {
+    [StoreChangeRequestType.STORE_CREATE]: 'success',
+    [StoreChangeRequestType.STORE_UPDATE]: 'primary',
+    [StoreChangeRequestType.STORE_DELETE]: 'danger'
+  }
+  return colorMap[type] || 'info'
+}
+
 /** 审批流中的变更申请记录 */
 export interface StoreChangeRequest {
-    RequestID: number
-    StoreID: number
-    UserID: number
-    StoreName?: string
-    Description?: string
-    LogoURL?: string
-    RequestStatus: 'PENDING' | 'APPROVED' | 'REJECTED' | 'CANCELLED'
-    AdminComment?: string
-    RequestDate: string
-    ProcessDate?: string
-    ProcessedByUserID?: number
-  }
+    // 新的API结构
+    ChangeRequestID: number
+    StoreID: number | null
+    RequestingUserID: number
+    RequestType: 'STORE_CREATE' | 'STORE_UPDATE' | 'STORE_DELETE'
+    ProposedData_JSON: {
+      StoreName?: string
+      Description?: string
+      LogoURL?: string
+      StoreStatus?: string
+    }
+    Status: string  // 使用StoreChangeRequestStatus中的值
+    SubmitterNotes: string
+    AdminReviewerID: number | null
+    ReviewTimestamp: string | null
+    AdminNotes: string | null
+    CreationTime: string
+    LastUpdatedDate: string
+    
+    // 兼容旧字段，用于平滑过渡
+    RequestID?: number  // 等同于ChangeRequestID
+    UserID?: number     // 等同于RequestingUserID
+    RequestStatus?: string  // 等同于Status
+    StoreName?: string  // 来自ProposedData_JSON
+    Description?: string // 来自ProposedData_JSON
+    LogoURL?: string    // 来自ProposedData_JSON
+    AdminComment?: string // 等同于AdminNotes
+    RequestDate?: string  // 等同于CreationTime
+    ProcessDate?: string  // 等同于ReviewTimestamp
+    ProcessedByUserID?: number // 等同于AdminReviewerID
+    SubmissionDate?: string  // 等同于CreationTime
+    ReviewerUserID?: number  // 等同于AdminReviewerID
+    ReviewDate?: string    // 等同于ReviewTimestamp
+    ReviewerNotes?: string // 等同于AdminNotes
+}
   
   export interface StoreChangeRequestFilter {
     RequestType?: 'STORE_CREATE' | 'STORE_UPDATE' | 'STORE_DELETE'
diff --git a/src/frontend/src/components/dashboard/merchant/StoreChangeRequests.vue b/src/frontend/src/components/dashboard/merchant/StoreChangeRequests.vue
index e69de29..164f00f 100644
--- a/src/frontend/src/components/dashboard/merchant/StoreChangeRequests.vue
+++ b/src/frontend/src/components/dashboard/merchant/StoreChangeRequests.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="store-change-request">
+    <div class="header">
+      <h2>我的店铺变更申请</h2>
+      <el-button @click="fetchRequests" :loading="loading">刷新列表</el-button>
+    </div>
+
+    <el-table :data="requests" v-loading="loading" border style="width: 100%">
+      <el-table-column prop="ChangeRequestID" label="申请ID" width="100" />
+      <el-table-column prop="RequestType" label="申请类型" width="120">
+        <template #default="{ row }">
+          <el-tag :type="getRequestTypeColor(row.RequestType)">
+            {{ translateRequestType(row.RequestType) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="StoreName" label="店铺名称" min-width="150">
+        <template #default="{ row }">
+          {{ getStoreName(row) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="Status" label="审核状态" width="120">
+        <template #default="{ row }">
+          <el-tag :type="getStatusColor(row.Status)">
+            {{ translateRequestStatus(row.Status) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="CreationTime" label="提交时间" width="180">
+        <template #default="{ row }">
+          {{ formatDate(row.CreationTime) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="ReviewTimestamp" label="审核时间" width="180">
+        <template #default="{ row }">
+          {{ row.ReviewTimestamp ? formatDate(row.ReviewTimestamp) : '-' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="120">
+        <template #default="{ row }">
+          <el-button size="small" @click="viewDetails(row)">查看详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog
+      v-model="showDetailsDialog"
+      title="申请详情"
+      width="600px"
+    >
+      <div v-if="selectedRequest">
+        <el-descriptions :column="1" border>
+          <el-descriptions-item label="申请ID">
+            {{ selectedRequest.ChangeRequestID }}
+          </el-descriptions-item>
+          <el-descriptions-item label="申请类型">
+            <el-tag :type="getRequestTypeColor(selectedRequest.RequestType)">
+              {{ translateRequestType(selectedRequest.RequestType) }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="审核状态">
+            <el-tag :type="getStatusColor(selectedRequest.Status)">
+              {{ translateRequestStatus(selectedRequest.Status) }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="提交时间">
+            {{ formatDate(selectedRequest.CreationTime) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="审核时间">
+            {{ selectedRequest.ReviewTimestamp ? formatDate(selectedRequest.ReviewTimestamp) : '尚未审核' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="审核人员">
+            {{ selectedRequest.AdminReviewerID || '尚未指派' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="申请备注">
+            {{ selectedRequest.SubmitterNotes || '无' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="审核备注">
+            {{ selectedRequest.AdminNotes || '无' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="最后更新时间">
+            {{ formatDate(selectedRequest.LastUpdatedDate) }}
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <el-divider content-position="left">申请内容</el-divider>
+        <div class="proposed-data">
+          <el-descriptions :column="1" border>
+            <el-descriptions-item label="店铺名称">
+              {{ selectedRequest.ProposedData_JSON?.StoreName || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="店铺描述">
+              {{ selectedRequest.ProposedData_JSON?.Description || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="Logo URL">
+              {{ selectedRequest.ProposedData_JSON?.LogoURL || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="店铺状态">
+              {{ translateStoreStatus(selectedRequest.ProposedData_JSON?.StoreStatus) || '-' }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </div>
+      <template #footer>
+        <div style="display: flex; justify-content: space-between;">
+          <el-button 
+            type="danger" 
+            @click="confirmDelete" 
+            v-if="canDelete"
+            :loading="deleteLoading"
+          >
+            删除申请
+          </el-button>
+          <div></div>
+          <el-button @click="showDetailsDialog = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 确认删除的对话框 -->
+    <el-dialog
+      v-model="showDeleteConfirmDialog"
+      title="确认删除"
+      width="400px"
+      append-to-body
+    >
+      <div>确定要删除此申请吗？此操作不可撤销。</div>
+      <template #footer>
+        <div style="text-align: right;">
+          <el-button @click="showDeleteConfirmDialog = false">取消</el-button>
+          <el-button type="danger" @click="deleteRequest" :loading="deleteLoading">确认删除</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { fetchCurrentUser } from '@/api/user'
+import { 
+  fetchStoreChangeRequests, 
+  StoreChangeRequest,
+  translateRequestStatus,
+  translateRequestType,
+  translateStoreStatus,
+  getStatusColor,
+  getRequestTypeColor,
+  cancelStoreChangeRequest,
+  StoreChangeRequestStatus
+} from '@/api/storeRequest'
+
+const requests = ref<StoreChangeRequest[]>([])
+const loading = ref(false)
+const showDetailsDialog = ref(false)
+const selectedRequest = ref<StoreChangeRequest | null>(null)
+const currentUserId = ref<number | null>(null)
+const showDeleteConfirmDialog = ref(false)
+const deleteLoading = ref(false)
+
+// 获取当前用户信息
+const loadCurrentUser = async () => {
+  try {
+    const res = await fetchCurrentUser()
+    currentUserId.value = res.data.UserID
+  } catch (err) {
+    console.error('获取当前用户失败', err)
+    ElMessage.error('请先登录')
+  }
+}
+
+// 获取变更申请列表
+const fetchRequests = async () => {
+  if (!currentUserId.value) return
+
+  loading.value = true
+  try {
+    const res = await fetchStoreChangeRequests({ MerchantUserID: currentUserId.value })
+    requests.value = res.data.Requests
+  } catch (err) {
+    console.error('获取申请列表失败', err)
+    ElMessage.error('获取申请列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 查看详情
+const viewDetails = (request: StoreChangeRequest) => {
+  selectedRequest.value = request
+  showDetailsDialog.value = true
+}
+
+// 修改获取店铺名称的方法以适配两种可能的数据结构
+const getStoreName = (request: StoreChangeRequest) => {
+  return request.ProposedData_JSON?.StoreName || '未知店铺'
+}
+
+// 格式化日期，适配新的日期字段格式
+const formatDate = (dateStr: string | null | undefined) => {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleString('zh-CN')
+}
+
+// 计算属性：判断是否可以删除申请
+const canDelete = computed(() => {
+  if (!selectedRequest.value) return false
+  // 只有待审核状态的申请可以删除
+  return [
+    StoreChangeRequestStatus.PENDING_APPROVAL, 
+    StoreChangeRequestStatus.PENDING
+  ].includes(selectedRequest.value.Status as StoreChangeRequestStatus)
+})
+
+// 显示确认删除对话框
+const confirmDelete = () => {
+  showDeleteConfirmDialog.value = true
+}
+
+// 删除请求
+const deleteRequest = async () => {
+  if (!selectedRequest.value) return
+  
+  deleteLoading.value = true
+  try {
+    await cancelStoreChangeRequest(selectedRequest.value.ChangeRequestID)
+    ElMessage.success('申请已成功删除')
+    showDeleteConfirmDialog.value = false
+    showDetailsDialog.value = false
+    // 刷新列表
+    await fetchRequests()
+  } catch (err) {
+    console.error('删除申请失败', err)
+    ElMessage.error('删除申请失败')
+  } finally {
+    deleteLoading.value = false
+  }
+}
+
+onMounted(async () => {
+  await loadCurrentUser()
+  await fetchRequests()
+})
+</script>
+
+<style scoped>
+.store-change-request {
+  padding: 20px;
+  background: #fff;
+  border-radius: 4px;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.proposed-data {
+  margin-top: 16px;
+}
+</style>

From fb15ea7b7939f8e6076a5aa366cf2519f260419c Mon Sep 17 00:00:00 2001
From: Renyye <1457077123@qq.com>
Date: Sun, 25 May 2025 22:36:09 +0800
Subject: [PATCH 12/16] =?UTF-8?q?feat(frontend):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95=E7=8A=B6=E6=80=81=E7=AD=9B=E9=80=89=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E8=AE=A2=E5=8D=95=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=95=8C=E9=9D=A2=20feat(frontend):=20=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E5=BA=97=E9=93=BA=E5=8F=98=E6=9B=B4=E7=94=B3=E8=AF=B7?=
 =?UTF-8?q?=E5=AE=A1=E6=A0=B8=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=A2=9E=E5=BC=BA?=
 =?UTF-8?q?=E5=AE=A1=E6=A0=B8=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/api/order.ts                 |  13 +
 src/frontend/src/api/storeRequest.ts          |   4 +-
 .../dashboard/admin/StoreChangeReviewer.vue   | 731 +++++++-----------
 .../dashboard/merchant/OrderManage.vue        |  58 +-
 .../src/views/DashBoard/Dashboard.vue         |   7 +
 5 files changed, 335 insertions(+), 478 deletions(-)

diff --git a/src/frontend/src/api/order.ts b/src/frontend/src/api/order.ts
index 5f6cedb..5a7fa79 100644
--- a/src/frontend/src/api/order.ts
+++ b/src/frontend/src/api/order.ts
@@ -1,3 +1,4 @@
+// src/frontend/src/api/order.ts
 import axios from 'axios'
 
 /** 单个订单内的商品条目 */
@@ -25,6 +26,18 @@ export type OrderStatusEnum =
   | 'CANCELLED_BY_MERCHANT'
   | 'CANCELLED_BY_SYSTEM'
 
+export const statusValues: OrderStatusEnum[] = [
+  'PENDING_PAYMENT',
+  'PAID_AND_PENDING_PROCESSING',
+  'PROCESSING_BY_MERCHANT',
+  'SHIPPED',
+  'DELIVERED',
+  'COMPLETED',
+  'CANCELLED_BY_USER',
+  'CANCELLED_BY_MERCHANT',
+  'CANCELLED_BY_SYSTEM'
+]
+
 /** 后端返回的订单对象 */
 export interface Order {
   OrderID: number
diff --git a/src/frontend/src/api/storeRequest.ts b/src/frontend/src/api/storeRequest.ts
index 00e8828..462b435 100644
--- a/src/frontend/src/api/storeRequest.ts
+++ b/src/frontend/src/api/storeRequest.ts
@@ -176,8 +176,8 @@ export interface StoreChangeRequest {
   
   /** 更新审批流中的变更申请（管理员操作） */
   export interface StoreChangeAdminUpdate {
-    AdminComment?: string
-    RequestStatus: 'APPROVED' | 'REJECTED' | 'CANCELLED'
+    Status: 'PENDING_APPROVAL' | 'APPROVED' | 'REJECTED' | 'APPLIED' | 'CANCELLED_BY_USER'
+    AdminNotes?: string | null
   }
   
   /** 用于用户更新自己的变更申请 */
diff --git a/src/frontend/src/components/dashboard/admin/StoreChangeReviewer.vue b/src/frontend/src/components/dashboard/admin/StoreChangeReviewer.vue
index 6f47b0d..a87a274 100644
--- a/src/frontend/src/components/dashboard/admin/StoreChangeReviewer.vue
+++ b/src/frontend/src/components/dashboard/admin/StoreChangeReviewer.vue
@@ -1,549 +1,342 @@
 <template>
   <div class="store-change-reviewer">
-    <el-card class="box-card">
-      <template #header>
-        <div class="card-header">
-          <span>店铺变更申请审核</span>
-          <el-button type="primary" @click="refreshRequests" :loading="loading">
-            <i class="el-icon-refresh"></i> 刷新
-          </el-button>
-        </div>
-      </template>
-      
-      <div v-if="loading" class="loading-placeholder">
-        <el-skeleton :rows="5" animated />
-      </div>
-      
-      <div v-else>
-        <!-- 筛选选项 -->
-        <div class="filter-row">
-          <el-select v-model="statusFilter" placeholder="状态筛选" clearable @change="onFilterChange">
-            <el-option label="全部" value="" />
-            <el-option label="待审核" value="PENDING" />
-            <el-option label="已批准" value="APPROVED" />
-            <el-option label="已拒绝" value="REJECTED" />
-            <el-option label="已取消" value="CANCELLED" />
-          </el-select>
-          
-          <el-input
-            v-model="searchQuery"
-            placeholder="搜索店铺名称"
-            clearable
-            prefix-icon="el-icon-search"
-            @clear="onFilterChange"
-            @input="onFilterChange"
-            class="search-input"
-          />
-        </div>
-        
-        <!-- 表格列表 -->
-        <el-table
-          v-if="filteredRequests.length > 0"
-          :data="filteredRequests"
-          style="width: 100%"
-          row-key="RequestID"
-          border
-        >
-          <el-table-column prop="RequestID" label="ID" width="80" />
-          <el-table-column prop="StoreID" label="店铺ID" width="100" />
-          <el-table-column prop="StoreName" label="店铺名称" min-width="150" />
-          <el-table-column prop="RequestDate" label="申请日期" width="180">
-            <template #default="scope">
-              {{ formatDate(scope.row.RequestDate) }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="RequestStatus" label="状态" width="120">
-            <template #default="scope">
-              <el-tag :type="getRequestStatusType(scope.row.RequestStatus)">
-                {{ getRequestStatusText(scope.row.RequestStatus) }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column prop="UserID" label="申请人ID" width="100" />
-          <el-table-column label="操作" width="150" fixed="right">
-            <template #default="scope">
-              <el-button 
-                type="primary" 
-                size="small" 
-                @click="viewRequestDetail(scope.row)"
-              >
-                查看
-              </el-button>
-              <el-button 
-                v-if="scope.row.RequestStatus === 'PENDING'" 
-                type="success" 
-                size="small" 
-                @click="handleRequest(scope.row, 'APPROVED')"
-              >
-                批准
-              </el-button>
-              <el-button 
-                v-if="scope.row.RequestStatus === 'PENDING'" 
-                type="danger" 
-                size="small" 
-                @click="handleRequest(scope.row, 'REJECTED')"
-              >
-                拒绝
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        
-        <el-empty v-else description="没有找到相关变更申请" />
-        
-        <!-- 分页 -->
-        <div v-if="totalRequests > 0" class="pagination">
-          <el-pagination
-            v-model:current-page="currentPage"
-            v-model:page-size="pageSize"
-            :page-sizes="[10, 20, 50, 100]"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="totalRequests"
-            @size-change="onPageSizeChange"
-            @current-change="onPageChange"
-            background
+    <div class="header">
+      <h2>店铺变更申请审核</h2>
+      <div class="filters">
+        <!-- 仅保留“审核状态”筛选 -->
+        <el-select v-model="filters.status" placeholder="审核状态" clearable multiple>
+          <el-option
+            v-for="item in statusOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
           />
-        </div>
+        </el-select>
+        <el-button type="primary" @click="fetchRequests" :loading="loading">查询</el-button>
+        <el-button @click="resetFilters">重置</el-button>
       </div>
-    </el-card>
-    
+    </div>
+
+    <!-- 申请列表 -->
+    <el-table :data="filteredRequests" v-loading="loading" border style="width: 100%">
+      <el-table-column prop="ChangeRequestID" label="申请ID" width="100" />
+      <el-table-column prop="RequestType" label="申请类型" width="120">
+        <template #default="{ row }">
+          <el-tag :type="getRequestTypeColor(row.RequestType)">
+            {{ translateRequestType(row.RequestType) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="StoreID" label="店铺ID" width="100" />
+      <el-table-column prop="StoreName" label="店铺名称" min-width="150">
+        <template #default="{ row }">
+          {{ getStoreName(row) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="RequestingUserID" label="提交用户" width="100" />
+      <el-table-column prop="Status" label="审核状态" width="120">
+        <template #default="{ row }">
+          <el-tag :type="getStatusColor(row.Status)">
+            {{ translateRequestStatus(row.Status) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="CreationTime" label="提交时间" width="180">
+        <template #default="{ row }">
+          {{ formatDate(row.CreationTime) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="200">
+        <template #default="{ row }">
+          <el-button size="small" @click="viewDetails(row)">查看详情</el-button>
+          <el-button 
+            v-if="canReview(row)" 
+            type="primary" 
+            size="small" 
+            @click="viewDetails(row, true)"
+          >
+            审核
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
     <!-- 详情对话框 -->
-    <el-dialog
-      v-model="dialogVisible"
-      :title="`变更申请详情 (#${selectedRequest?.RequestID})`"
-      width="700px"
-    >
-      <div v-if="selectedRequest" class="request-detail">
-        <div class="compare-section">
-          <h3>店铺信息变更对比</h3>
+    <el-dialog v-model="showDetailsDialog" :title="reviewMode ? '审核店铺变更申请' : '申请详情'" width="650px">
+      <div v-if="selectedRequest">
+        <el-descriptions :column="1" border>
+          <el-descriptions-item label="申请ID">
+            {{ selectedRequest.ChangeRequestID }}
+          </el-descriptions-item>
+          <el-descriptions-item label="店铺ID">
+            {{ selectedRequest.StoreID || '新店铺申请' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="申请类型">
+            <el-tag :type="getRequestTypeColor(selectedRequest.RequestType)">
+              {{ translateRequestType(selectedRequest.RequestType) }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="提交用户ID">
+            {{ selectedRequest.RequestingUserID }}
+          </el-descriptions-item>
+          <el-descriptions-item label="审核状态">
+            <el-tag :type="getStatusColor(selectedRequest.Status)">
+              {{ translateRequestStatus(selectedRequest.Status) }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="提交时间">
+            {{ formatDate(selectedRequest.CreationTime) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="审核时间">
+            {{ selectedRequest.ReviewTimestamp ? formatDate(selectedRequest.ReviewTimestamp) : '尚未审核' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="审核人员">
+            {{ selectedRequest.AdminReviewerID || '尚未指派' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="申请备注">
+            {{ selectedRequest.SubmitterNotes || '无' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="审核备注">
+            {{ selectedRequest.AdminNotes || '无' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="最后更新时间">
+            {{ formatDate(selectedRequest.LastUpdatedDate) }}
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <el-divider content-position="left">申请内容</el-divider>
+        <div class="proposed-data">
           <el-descriptions :column="1" border>
-            <el-descriptions-item label="店铺ID">
-              {{ selectedRequest.StoreID }}
-            </el-descriptions-item>
-            
             <el-descriptions-item label="店铺名称">
-              <div v-if="originalStore" class="compare-row">
-                <div class="original">
-                  <strong>原值:</strong> {{ originalStore.StoreName }}
-                </div>
-                <div 
-                  class="changed" 
-                  :class="{ 'highlight': originalStore.StoreName !== selectedRequest.StoreName }"
-                >
-                  <strong>变更为:</strong> {{ selectedRequest.StoreName }}
-                </div>
-              </div>
-              <div v-else>{{ selectedRequest.StoreName }}</div>
+              {{ selectedRequest.ProposedData_JSON?.StoreName || '-' }}
             </el-descriptions-item>
-            
             <el-descriptions-item label="店铺描述">
-              <div v-if="originalStore" class="compare-row">
-                <div class="original">
-                  <strong>原值:</strong> 
-                  <div class="text-content">{{ originalStore.Description || '(无)' }}</div>
-                </div>
-                <div 
-                  class="changed" 
-                  :class="{ 'highlight': originalStore.Description !== selectedRequest.Description }"
-                >
-                  <strong>变更为:</strong>
-                  <div class="text-content">{{ selectedRequest.Description || '(无)' }}</div>
-                </div>
-              </div>
-              <div v-else>{{ selectedRequest.Description }}</div>
+              {{ selectedRequest.ProposedData_JSON?.Description || '-' }}
             </el-descriptions-item>
-            
             <el-descriptions-item label="Logo URL">
-              <div v-if="originalStore" class="compare-row">
-                <div class="original">
-                  <strong>原值:</strong> {{ originalStore.LogoURL || '(无)' }}
-                  <div v-if="originalStore.LogoURL" class="image-preview">
-                    <img :src="originalStore.LogoURL" alt="原Logo" />
-                  </div>
-                </div>
-                <div 
-                  class="changed" 
-                  :class="{ 'highlight': originalStore.LogoURL !== selectedRequest.LogoURL }"
-                >
-                  <strong>变更为:</strong> {{ selectedRequest.LogoURL || '(无)' }}
-                  <div v-if="selectedRequest.LogoURL" class="image-preview">
-                    <img :src="selectedRequest.LogoURL" alt="新Logo" />
-                  </div>
-                </div>
-              </div>
-              <div v-else>{{ selectedRequest.LogoURL }}</div>
+              {{ selectedRequest.ProposedData_JSON?.LogoURL || '-' }}
             </el-descriptions-item>
-          </el-descriptions>
-        </div>
-        
-        <div class="request-info">
-          <h3>申请信息</h3>
-          <el-descriptions :column="2" border>
-            <el-descriptions-item label="申请状态">
-              <el-tag :type="getRequestStatusType(selectedRequest.RequestStatus)">
-                {{ getRequestStatusText(selectedRequest.RequestStatus) }}
-              </el-tag>
-            </el-descriptions-item>
-            <el-descriptions-item label="申请日期">
-              {{ formatDate(selectedRequest.RequestDate) }}
-            </el-descriptions-item>
-            <el-descriptions-item label="申请人ID">
-              {{ selectedRequest.UserID }}
-            </el-descriptions-item>
-            <el-descriptions-item label="处理日期" v-if="selectedRequest.ProcessDate">
-              {{ formatDate(selectedRequest.ProcessDate) }}
-            </el-descriptions-item>
-            <el-descriptions-item label="处理人ID" v-if="selectedRequest.ProcessedByUserID">
-              {{ selectedRequest.ProcessedByUserID }}
-            </el-descriptions-item>
-            <el-descriptions-item label="管理员备注" v-if="selectedRequest.AdminComment">
-              {{ selectedRequest.AdminComment }}
+            <el-descriptions-item label="店铺状态">
+              {{ translateStoreStatus(selectedRequest.ProposedData_JSON?.StoreStatus) || '-' }}
             </el-descriptions-item>
           </el-descriptions>
         </div>
-        
-        <!-- 处理表单（仅待处理的申请显示） -->
-        <div v-if="selectedRequest.RequestStatus === 'PENDING'" class="process-form">
-          <h3>处理申请</h3>
-          <el-form :model="processForm" ref="processFormRef" label-width="100px">
-            <el-form-item label="处理意见" prop="AdminComment">
-              <el-input 
-                v-model="processForm.AdminComment" 
-                type="textarea" 
-                :rows="3" 
-                placeholder="请输入处理意见（可选）"
-              />
+
+        <!-- 审核表单 -->
+        <div v-if="reviewMode" class="review-form">
+          <el-divider content-position="left">审核决定</el-divider>
+          <el-form :model="reviewForm" label-width="100px">
+            <el-form-item label="审核结果">
+              <el-radio-group v-model="reviewForm.Status">
+                <el-radio :label="StoreChangeRequestStatus.APPROVED">通过</el-radio>
+                <el-radio :label="StoreChangeRequestStatus.REJECTED">拒绝</el-radio>
+              </el-radio-group>
             </el-form-item>
-            
-            <el-form-item>
-              <el-button 
-                type="success" 
-                @click="processRequest('APPROVED')" 
-                :loading="processing"
-              >
-                批准申请
-              </el-button>
-              <el-button 
-                type="danger" 
-                @click="processRequest('REJECTED')" 
-                :loading="processing"
-              >
-                拒绝申请
-              </el-button>
+            <el-form-item label="审核备注">
+              <el-input v-model="reviewForm.AdminNotes" type="textarea" :rows="4" placeholder="请输入审核备注，说明通过或拒绝的理由" />
             </el-form-item>
           </el-form>
         </div>
       </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <template v-if="reviewMode">
+            <el-button @click="showDetailsDialog = false">取消</el-button>
+            <el-button type="primary" @click="submitReview" :loading="reviewLoading">提交审核</el-button>
+          </template>
+          <template v-else>
+            <el-button @click="showDetailsDialog = false">关闭</el-button>
+            <el-button v-if="canReview(selectedRequest)" type="primary" @click="switchToReviewMode">开始审核</el-button>
+          </template>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import { 
-  fetchPendingStoreChangeRequests, 
-  fetchStoreChangeRequests,
-  fetchStoreChangeRequestDetail,
-  fetchStoreDetail,
+import { ref, reactive, onMounted, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import { fetchCurrentUser } from '@/api/user'
+import {
+  fetchAdminStoreChangeRequests,
+  StoreChangeRequest,
+  translateRequestStatus,
+  translateRequestType,
+  translateStoreStatus,
+  getStatusColor,
+  getRequestTypeColor,
   adminProcessStoreChangeRequest,
-  type StoreChangeRequest,
-  type StoreChangeRequestFilter,
-  type StoreDetail,
-  type UpdateStoreChangeRequest
-} from '@/api/store'
-import { useUserStore } from '@/stores/user'
+  StoreChangeRequestStatus
+} from '@/api/storeRequest'
 
-const userStore = useUserStore()
+// 数据源
+const requests = ref<StoreChangeRequest[]>([])
 const loading = ref(false)
-const processing = ref(false)
-const changeRequests = ref<StoreChangeRequest[]>([])
-const currentPage = ref(1)
-const pageSize = ref(10)
-const totalRequests = ref(0)
-const statusFilter = ref('')
-const searchQuery = ref('')
-
-// 详情对话框
-const dialogVisible = ref(false)
+const showDetailsDialog = ref(false)
 const selectedRequest = ref<StoreChangeRequest | null>(null)
-const originalStore = ref<StoreDetail | null>(null)
-const processFormRef = ref<FormInstance>()
-const processForm = reactive({
-  AdminComment: ''
-})
+const currentUserId = ref<number | null>(null)
+const reviewMode = ref(false)
+const reviewLoading = ref(false)
 
-// 加载变更申请列表
-const loadChangeRequests = async () => {
-  loading.value = true
-  try {
-    // 默认加载待处理的申请
-    const params: StoreChangeRequestFilter = {
-      page: currentPage.value,
-      page_size: pageSize.value
-    }
-    
-    if (statusFilter.value) {
-      params.status = statusFilter.value as any
-    }
-    
-    const response = await fetchStoreChangeRequests(params)
-    changeRequests.value = response.data.Requests || []
-    totalRequests.value = response.data.Count || 0
-  } catch (error) {
-    console.error('Failed to load change requests:', error)
-    ElMessage.error('加载变更申请失败')
-    changeRequests.value = []
-    totalRequests.value = 0
-  } finally {
-    loading.value = false
-  }
-}
+// 仅保留“审核状态”筛选
+const filters = reactive({
+  status: ['PENDING_APPROVAL'] as string[]
+})
 
-// 刷新请求列表
-const refreshRequests = () => {
-  loadChangeRequests()
-}
+// 审核表单
+const reviewForm = reactive({
+  Status: StoreChangeRequestStatus.APPROVED as 'APPROVED' | 'REJECTED',
+  AdminNotes: ''
+})
 
-// 筛选结果
+// 状态选项
+const statusOptions = [
+  { value: 'PENDING_APPROVAL', label: '待审核' },
+  { value: 'APPROVED', label: '已通过' },
+  { value: 'REJECTED', label: '已拒绝' },
+  { value: 'APPLIED', label: '已应用' },
+  { value: 'CANCELLED_BY_USER', label: '用户已取消' }
+]
+
+/**
+ * 根据 filters.status 在前端进行一次简单过滤，避免频繁请求后端
+ */
 const filteredRequests = computed(() => {
-  if (!searchQuery.value) {
-    return changeRequests.value
-  }
-  
-  const query = searchQuery.value.toLowerCase()
-  return changeRequests.value.filter(request => 
-    request.StoreName?.toLowerCase().includes(query)
-  )
+  if (!filters.status.length) return requests.value
+  return requests.value.filter(r => filters.status.includes(r.Status))
 })
 
-// 格式化日期
-const formatDate = (dateString: string) => {
-  if (!dateString) return ''
-  const date = new Date(dateString)
-  return date.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
+// 获取当前登录用户
+const loadCurrentUser = async () => {
+  try {
+    const res = await fetchCurrentUser()
+    currentUserId.value = res.data.UserID
+  } catch (err) {
+    console.error('获取当前用户失败', err)
+    ElMessage.error('请先登录')
+  }
 }
 
-// 获取申请状态类型
-const getRequestStatusType = (status: string) => {
-  switch (status) {
-    case 'PENDING':
-      return 'warning'
-    case 'APPROVED':
-      return 'success'
-    case 'REJECTED':
-      return 'danger'
-    case 'CANCELLED':
-      return 'info'
-    default:
-      return 'info'
+// 获取申请列表
+const fetchRequests = async () => {
+  loading.value = true
+  try {
+    const res = await fetchAdminStoreChangeRequests({})
+    requests.value = res.data.Requests
+  } catch (err) {
+    console.error('获取申请列表失败', err)
+    ElMessage.error('获取申请列表失败')
+  } finally {
+    loading.value = false
   }
 }
 
-// 获取申请状态文本
-const getRequestStatusText = (status: string) => {
-  switch (status) {
-    case 'PENDING':
-      return '待审核'
-    case 'APPROVED':
-      return '已批准'
-    case 'REJECTED':
-      return '已拒绝'
-    case 'CANCELLED':
-      return '已取消'
-    default:
-      return status
-  }
+// 重置筛选
+const resetFilters = () => {
+  filters.status = ['PENDING_APPROVAL']
+  fetchRequests()
 }
 
-// 查看申请详情
-const viewRequestDetail = async (request: StoreChangeRequest) => {
+// 查看详情 / 审核
+const viewDetails = (request: StoreChangeRequest, startReview = false) => {
   selectedRequest.value = request
-  dialogVisible.value = true
-  processForm.AdminComment = ''
-  
-  // 加载原始店铺信息用于对比
-  try {
-    const response = await fetchStoreDetail(request.StoreID)
-    originalStore.value = response.data
-  } catch (error) {
-    console.error('Failed to load original store details:', error)
-    originalStore.value = null
+  reviewMode.value = startReview
+  if (startReview) {
+    reviewForm.Status = StoreChangeRequestStatus.APPROVED
+    reviewForm.AdminNotes = ''
   }
+  showDetailsDialog.value = true
+}
+
+const switchToReviewMode = () => {
+  reviewMode.value = true
+  reviewForm.Status = StoreChangeRequestStatus.APPROVED
+  reviewForm.AdminNotes = ''
 }
 
-// 处理申请状态变更
-const handleRequest = (request: StoreChangeRequest, status: 'APPROVED' | 'REJECTED') => {
-  viewRequestDetail(request)
-  
-  // 稍作延迟确保对话框已打开
-  setTimeout(() => {
-    ElMessageBox.confirm(
-      `确定要${status === 'APPROVED' ? '批准' : '拒绝'}这个变更申请吗？`,
-      '确认操作',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: status === 'APPROVED' ? 'success' : 'warning'
-      }
-    )
-      .then(() => {
-        processRequest(status)
-      })
-      .catch(() => {
-        // 用户取消操作
-      })
-  }, 300)
+const canReview = (request: StoreChangeRequest | null) => {
+  if (!request) return false
+  return (
+    request.Status === StoreChangeRequestStatus.PENDING_APPROVAL ||
+    request.Status === StoreChangeRequestStatus.PENDING
+  )
 }
 
-// 处理申请
-const processRequest = async (status: 'APPROVED' | 'REJECTED') => {
+const submitReview = async () => {
   if (!selectedRequest.value) return
-  
-  processing.value = true
+  if (
+    reviewForm.Status === StoreChangeRequestStatus.REJECTED &&
+    !reviewForm.AdminNotes.trim()
+  ) {
+    ElMessage.warning('拒绝申请时，请提供拒绝理由')
+    return
+  }
+  reviewLoading.value = true
   try {
-    const data: UpdateStoreChangeRequest = {
-      RequestStatus: status,
-      AdminComment: processForm.AdminComment
-    }
-    
-    await adminProcessStoreChangeRequest(selectedRequest.value.RequestID, data)
-    
-    ElMessage.success(`申请已${status === 'APPROVED' ? '批准' : '拒绝'}`)
-    dialogVisible.value = false
-    
-    // 重新加载申请列表
-    await loadChangeRequests()
-  } catch (error) {
-    console.error('Failed to process request:', error)
-    ElMessage.error('处理申请失败')
+    await adminProcessStoreChangeRequest(selectedRequest.value.ChangeRequestID, {
+      Status: reviewForm.Status,
+      AdminNotes: reviewForm.AdminNotes
+    })
+    ElMessage.success('审核提交成功')
+    showDetailsDialog.value = false
+    fetchRequests()
+  } catch (err) {
+    console.error('审核提交失败', err)
+    ElMessage.error('审核提交失败')
   } finally {
-    processing.value = false
+    reviewLoading.value = false
   }
 }
 
-// 筛选变化
-const onFilterChange = () => {
-  currentPage.value = 1
-  loadChangeRequests()
+const getStoreName = (request: StoreChangeRequest) => {
+  return request.ProposedData_JSON?.StoreName || '未知店铺'
 }
 
-// 页码变化
-const onPageChange = (page: number) => {
-  currentPage.value = page
-  loadChangeRequests()
+const formatDate = (dateStr: string | null | undefined) => {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleString('zh-CN')
 }
 
-// 每页数量变化
-const onPageSizeChange = (size: number) => {
-  pageSize.value = size
-  currentPage.value = 1
-  loadChangeRequests()
-}
-
-// 初始化
-onMounted(() => {
-  loadChangeRequests()
+onMounted(async () => {
+  await loadCurrentUser()
+  await fetchRequests()
 })
 </script>
 
 <style scoped>
 .store-change-reviewer {
-  margin-bottom: 20px;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.loading-placeholder {
-  padding: 20px 0;
+  padding: 20px;
+  background: #fff;
+  border-radius: 4px;
+  height: 100%;
 }
 
-.filter-row {
-  display: flex;
+.header {
   margin-bottom: 20px;
-  gap: 15px;
 }
 
-.search-input {
-  width: 250px;
+.header h2 {
+  margin-bottom: 16px;
 }
 
-.pagination {
-  margin-top: 20px;
+.filters {
   display: flex;
-  justify-content: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
 }
 
-.request-detail {
-  margin-top: 10px;
+.proposed-data {
+  margin-top: 16px;
 }
 
-.compare-section,
-.request-info,
-.process-form {
-  margin-bottom: 25px;
-}
-
-h3 {
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 15px;
-  border-bottom: 1px solid #ebeef5;
-  padding-bottom: 10px;
+.review-form {
+  margin-top: 20px;
 }
 
-.compare-row {
+.dialog-footer {
   display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.original,
-.changed {
-  padding: 8px;
-  border-radius: 4px;
-}
-
-.highlight {
-  background-color: #fdf6ec;
-  border-left: 3px solid #e6a23c;
-}
-
-.text-content {
-  white-space: pre-wrap;
-  word-break: break-word;
-  margin-top: 5px;
-}
-
-.image-preview {
-  margin-top: 10px;
-}
-
-.image-preview img {
-  max-width: 150px;
-  max-height: 150px;
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
-}
-
-@media (max-width: 768px) {
-  .filter-row {
-    flex-direction: column;
-  }
-  
-  .search-input {
-    width: 100%;
-  }
+  justify-content: flex-end;
 }
 </style>
diff --git a/src/frontend/src/components/dashboard/merchant/OrderManage.vue b/src/frontend/src/components/dashboard/merchant/OrderManage.vue
index 9856d25..a4f7d2a 100644
--- a/src/frontend/src/components/dashboard/merchant/OrderManage.vue
+++ b/src/frontend/src/components/dashboard/merchant/OrderManage.vue
@@ -3,6 +3,15 @@
     <!-- 顶部工具栏 -->
     <div class="toolbar">
       <h2>订单管理</h2>
+      <!-- 增加订单状态筛选 -->
+      <el-select v-model="filters.status" placeholder="订单状态" clearable style="width: 200px">
+        <el-option
+          v-for="opt in statusOptions"
+          :key="opt.value"
+          :label="opt.label"
+          :value="opt.value"
+        />
+      </el-select>
       <el-button type="primary" @click="fetchOrders" :loading="loading">
         刷新
       </el-button>
@@ -15,8 +24,8 @@
 
     <!-- 订单列表 -->
     <el-row :gutter="20" v-else>
-      <template v-if="orders.length > 0">
-        <el-col :span="8" v-for="order in orders" :key="order.OrderID">
+      <template v-if="displayedOrders.length > 0">
+        <el-col :span="8" v-for="order in displayedOrders" :key="order.OrderID">
           <OrderCard 
             :order="order"
             @update-status="updateOrderStatus"
@@ -42,10 +51,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
 import { ElMessage } from 'element-plus'
 import OrderCard from '@/components/dashboard/merchant/orderManage/OrderCard.vue'
-import { fetchOrders as fetchOrdersApi, updateOrderStatus as updateOrderStatusApi } from '@/api/order'
+import { fetchOrders as fetchOrdersApi, updateOrderStatus as updateOrderStatusApi, OrderStatusEnum, statusValues } from '@/api/order'
 import type { Order } from '@/api/order'
 
 // 状态管理
@@ -55,6 +64,41 @@ const totalOrders = ref(0)
 const currentPage = ref(1)
 const pageSize = ref(10)
 
+// 筛选条件
+const filters = reactive({
+  status: '' as OrderStatusEnum | ''
+})
+
+// 下拉选项
+const statusOptions = Object.values(statusValues).map(status => ({
+  value: status,
+  label: statusLabel(status)
+}))
+
+function statusLabel(status: OrderStatusEnum) {
+  const map: Record<OrderStatusEnum, string> = {
+    PENDING_PAYMENT: '待付款',
+    PAID_AND_PENDING_PROCESSING: '已付款待处理',
+    PROCESSING_BY_MERCHANT: '商家处理中',
+    SHIPPED: '已发货',
+    DELIVERED: '已送达',
+    COMPLETED: '已完成',
+    CANCELLED_BY_USER: '用户取消',
+    CANCELLED_BY_MERCHANT: '商家取消',
+    CANCELLED_BY_SYSTEM: '系统取消'
+  }
+  return map[status] || status
+}
+
+// 计算展示列表
+const displayedOrders = computed(() => {
+  let filtered = orders.value
+  if (filters.status) {
+    filtered = filtered.filter(o => o.OrderStatus === filters.status)
+  }
+  return filtered
+})
+
 // 获取订单列表
 const fetchOrders = async () => {
   loading.value = true
@@ -85,7 +129,7 @@ const handleCurrentChange = (page: number) => {
 }
 
 // 更新订单状态
-const updateOrderStatus = async (orderId: number, newStatus: string) => {
+const updateOrderStatus = async (orderId: number, newStatus: OrderStatusEnum) => {
   try {
     await updateOrderStatusApi(orderId, { NewStatus: newStatus })
     ElMessage.success('订单状态更新成功')
@@ -108,8 +152,8 @@ onMounted(fetchOrders)
 
 .toolbar {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  gap: 16px;
   margin-bottom: 20px;
 }
 
@@ -122,4 +166,4 @@ onMounted(fetchOrders)
   display: flex;
   justify-content: flex-end;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/views/DashBoard/Dashboard.vue b/src/frontend/src/views/DashBoard/Dashboard.vue
index 62d8a68..f8a2305 100644
--- a/src/frontend/src/views/DashBoard/Dashboard.vue
+++ b/src/frontend/src/views/DashBoard/Dashboard.vue
@@ -19,6 +19,7 @@ import General from '@/components/dashboard/merchant/General.vue'
 import OrderManage from '@/components/dashboard/merchant/OrderManage.vue'
 import StoreManagement from '@/components/dashboard/merchant/StoreManagement.vue'
 import StoreChangeRequests from '@/components/dashboard/merchant/StoreChangeRequests.vue'
+import StoreChangeReviewer from '@/components/dashboard/admin/StoreChangeReviewer.vue'
 
 /** 菜单配置（icon 直接放组件） */
 const menus = [
@@ -45,6 +46,12 @@ const menus = [
     label: '店铺变更申请',
     icon: Shop,
     component: StoreChangeRequests
+  },
+  {
+    index: 'admin-store-review',
+    label: '店铺审核(管理员)',
+    icon: Warning,
+    component: StoreChangeReviewer
   }
 ]
 

From 53f2cf0826895b580c7e336f0d0c0b2ef8cd6e5b Mon Sep 17 00:00:00 2001
From: Renyye <1457077123@qq.com>
Date: Sun, 25 May 2025 23:05:26 +0800
Subject: [PATCH 13/16] feat(frontend): logo

---
 src/frontend/src/assets/images/avatar.jpg     | Bin 6547 -> 0 bytes
 .../src/assets/images/logo-inverse.svg        |   1 -
 src/frontend/src/assets/images/logo.svg       |  86 +++++++++++++++++-
 .../assets/images/mastercard-securecode.svg   |   1 -
 .../src/assets/images/verified-by-visa.svg    |   1 -
 5 files changed, 85 insertions(+), 4 deletions(-)
 delete mode 100644 src/frontend/src/assets/images/avatar.jpg
 delete mode 100644 src/frontend/src/assets/images/logo-inverse.svg
 delete mode 100644 src/frontend/src/assets/images/mastercard-securecode.svg
 delete mode 100644 src/frontend/src/assets/images/verified-by-visa.svg

diff --git a/src/frontend/src/assets/images/avatar.jpg b/src/frontend/src/assets/images/avatar.jpg
deleted file mode 100644
index 4dd24a23bc4bab204c68d40d133dc6e56513febc..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6547
zcma*LWl&t*5;c5=VSu1BxO;%$7M#HY!JP#6AVEWLcPD}jZo!@48YGb5gCw}?;9&wu
zAn<aZ=c{|as`t;^Rj2Cg-qpQU?^>t2_qm(D+W;t)d>!op;OSFN00;P=-5mii#n(2@
zegFu-ymw0hz}*SJCTHtrZ3ozXy7z#<02wA23zq-@u%iJ0R|No|S^z-x_HGG?1h6nM
zF(H^(5D3--tosKK2MY@a4<8p74;L37ivN#6@d=5bM1=SxB&4JyB(yX%G_(x=H4rv7
zHUT~XB@{|YO$H;Q{_n>B>&sm~0K);&fpjnk24KKIU>N9b5SY2=4FQ4vSLgj20}R2!
z#J+ce|E~>92o%7;zyN_U0SM&ZC=dn!hGFtUi6M+k0wi+Gf}~iomh!A*!m$5j!o<SH
z21EW$54wkC0t?9L5JUN`Ji-JS-xl^U%ab%9bv?sbFwf3~WH+q)^@#5Q!2f?fmP~-V
zHq46TKKvdSjCs%MA6_5;#v~vI)v@CD2>VZ}vj(K>#<}+0B7hJ64-^=7Ukmz6Jr0Nw
z0LnqQ0LS^Tgkr1?h{HZU&PVakz?VrDLNB2$M-0$Dy`YM>9e%lIqGTpb{^(m2DWJ2>
z%nA*I%LshQbACaJ99DF6Gn0lhe<qaWAY@U+fDV*R?lLtqXNg$S=f$rTwMH+rp;cX4
zvf{7?ndON11ipX$XqYTV{&5d29Jq4Ry4z&eaJbb>ZVP&gp-m)_U{#m;%20!W{CN1I
z-01#3^ULETVZETGPvvZ~RM0pO6{0tNOmKF$MXTndU0Txjqq7U`uHws1F+*8kJ`%<R
z+L~Rga(%`Q&*|`?4{0cFaeb#@_{+h+E!`HNfrdZCRTx4K+!G&P@fh8AXzz4w*|i<S
za|#HIb3=dxi>*Nw6^L_bKRszLTKEU__fB}W`el8O&T&#+rp0T&B7ocu`Ub0v!O71$
zqsu(Q)no)=fA!1j%D8*chOlklXJdbcS(cRsio@)g^H)4LXoaF`f1r#vuj}%Vm*?4W
ziW2pt!uaa~QY=LbkV*P{GLd|*DayYcof8~m#%I(+IjJx(>+Zi){kUU)=j3olpCbYQ
z!g=B@f;g8x%RDhQH(&kLi#6|e<&#u>@mIs!2<d$`>aS7i^auy0+A&vxsJRHDUPNUX
zn_f*DS~kCurWM)~Z96VG*gjo*z(*MC0kUvHu6DVXm7soIn}|%=&CdPgUhlR({Big@
zKvKsCIX+Ws_8_luvuLik+l0ix#K3TNVL$D=()fXsb#BXuW-r{V{TmN6vD~9M6E%|5
zZbpP&PCPqHjQ;X%^n3b*(N}2a$+@N77HiuU%xp-8zLti|z3g!AWeI{{+(x<||2~$m
zynX7J)#EEv#l=_de|fn-R~0gPbdtG3wj1-l)%5Uau0F@dG<B}K)%#>fHu*xRhf70x
z@B2qR|J<xbvEKJD-&9XEu?3<Dg|4g8dA}WUow!zL{2hWb=#A9m^=?1E1B$HjVMaob
zB<h7UheC2EI!TA~S=Z8x#F-gdhObU6R%L@XS_dCgm8^9dN(tv4o7HR_-E_f&^Zt@U
z>m1_#pbExC?1TJU30CDUoo1)CjiOOe&Cj2fWPY5|*XaszW_H#i;3WFiI<tk6GS~Y$
zSFCYuXpE}f);2QLyX=-_t^C?}sS$7_@~u!A``wxbomov)i)-yWBlD=|_56>oHN>t;
zL#E1vElfN@9?o>ysAj1R*R|~G+I{8@@;Q!QkB<u_5jhPC@_$LrPJ}3Gt6JG^<T7)c
z@U*^)%`SXsGB?TeI)Kc#GgDT4W3B9{m@cVNsHQlFT7P9h^yeKgS6g(U-s-~9!lO0d
zNSDpQHbPW4g#X6q#KLd;4*0?0zgPtCW*huunNOe5O#Hl)d;TGOYRQCeMe4P5?Ow~`
z%;KNEl=6T;mlv0Rwool)5%k$D9@H~*v2||N9lIqlC~}IH810U^zn7Oog~n#`X|?at
zgIDsHH^F2bM=NoTH>GYY&EC#e6!=YtBw1;h%_yA4rrZLpYW3GJBIVPsV`AySrNaS{
z*N4Vzb+)E*iPum5YNJV3`NsYc3dTP|nZG<p_M8zCkM)}@KHuSQ8Vpo|Uf9z|bDK-4
zPn-s#p?%m?4ny2B{GK@DLP#5b{d1{1fB~`MF@>lZ?5E7<n}a`15g<LMY@DcqTR{V~
z5ItR9jofasDO2vd&jt1|V7L=suqifIqi81y{p%?Hfd>Br{fYfgAVLTaCfObuXL?N1
z3L9<}#9{Lfre&rt-ZAu1y`b&;;tv^wBJh3JXq5`6a`XCLA=9~;>6xuR7z{e}!b({P
z*<v#h(UdWTr~z7o$scf}#Faebv%|q?oI8LlkT5-Eqzdr{F%YLNh>(!^L>W4i5B+m7
z-DXXsF!(DbhPWNk{rnshRu;$}A&q@di{mf(BCAbcYH0J{1H!<P!6=?zO}PX9W&NKu
z*Dg%?<^SgZf$kl*Rb23kJ78#{nUm*`i*H+$LqxiJU%ZrY{z>Ot^}fi4pBN<L*S?v0
zNQ*R{jpijcdg9#on?%(ZWgl^p^1`+&NUex=c;Z@J+g;pj*DAd>V~a>M={hRjjPOVG
zgm;BNad?7C^bWRER9c;%M?FTsd*@(<ghy){6Rde8v#vH)rGXd;AC@WV9T0K@zns40
z5R9_iKuQl4UFe*T^djo~vO9hXqXJ!Gj82Ok>p9jw*n4X??qvmu{&?$@FQloQ`yKT$
z!4YvLh=jWk;Ie&c)FCM4tK1-&&2gIWWR-hSk})8vq*sx_br>|9l6_5}caTlbm{Kve
zpwO#=HC>?ZIc~32bjlxN4Eqtbz;rsNnBQ^o<f>@X{!sO^B-B9kw<+>l0rwOm^U`{|
zveTMS#p7Hd8=5%HnrFKKsU8hM?uQm)@%H0_MBck;_{sJ!6(4K7W<nsnt&!pEBXgP=
z{g^@BhtsrElf#!!(qb}`7wrq|rY6Cn!i*c0R`_56@mTUx9TBW|Rl#aCE^%cfydqJp
z%E_v;kN7`-+GVut7BzmX-S2oRCI`<wIrorF)GNWD_0kuEY&4l>>g1recQ>ImYO#8=
zX&^!M_irEE0RmH(31$xw#xufPahgOR`xmpqS|vh#@`${L6i*~o(RaXhU$&oI`1jkQ
zN}8zHQ>5g3RKIe|gHN#-vN7OO9NqPq4y)jr1G#P|u`<dr71EKH=l&ikUIxa=aL&5S
zc{Y7zp=}X-GPy`e{hjn1FWI7@zq%T>IF^vl!s~WPZ%$3z){rA&#f3FkFfSbQTycRS
z*C9NPu4~JLp7d)Z^UqdAjr|;bw}TETWZpJYV*21@H2R1s7-z>P9D`F+7b#6}JR9<l
zVnJY#4AUL(p}-_`3Fg9cetidII;(8n0m8MKvc(GsK&TOW&eZ5r&nI!~_ujT{D|f(P
zV`Zo)B>q}`*SQ@MRVI{pc{Dc5z_b7_GKc593%m9FOq?thpnROVN;|r2P49P%>m*@8
zTZ6rVun`96a-3*gsF;3NF@4H=$6$1WbG=N$u=y|~2n&sD6MjD2e5O8k9p77_2mA4N
z45O{y+9am2N*m6*l+j0qOqNYFmdlqb+X}3S5PS;?sh{{PrpcL7uO`k;kr|aZBYoBC
z+nqD|#=&BNW22bkR??qMcQp9)CM?}1>JC6tJ+=1}a9oY`;@!gOdZQsSYvsH}Pg!$&
z@EES7z+Uu|T;@w~A;H|QlMa@Ty>7qhMx@kQ?D5v)V_OV;?*Mgor%D1TO)%{>A%+J(
zTaC8j_u|gRTfaz*T)Og^+lND2uJ~gg(s~$Si*8K~p=W7US=FO4k@b7HaXJNQ^N;_=
z>>L<c^T~WUQu<X?YG66l)J*)Epf7=9flITPK%??`gcIYd+iFhT@e-+?IE}08;-&Op
zLPjxgXha@9Q!zF9B|A#shKT9u6{EI~OuMI`2cME#z@Ow@0p4Z>^MqtQ?&=akrvQ}9
z-YU)u$ZixlVqR-q?rq<uEraJHHEgrYmx4aoeeI=ugALW>zbGD^X?U@JV4-s$d)7bz
zK7aE-F60%{ue8Tq8OI;DI~kii_Iinv@>!1`trTByQ+{uUOo}~YKk=PUc@+(OM0TFo
z@w7btd*8#@@q_yfqvigN%V9lk*RC9!^@C4QyiDOp*}1%`=$%YGg$~kjp#;jGKMyb3
z&e<(P%mv?{W%I|UbgAA!JD%yAsKBu*I5cT<0(9d0WG7qT#v(ISJZ`|jtG4^k(WumU
zb$)ENZ{fH}9bz_j?*^^K`Sf_?I>a4<B-$CGt=MX+<8q+O9nOqo&WOB`-_};X9_UMn
ztM=O3p#D0AQd&|YDA`1Lqi04F16y%iAW{_fVi#Rk;LZ($EPp>5QmDN8dRwVmvNA8$
z%U`HCmfm@pVPzoubXkD=hDv0GVRn4E)VJUcV1vGRS%+_}BUyj&F6(xBRYT8YOu`u3
z%XyI-l|}BhMm)=d$zc|KYvUw%D3za;|CR8(dh$X$bCeq?rv5p;wc}Ua>~{?x4rkMm
z8z&2Ca<Zk8-;k!8(wF%enF*stgL_kas|!Yi>xZ`tvvkBu<k4sLW(~EU?tnMn1#w-e
zYf{$eh@dti=Ts`rV>9_e_Sd%$(Fgzbpnt#M+TI)OKU{P0Y9%NZyurD|7rC7Z&qRxj
zWDs|=;CRgx_>@`Gv`Gun(To?!P4S?=$O+~sW{|2skM1VMERww3UzyWJ&niG7#z;-+
zaMWkJ(1*We`ysD;p}IDy{BFp$+_x^G3CN8{*+%$06&6JUS~>?!dJp=jYqjCcUi!4Z
zV-U6agjwUI8-F6IFs6?Ar8}hg>>?}D+f6IXG%IAv(Z6C;lhe@ML}fn`Dl_uc{%x55
zl5gx?XW_+PR=oov+xS)TiasaI2HTk`j<SsqWTYsi$abSlX3LKjX+ZnuRJF++q$~@x
z8yUd`s#gb<KGtnss!qH?%+i|&PWVduIET~ETqVhIW&C{YydL0wr0a>FZG2|R*Wozb
zQ*^SmpTPbp8<Qd~TQ|8R-n9F`Gwqksd$L`qE=!KA9e#bBc@mLalUIxy>4y5~cIpQD
z-ScVpaS8h`$=8}Hn58B^Tag|foA8H5NPptRH3bVZ|J)ga3!-*ZyRPnXTWUpMo3v4d
z%GRpMNv1u{AJg;c+xJ!IVE&(V&(MVV_Z9!|&If(B@RVQGh0jEZr4=HQ!2?)3Hl?q4
zKOoMm1)nxNP|?9+Ct(T|er4&3coX+HH*X&Qscn-+DxDQ8YeK@$V=)XG7Wq2Z=U)#}
z|AzW9{QB_46E_l%O<tw6ihD){(o~TsnI;;zXiz<y_PfP_WV>)A1b*_GD>2}dpsl{Q
zd)j+A+XthU^#^M0zij}D#v+<hL-87N8mXZ^<A8Ju2r5xBmzJ_aM-6r4_`jKOx}%)1
zEdZmA%C3|_VS854wn`8g@~<ckp6v7_O?t3+JXT*;@=(o|CbBZ{ZOBN<7-a3dZ5-np
z_{mZ8+L)kJDF1lR-YRJ8G^O66O-6NJnm)su(2kn$AoP?04mP|6clJCXebgs0F5vO#
z<LVvoC42=N|Mys5Lt-33yr@|;`4`Tk$g$pVYfb%2&+QH7mhQJvUECiQ%-ranjqv2P
zI@+wBhD&8hUaD;rp6ptlxW)+X)NVLP&+Bh;Ur4^H|CU(^o^OF$MHs$iIVJqtFWIif
zj{?dK-x3H^m&#>9MUMqI`J53<#i@Y`C7Tvc_+N40wHO3#5w*gptd_|831{Bif_BYB
zh5I5x{)V0qg3VGc_0x>}EHJsm?f@Gr2ONT?AI|+8a@zcavXIuu2&ZL+PP@EW#voB-
zoLhf}#x+#I!~A}J08X@SxLW-z<BwLlJD&{ufld~K886vo`1hUE!bd+&K|?yqg&ihd
zKMN2~|7DDS9|F~xy23t1e@DKJ^0*<>iQ3m{4NTtb;tDkW9!3yQ^t@z(v+4?qTNTfu
zi#B+r7UX&z`6R4Hfi0{I_F7U@AK&)snL31`e#5d4Bzt5uo9k`C?xb_(7;zlCm?#Aa
zs5SlAa=hH2HcZ8Hg0dXs*zlJ`X@{nJ6If&(*T3ZZs*_8mS`XEVIDsUvRv!otFU!+`
z`Sxvi4c^nl+pzp)A>=wHufoM8arGfD9o(*DOf28}fxUqE(7tnJ6D52;hU>~i-dwA-
zT+0gR5<P~ta_Tv)t@r(eC62gp&)F%5;(8}Wk#}H!#K#;-Z{B0NPHCfXS-?9MvkoQ7
zu{$Ns$Ppqm^=R8+a9x8=Z6kV5?DVIpY)s@ZX|cKzwuN+4rBu^6jSTr4*OTDYl}X-h
zO9*-t0<OX~Co2xc@D7X1->xPm%`wLkW$4lW{l3XHg(BPn`G|+kmy%_Wbz<F`vpUJ#
zc9ohjoV8XmpU$~NHPPDhNegm&wV=ag%tT(<mtj8)+MHojc%HbRqvTMvhu3E6IgK(m
zwtJnQ8KWA|e6Ab%(0Z~D(Uftp@S9Rx|7@QxgFnnd8GJR&pB!@_!CFp@9=3;t@ITsM
zdEQxk962#!c|ywIaXqxlqvdLj1VBWNyKNWPPh2JC8`N(7o=6b2(@mTOkdQ_C29vBK
ze%6!@Yq5MCAmF8AX}km472D{@@*?fz6$QOMtnZ{3V2G2w7-*p~T<Fa{IfD)9VEca*
z*q2T9<n*Mcd<vl;z!-dy84?%N_;tB3(3~kHon*kbO<O`GUaE?Y(@Y_BxsLH{bH}hw
zK(!||l8C|$&2Z#V&VX;z$WibNl0IM->YaAdxz3{#{Pg`Xue-?^u2RDsw;@(arlP@`
z=}ud?q4qP4lJ73Q$qn9);A{ayyK+volB7MpcNkz65#!a3z%M$Vm9E6#)<rK``QtrE
z@!V-_+6;FiAe)<4NOAdQ-xUwUeo1<$@kXL2(+t7ubxKoS1E0)bp9iT;J)}{pOA&T~
z%A<IY@|;Y4SXK=rt#Dz7!<S#*-R30$Hv3O1ebCXjDgxGr?Dfyw-9jP>&$@Am&Bt>;
z`|28hCJ$OeG^tZ$t;{MC26juSTXGugg{6$iJ@6tUO;~k`WzkkMe%wJ1KE`oiFv7O{
zYA@8yieZdvG`g%$zEnUL$&l{uX<d8iaCOe>?oliY3UM@1;<+$Rf9`D<pv)0r<x2=>
z4CSC4a>QEX_|lv-vd#t5=LW}{(~N0lyK>PLVI|I)2ol@@nsM)S2HO@Ju3|(yhi-9y
z&o*l#sCBHDsho7iSXZn>dYnK5bPyf^)9WQY;R#G1Wv-1_;Bh6g<v6~ROwM%6<@TYH
zJ7+XIHH?3EK4`}($Ivb<cg2v_{sdLR(L^ZOo|)b-f2yZs5+xoX5t!nf9;;)i+Ew2)
zeE&1+`hT+m^bV-(Ai2dXCoWR_nW&1=w?W}B%2V!d4VH{q=k`~JY6gKK8CQ$GwIYqm
z7uwR`eCz`J4Q|0H0vZ#XGzVr;cq+Q@ZRZ>(SLss%b<CS*FejLCZ*f4nm}D_-m)J$=
zYGUEf<T#xq-up~>8?k=5yrqA`i(|_o!04M2h{xT6p4ayrgq`juSVGgh4DUx}V4s53
z(!gK<ssE{BlqW>==0<h&&|(siTbt=@Takc)dKhsI6z-qDIP2b=O4IwDB!DyBCs~}y
zJhSS69w7IZ0Sie_7w+i3*_B{AkzZ3U$Z)rloL_EGr^)!4z>yK@_0};4@dRQ;zAIue
zSimM5SLyTfL5x?wem5Ha5Th+MA(M`cm7<n;t20`SGA#Q~KsT@8V-8J*3_XRE(aGOZ
zR|qnUQfez^VD~4n+_*BNpT2mEJ|jT3=_vB$<sD$j0k=Sshhf=`x9q`a{wV8wkE<XR
zRKLLCXw_sv3w+o5@1O%caF3bJOG9f$O#dMrZiK((D^ZKz9M-c(k_YJ<K684`YeU5s
zTa<o#uBDBBt!O3(X7E9)nN%q*5-*ccm;1L$W}``<_PUJZ<JC;G?Cu!v;5-&YL?~ND
zpcu&$k(u(U_;O^tGY1M5h~8;a>PwGtUtF*`d38a8^iu&pz60tUHOz{Ihy+?8Bn&<`
z@gt|39A!E%CG!wi5Sd0l=q7~Ic&sBC+`@0!OqRA6<BmGL37LEfIUpUv`6k5BlYp(F
z3Q_+K$+O9fakw2WlHcmIHr;iWN!g$aDC+MZXL6B=xe1+`T|%nEs5=y~H+%Cltvi=r
z1T^ZFK_e|`YzS<3iyrMS`zv6d57Knm8%XvBs!0RbSF&esNTjq95-ZTb=CsQ-;*_R^
z+GrvhXzeg@zvKh%Gl>jaw3EmPc#vEO^dPb_3hbzxv^XZ^9FT8Cyu+XIVm4g*eUFW#
z{LOMZ*1WHHgu#puY|w4#cbi!}r<lHNm(k2Z7zuQ6W2wt)HRMA>?+xKvi-|x(4~w^P
zDO!soydr*?hL@?dm~OR8=V0ERyR(E;{B{mEKkVAh^RLFZD?%pk1;6puff;@E@-B@@
WG7FtG8`r@dFcH0hCUMQbTlhaYfZ=NZ

diff --git a/src/frontend/src/assets/images/logo-inverse.svg b/src/frontend/src/assets/images/logo-inverse.svg
deleted file mode 100644
index 891078c..0000000
--- a/src/frontend/src/assets/images/logo-inverse.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362.302 127.659"><path d="M105.173 123.152H22.529c-9.9 0-18-8.1-18-18V22.508c0-9.9 8.1-18 18-18h82.644c9.9 0 18 8.1 18 18v82.644c0 9.9-8.1 18-18 18z" fill="none" stroke="#bdbdbd" stroke-width="9" stroke-miterlimit="10"/><path d="M162.172 32.442h8.7v60.104h28.801v7.3h-37.501V32.442zm89.301 42.803c0 17.9-12.401 25.702-24.102 25.702-13.101 0-23.202-9.6-23.202-24.902 0-16.2 10.6-25.702 24.002-25.702 13.9 0 23.302 10.1 23.302 24.902zm-38.402.5c0 10.6 6.1 18.601 14.7 18.601 8.4 0 14.701-7.9 14.701-18.8 0-8.202-4.1-18.602-14.501-18.602s-14.9 9.6-14.9 18.8zm91.202-24.301c-.2 3.5-.4 7.4-.4 13.3v28.102c0 11.1-2.2 17.901-6.901 22.102-4.7 4.4-11.5 5.8-17.6 5.8-5.801 0-12.202-1.4-16.102-4l2.2-6.7c3.2 2 8.201 3.8 14.201 3.8 9.001 0 15.6-4.701 15.6-16.902v-5.4h-.198c-2.7 4.5-7.9 8.1-15.402 8.1-12 0-20.601-10.2-20.601-23.6 0-16.402 10.7-25.703 21.801-25.703 8.4 0 13.001 4.4 15.101 8.4h.2l.4-7.3h7.7zm-9.1 19.1c0-1.5-.1-2.8-.5-4-1.6-5.1-5.901-9.3-12.302-9.3-8.4 0-14.4 7.1-14.4 18.301 0 9.5 4.8 17.4 14.3 17.4 5.401 0 10.302-3.4 12.201-9 .5-1.5.7-3.2.7-4.7v-8.7zm67.099 4.701c0 17.9-12.402 25.702-24.102 25.702-13.101 0-23.202-9.6-23.202-24.902 0-16.2 10.6-25.702 24.002-25.702 13.9 0 23.302 10.1 23.302 24.902zm-38.403.5c0 10.6 6.1 18.601 14.7 18.601 8.401 0 14.702-7.9 14.702-18.8 0-8.202-4.1-18.602-14.501-18.602s-14.9 9.6-14.9 18.8z" fill="#bdbdbd"/></svg>
\ No newline at end of file
diff --git a/src/frontend/src/assets/images/logo.svg b/src/frontend/src/assets/images/logo.svg
index 2381cf9..a3db780 100644
--- a/src/frontend/src/assets/images/logo.svg
+++ b/src/frontend/src/assets/images/logo.svg
@@ -1 +1,85 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362.302 127.659"><path d="M105.173 123.152H22.529c-9.9 0-18-8.1-18-18V22.508c0-9.9 8.1-18 18-18h82.644c9.9 0 18 8.1 18 18v82.644c0 9.9-8.1 18-18 18z" fill="none" stroke="#1f1f1f" stroke-width="9" stroke-miterlimit="10"/><path d="M162.172 32.442h8.7v60.104h28.801v7.3h-37.501V32.442zm89.301 42.803c0 17.9-12.401 25.702-24.102 25.702-13.101 0-23.202-9.6-23.202-24.902 0-16.2 10.6-25.702 24.002-25.702 13.9 0 23.302 10.1 23.302 24.902zm-38.402.5c0 10.6 6.1 18.601 14.7 18.601 8.4 0 14.701-7.9 14.701-18.8 0-8.202-4.1-18.602-14.501-18.602s-14.9 9.6-14.9 18.8zm91.202-24.301c-.2 3.5-.4 7.4-.4 13.3v28.102c0 11.1-2.2 17.901-6.901 22.102-4.7 4.4-11.5 5.8-17.6 5.8-5.801 0-12.202-1.4-16.102-4l2.2-6.7c3.2 2 8.201 3.8 14.201 3.8 9.001 0 15.6-4.701 15.6-16.902v-5.4h-.198c-2.7 4.5-7.9 8.1-15.402 8.1-12 0-20.601-10.2-20.601-23.6 0-16.402 10.7-25.703 21.801-25.703 8.4 0 13.001 4.4 15.101 8.4h.2l.4-7.3h7.7zm-9.1 19.1c0-1.5-.1-2.8-.5-4-1.6-5.1-5.901-9.3-12.302-9.3-8.4 0-14.4 7.1-14.4 18.301 0 9.5 4.8 17.4 14.3 17.4 5.401 0 10.302-3.4 12.201-9 .5-1.5.7-3.2.7-4.7v-8.7zm67.099 4.701c0 17.9-12.402 25.702-24.102 25.702-13.101 0-23.202-9.6-23.202-24.902 0-16.2 10.6-25.702 24.002-25.702 13.9 0 23.302 10.1 23.302 24.902zm-38.403.5c0 10.6 6.1 18.601 14.7 18.601 8.401 0 14.702-7.9 14.702-18.8 0-8.202-4.1-18.602-14.501-18.602s-14.9 9.6-14.9 18.8z" fill="#1f1f1f"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 1012.5467 236.17332"
+   height="236.17332"
+   width="1012.5467"
+   xml:space="preserve"
+   id="svg2"
+   version="1.1"><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs6"><clipPath
+       id="clipPath14"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path12"
+         d="M 37.48,361.48 H 796.89 V 538.61 H 37.48 Z" /></clipPath><clipPath
+       id="clipPath24"
+       clipPathUnits="userSpaceOnUse"><path
+         style="clip-rule:evenodd"
+         id="path22"
+         d="M 0,0 H 3375 V 3375 H 0 Z" /></clipPath><clipPath
+       id="clipPath36"
+       clipPathUnits="userSpaceOnUse"><path
+         style="clip-rule:evenodd"
+         id="path34"
+         d="M 0,0 H 3375 V 3375 H 0 Z" /></clipPath><clipPath
+       id="clipPath48"
+       clipPathUnits="userSpaceOnUse"><path
+         style="clip-rule:evenodd"
+         id="path46"
+         d="m 164.39827,1175.4608 h 750 v 715.625 h -750 z" /></clipPath><clipPath
+       id="clipPath60"
+       clipPathUnits="userSpaceOnUse"><path
+         style="clip-rule:evenodd"
+         id="path58"
+         d="M 0,0 H 3375 V 3375 H 0 Z" /></clipPath></defs><g
+     clip-path="url(#clipPath14)"
+     transform="matrix(1.3333333,0,0,-1.3333333,-49.973333,718.14667)"
+     id="g10"><g
+       transform="matrix(0.23999999,0,0,-0.23999999,0,817.91998)"
+       id="g16"><g
+         id="g18"><g
+           clip-path="url(#clipPath24)"
+           id="g20"><g
+             transform="scale(3.125)"
+             id="g26"><path
+               id="path28"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+               d="M 0,0 H 1080 V 1080 H 0 Z" /></g></g></g><g
+         id="g30"><g
+           clip-path="url(#clipPath36)"
+           id="g32"><g
+             transform="scale(3.125)"
+             id="g38"><path
+               id="path40"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+               d="M 0,0 H 1080 V 1080 H 0 Z" /></g></g></g><g
+         id="g42"><g
+           clip-path="url(#clipPath48)"
+           id="g44"><g
+             transform="matrix(18.746338,0,0,18.746338,126.90559,1067.5851)"
+             id="g50"><path
+               id="path52"
+               style="fill:#00bf63;fill-opacity:1;fill-rule:nonzero;stroke:none"
+               d="m 14,36 c -2.21,0 -3.979999,1.790001 -3.979999,4 0,2.209999 1.77,4 3.979999,4 2.209999,0 4,-1.790001 4,-4 0,-2.209999 -1.790001,-4 -4,-4 z M 2,4 v 4 h 4 l 7.190001,15.17 -2.7,4.9 c -0.310001,0.58 -0.49,1.229999 -0.49,1.93 0,2.209999 1.79,4 4,4 H 38 V 30 H 14.85 c -0.279999,0 -0.5,-0.219999 -0.5,-0.5 0,-0.09 0.02,-0.17 0.06,-0.24 L 16.200001,26 H 31.1 c 1.499998,0 2.81,-0.83 3.499998,-2.059999 l 7.150002,-12.98 c 0.16,-0.28 0.25,-0.61 0.25,-0.96 0,-1.1099997 -0.900002,-2 -2,-2 H 10.43 l -1.8999993,-4 H 2.000001 Z m 32,32 c -2.209999,0 -3.98,1.790001 -3.98,4 0,2.209999 1.770001,4 3.98,4 2.209999,0 4,-1.790001 4,-4 0,-2.209999 -1.790001,-4 -4,-4 z" /></g></g></g><g
+         id="g54"><g
+           clip-path="url(#clipPath60)"
+           id="g56"><g
+             transform="matrix(3.125,0,0,3.125,1106.3037,1196.4659)"
+             id="g62"><text
+               id="text66"
+               style="font-variant:normal;font-weight:normal;font-size:154.6499939px;font-family:SourceHanSansSC;-inkscape-font-specification:SourceHanSansSC-Regular;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+               transform="translate(0.03125,175)"><tspan
+                 id="tspan64"
+                 y="0"
+                 x="0 92.32048 186.18736 279.8996 375.77679 466.70551 553.92285 626.29468">ShopEase</tspan></text>
+</g></g></g></g><path
+       id="path68"
+       style="fill:#000000;fill-opacity:0;fill-rule:nonzero;stroke:none"
+       d="M 39.45559,363.72696 H 219.43173 V 535.8094 H 39.45559 Z" /></g></svg>
\ No newline at end of file
diff --git a/src/frontend/src/assets/images/mastercard-securecode.svg b/src/frontend/src/assets/images/mastercard-securecode.svg
deleted file mode 100644
index 5f12979..0000000
--- a/src/frontend/src/assets/images/mastercard-securecode.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="67" height="25" viewBox="0 0 361 136"><path fill-rule="evenodd" clip-rule="evenodd" fill="#EC2127" d="M338.787 54.749c0-3.837 2.975-6.942 6.607-6.942 3.652 0 6.596 3.105 6.596 6.942 0 3.843-2.943 6.948-6.596 6.948-3.632 0-6.607-3.105-6.607-6.948zm6.608 5.303c2.776 0 5.042-2.382 5.042-5.303 0-2.906-2.266-5.267-5.042-5.267-2.765 0-5.042 2.361-5.042 5.267 0 2.921 2.277 5.303 5.042 5.303zm-.899-2.26h-1.353v-6.116h2.453c.499 0 1.059.03 1.488.337.469.345.739.924.739 1.537 0 .678-.385 1.312-.998 1.542l1.059 2.7h-1.504l-.895-2.397h-.99v2.397h.001zm0-3.437h.754c.277 0 .598.009.83-.127.229-.149.331-.446.331-.708 0-.23-.133-.507-.331-.615-.202-.137-.609-.106-.846-.106h-.738v1.556zM244.322 8.583l-1.81 11.773c-3.926-2.09-6.813-2.909-9.897-2.909-8.229 0-14.049 8.365-14.049 20.308 0 8.249 3.907 13.219 10.332 13.219 2.727 0 5.724-.876 9.391-2.797l-1.931 12.389c-4.056 1.167-6.702 1.582-9.769 1.582-11.92 0-19.334-8.991-19.334-23.423 0-19.413 10.244-32.969 24.898-32.969 1.893 0 3.584.185 4.958.583l4.556 1.194c1.356.537 1.661.619 2.655 1.05zm-36.689 8.069a6.076 6.076 0 0 0-1.131-.114c-3.642 0-5.701 1.927-9.083 7.185l.982-6.707h-10.013L181.6 61.149h11.108c3.972-26.974 4.988-31.632 10.313-31.632.324 0 .354 0 .808.045.982-5.318 2.327-9.228 4.182-12.794l-.378-.116zm-66.18 43.958c-3.005 1-5.38 1.455-7.931 1.455-5.642 0-8.723-3.437-8.723-9.708 0-1.23.092-2.557.315-3.957l.684-4.303.507-3.515 4.796-30.114h10.989l-1.26 6.548h5.656l-1.553 10.728h-5.642l-2.92 18.419c-.1.813-.185 1.413-.185 1.828 0 2.26 1.153 3.27 3.766 3.27 1.275 0 2.236-.133 2.975-.412l-1.474 9.761zM97.878 30.972c0 5.57 2.566 9.422 8.377 12.301 4.45 2.213 5.157 2.858 5.157 4.867 0 2.742-1.975 4.012-6.325 4.012-3.281 0-6.348-.548-9.883-1.767l-1.529 10.18.5.106 2.029.43c.653.139 1.614.263 2.882.4 2.636.246 4.657.364 6.087.364 11.596 0 16.961-4.682 16.961-14.734 0-6.04-2.236-9.612-7.762-12.286-4.611-2.197-5.134-2.715-5.134-4.764 0-2.394 1.829-3.624 5.38-3.624 2.166 0 5.103.257 7.907.657l1.575-10.191c-2.882-.491-7.162-.87-9.698-.87-12.304 0-16.57 6.773-16.524 14.919zM332.37 61.149h-10.462l.549-4.324c-3.047 3.416-6.174 4.907-10.214 4.907-8.085 0-13.383-7.285-13.383-18.32 0-14.679 8.233-27.073 18.01-27.073 4.296 0 7.544 1.86 10.603 6.042l2.406-15.504h10.896l-8.405 54.272zm-16.315-10.391c5.165 0 8.775-6.133 8.775-14.868 0-5.609-2.061-8.664-5.881-8.664-5.008 0-8.568 6.158-8.568 14.843 0 5.779 1.916 8.689 5.674 8.689zm-139.588 9.464c-3.782 1.188-7.438 1.788-11.358 1.772-12.327 0-18.768-6.784-18.768-19.755 0-15.167 8.192-26.331 19.329-26.331 9.083 0 14.917 6.257 14.917 16.063 0 3.247-.393 6.413-1.377 10.886h-21.98c-.092.672-.106.979-.106 1.369 0 5.158 3.288 7.756 9.721 7.756 3.943 0 7.493-.855 11.467-2.807l-1.845 11.047zm-6.202-26.28c.063-.922.078-1.674.078-2.233 0-3.607-1.946-5.713-5.234-5.713-3.506 0-6.018 2.813-7.048 7.916l12.204.03zM53.497 61.149H42.453l6.325-41.705-14.133 41.705h-7.569l-.915-41.46-6.663 41.46H9.154l8.63-54.273H33.7l.438 33.584L44.881 6.876h17.177l-8.561 54.273zM81.955 41.49c-1.169-.139-1.683-.19-2.475-.19-6.263 0-9.437 2.279-9.437 6.737 0 2.748 1.56 4.499 3.973 4.499 4.496 0 7.755-4.499 7.939-11.046zm8.039 19.659H80.84l.2-4.582c-2.79 3.654-6.517 5.349-11.582 5.349-6.01 0-10.113-4.918-10.113-12.024 0-10.774 7.17-17.029 19.428-17.029 1.252 0 2.851.097 4.496.327.345-1.46.438-2.09.438-2.864 0-2.915-1.921-4.021-7.102-4.021-3.127 0-6.717.476-9.191 1.261l-1.537.445-.968.286 1.521-9.898c5.519-1.715 9.153-2.376 13.249-2.376 9.499 0 14.533 4.482 14.533 12.94 0 2.197-.161 3.827-.914 8.755l-2.313 15.637-.377 2.824-.284 2.249-.192 1.537-.138 1.184zM263.363 41.49c-1.15-.139-1.684-.19-2.456-.19-6.288 0-9.472 2.279-9.472 6.737 0 2.748 1.577 4.499 3.991 4.499 4.517 0 7.739-4.499 7.937-11.046zm8.047 19.659h-9.166l.213-4.582c-2.788 3.654-6.523 5.349-11.581 5.349-6.01 0-10.13-4.918-10.13-12.024 0-10.774 7.163-17.029 19.445-17.029 1.245 0 2.859.097 4.493.327.339-1.46.438-2.09.438-2.864 0-2.915-1.92-4.021-7.099-4.021-3.146 0-6.726.476-9.179 1.261l-1.572.445-.956.286 1.538-9.898c5.526-1.715 9.152-2.376 13.219-2.376 9.514 0 14.548 4.482 14.548 12.94 0 2.197-.19 3.827-.906 8.755l-2.331 15.637-.342 2.824-.309 2.249-.202 1.537-.121 1.184zm30.878-44.497a5.515 5.515 0 0 0-1.112-.114c-3.629 0-5.704 1.927-9.102 7.185l.986-6.707h-10l-6.76 44.133h11.07c3.976-26.974 5.02-31.632 10.309-31.632.343 0 .32-.031.773.045 1.002-5.318 2.354-9.228 4.212-12.794l-.376-.116z"/><path d="M255.903 103.951c0 10.005-3.097 15.896-7.979 15.896-3.564.11-5.725-3.862-5.725-9.803 0-7.026 3.157-14.99 8.223-14.99 4.072.001 5.481 4.316 5.481 8.897zm10.872.184c0-11.121-5.495-19.777-15.823-19.777-11.89 0-19.59 10.526-19.59 26.022 0 11.094 4.551 20.165 15.808 20.165 11.36 0 19.605-8.043 19.605-26.41zm-31.86-27.584l-1.69 11.76c-3.675-2.075-6.349-2.936-9.239-2.936-7.724 0-13.119 8.401-13.119 20.344 0 8.245 3.613 13.233 9.631 13.233 2.566 0 5.374-.876 8.782-2.799l-1.79 12.381c-3.82 1.177-6.314 1.58-9.151 1.58-11.128 0-18.06-8.995-18.06-23.429 0-19.422 9.567-32.976 23.27-32.976 1.774 0 3.344.225 4.642.583l4.228 1.2c1.305.518 1.575.609 2.496 1.059zm-68.354 8.081a4.047 4.047 0 0 0-1.061-.122c-3.352 0-5.318 1.935-8.46 7.175l.914-6.695h-9.347l-6.31 44.138h10.321c3.713-27.001 4.695-31.647 9.646-31.647.292 0 .322 0 .753.05.931-5.339 2.184-9.25 3.92-12.823l-.376-.076zm134.829 44.024h-9.753l.502-4.308c-2.837 3.397-5.788 4.901-9.563 4.901-7.521 0-12.487-7.297-12.487-18.329 0-14.655 7.708-27.085 16.821-27.085 4.021 0 7.072 1.9 9.891 6.082l2.277-15.519h10.16l-7.848 54.258zm-15.26-10.382c4.862 0 8.214-6.128 8.214-14.871 0-5.625-1.915-8.645-5.465-8.645-4.695 0-8.031 6.135-8.031 14.848 0 5.751 1.79 8.668 5.282 8.668zm-216.364 10.2c-3.511 1.211-6.932 1.797-10.574 1.797-11.528 0-17.545-6.798-17.545-19.765 0-15.146 7.654-26.319 18.044-26.319 8.508 0 13.933 6.246 13.933 16.052 0 3.241-.369 6.417-1.252 10.892H51.798c-.062.659-.085.986-.085 1.371 0 5.146 3.082 7.742 9.069 7.742 3.689 0 7.024-.86 10.721-2.795l-1.737 11.025zm-5.772-26.259c.047-.933.077-1.676.077-2.243 0-3.599-1.813-5.705-4.88-5.705-3.297 0-5.642 2.833-6.586 7.902l11.389.046zm128.562 26.259c-3.522 1.211-6.95 1.797-10.579 1.797-11.551 0-17.56-6.798-17.56-19.765 0-15.146 7.662-26.319 18.044-26.319 8.51 0 13.952 6.246 13.952 16.052 0 3.241-.385 6.417-1.299 10.892h-20.529c-.063.659-.101.986-.101 1.371 0 5.146 3.075 7.742 9.061 7.742 3.69 0 7.034-.86 10.732-2.795l-1.721 11.025zm-5.804-26.259c.068-.933.106-1.676.106-2.243 0-3.599-1.828-5.705-4.882-5.705-3.298 0-5.64 2.833-6.594 7.902l11.37.046zm149.86 26.259c-3.568 1.211-6.95 1.797-10.606 1.797-11.527 0-17.56-6.798-17.56-19.765 0-15.146 7.678-26.319 18.059-26.319 8.508 0 13.928 6.246 13.928 16.052 0 3.241-.354 6.417-1.269 10.892h-20.55c-.072.659-.087.986-.087 1.371 0 5.146 3.084 7.742 9.071 7.742 3.693 0 7.022-.86 10.728-2.795l-1.714 11.025zm-5.803-26.259c.046-.933.076-1.676.076-2.243 0-3.599-1.805-5.705-4.879-5.705-3.298 0-5.632 2.833-6.588 7.902l11.391.046zM39.21 86.627c-2.021-1.352-4.757-2.533-8.623-2.533-4.173 0-7.531.865-7.531 5.305 0 7.841 15.216 4.913 15.216 21.704 0 15.294-10.043 19.259-19.128 19.259-4.042 0-8.692-1.337-12.119-2.86l2.467-11.238c2.068 1.878 6.24 3.165 9.652 3.165 3.251 0 8.346-.888 8.346-6.562 0-8.885-15.208-5.58-15.208-21.175 0-14.266 8.884-18.539 17.454-18.539 4.826 0 9.36.708 12.019 2.475L39.21 86.627zm60.781 41.831c-2.129 1.024-4.972 1.698-9.168 1.698-9.022 0-14.617-9.018-14.617-19.997 0-14.369 8.093-25.832 20.004-25.832 2.598 0 6.563 1.124 9.691 2.937l-2.283 10.541c-2.214-1.455-4.519-2.38-6.893-2.38-5.519 0-9.461 5.058-9.461 14.121 0 5.218 2.859 9.498 7.377 9.498 2.689 0 4.581-.567 6.895-1.92l-1.545 11.334zm38.612-11.052c-.53 3.797-1.022 7.483-1.315 11.444h-9.937l.838-7.134h-.101c-3.112 4.849-6.332 8.15-11.958 8.15-6.239 0-9.62-6.565-9.62-15.139 0-2.955.184-4.623.844-9.238l2.813-20.428h11.059l-2.967 20.488c-.3 2.201-.722 4.384-.722 6.661 0 2.582 1.176 5.194 4.158 5.034 4.533 0 7.208-5.545 7.969-12.015l3.052-20.169h10.705l-4.818 32.346zm208.311 10.911h-1.672v-7.32h-2.418v-1.568h6.508v1.568h-2.418v7.32zm11.086 0h-1.562v-7.43h-.022l-1.493 7.43h-1.638l-1.458-7.43h-.023v7.43h-1.558v-8.888h2.438l1.451 7.007h.022l1.425-7.007H358v8.888z" fill-rule="evenodd" clip-rule="evenodd" fill="#F89620"/></svg>
\ No newline at end of file
diff --git a/src/frontend/src/assets/images/verified-by-visa.svg b/src/frontend/src/assets/images/verified-by-visa.svg
deleted file mode 100644
index ba45585..0000000
--- a/src/frontend/src/assets/images/verified-by-visa.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="50" height="25" viewBox="0 0 186.4 93.9"><path d="M11.1 33.5L1.3 3.4h4.2l4.7 14.8c1.3 4.1 2.4 7.7 3.2 11.3h.1c.8-3.5 2.1-7.3 3.4-11.2L22 3.4h4.2L15.4 33.5h-4.3zm17.2-10.1c.1 5.3 3.5 7.5 7.4 7.5 2.8 0 4.5-.5 6-1.1l.7 2.8c-1.4.6-3.8 1.3-7.2 1.3-6.7 0-10.6-4.4-10.6-10.9s3.8-11.7 10.1-11.7c7.1 0 8.9 6.2 8.9 10.2 0 .8-.1 1.4-.1 1.8l-15.2.1zm11.5-2.8c.1-2.5-1-6.4-5.5-6.4-4 0-5.7 3.7-6 6.4h11.5zm6.9-2c0-2.5 0-4.7-.2-6.7h3.4l.1 4.2h.2c1-2.9 3.4-4.7 6-4.7.4 0 .8 0 1.1.1v3.7c-.4-.1-.8-.1-1.3-.1-2.8 0-4.7 2.1-5.3 5-.1.5-.2 1.2-.2 1.8v11.5h-3.9V18.6h.1zM64.1 5.8c0 1.3-.9 2.4-2.5 2.4-1.4 0-2.4-1.1-2.4-2.4 0-1.4 1-2.5 2.5-2.5 1.4 0 2.4 1.1 2.4 2.5m-4.4 6.1h3.9v21.6h-3.9V11.9zm9.1 21.6V14.9h-3v-3h3v-1c0-3 .7-5.8 2.5-7.6 1.5-1.4 3.4-2 5.3-2 1.4 0 2.6.3 3.4.6l-.5 3c-.6-.3-1.4-.5-2.5-.5-3.3 0-4.2 2.9-4.2 6.3v1.2H78v3h-5.2v18.6h-4zM86.1 5.8c.1 1.3-.9 2.4-2.5 2.4-1.4 0-2.4-1.1-2.4-2.4 0-1.4 1-2.5 2.5-2.5s2.4 1.1 2.4 2.5m-4.4 6.1h3.9v21.6h-3.9V11.9zm10.9 11.5c.1 5.3 3.5 7.5 7.4 7.5 2.8 0 4.5-.5 6-1.1l.7 2.8c-1.4.6-3.8 1.3-7.2 1.3-6.7 0-10.6-4.4-10.6-10.9S92.7 11.3 99 11.3c7.1 0 8.9 6.2 8.9 10.2 0 .8-.1 1.4-.1 1.8l-15.2.1zm11.5-2.8c0-2.5-1-6.4-5.5-6.4-4 0-5.7 3.7-6 6.4h11.5zm25.6-18.8v26.1c0 1.9 0 4.1.2 5.6h-3.5l-.2-3.8h-.1c-1.2 2.4-3.8 4.2-7.4 4.2-5.2 0-9.2-4.4-9.2-11 0-7.2 4.4-11.6 9.7-11.6 3.3 0 5.5 1.6 6.5 3.3h.1V1.8h3.9zm-3.9 18.9c0-.5 0-1.2-.2-1.7-.6-2.5-2.7-4.6-5.7-4.6-4.1 0-6.5 3.6-6.5 8.4 0 4.4 2.1 8 6.4 8 2.6 0 5-1.7 5.8-4.7.1-.5.2-1.1.2-1.7v-3.7zm18.4 12.8c.1-1.5.2-3.7.2-5.6V1.8h3.9v13.6h.1c1.4-2.4 3.9-4 7.4-4 5.4 0 9.2 4.5 9.1 11 0 7.7-4.9 11.6-9.7 11.6-3.1 0-5.6-1.2-7.2-4.1h-.1l-.2 3.6h-3.5zm4.1-8.7c0 .5.1 1 .2 1.4.8 2.7 3 4.6 5.9 4.6 4.1 0 6.6-3.4 6.6-8.3 0-4.3-2.2-8-6.4-8-2.7 0-5.2 1.8-6 4.8-.1.4-.2 1-.2 1.6v3.9h-.1zm20.9-12.9l4.7 12.8c.5 1.4 1 3.1 1.4 4.4h.1c.4-1.3.8-3 1.4-4.5l4.3-12.7h4.2l-5.9 15.4c-2.8 7.4-4.7 11.2-7.4 13.5-1.9 1.7-3.8 2.4-4.8 2.5l-1-3.3c1-.3 2.3-.9 3.4-1.9 1.1-.8 2.4-2.4 3.3-4.4.2-.4.3-.7.3-.9s-.1-.5-.3-1l-8-19.9h4.3zM66.5 48.2L54.6 78.3l-4.8-25.6c-.6-2.9-2.8-4.5-5.3-4.5H25l-.3 1.3c4 .9 8.5 2.3 11.3 3.8 1.7.9 2.2 1.7 2.7 3.9l9.1 35.3H60l18.6-44.3H66.5zm17 0L74 92.5h11.5l9.4-44.3zM110 60.5c0-1.6 1.6-3.3 4.9-3.7 1.6-.2 6.2-.4 11.3 2l2-9.4c-2.8-1-6.3-2-10.7-2-11.3 0-19.3 6-19.4 14.7-.1 6.4 5.7 9.9 10 12 4.5 2.2 6 3.5 5.9 5.5 0 3-3.6 4.3-6.8 4.3-5.8.1-9.1-1.6-11.8-2.8l-2.1 9.7c2.7 1.2 7.6 2.3 12.7 2.3 12 0 19.9-5.9 19.9-15.2.2-11.5-16-12.2-15.9-17.4m33.1 16.3l6.1-16.6 3.4 16.6h-9.5zm4.4-28.6c-2.2 0-4.1 1.3-4.9 3.2l-17.2 41h12l2.4-6.6h14.7l1.4 6.6h10.6l-9.2-44.3h-9.8v.1z" fill="#1A1F71"/></svg>
\ No newline at end of file

From 2eec7a3e62898a8c02affe2fa9ad396323523824 Mon Sep 17 00:00:00 2001
From: Renyye <1457077123@qq.com>
Date: Mon, 26 May 2025 00:17:19 +0800
Subject: [PATCH 14/16] feat(frontend): optimizations

---
 src/frontend/src/api/user.ts                  |   1 +
 .../src/components/User/UserProfile.vue       |   9 +-
 .../src/components/cards/store_card.vue       |   5 +-
 .../src/components/layout/NaviBar.vue         |  40 +++++-
 .../src/components/layout/TopInfoBar.vue      |  10 +-
 .../src/views/DashBoard/Dashboard.vue         | 126 +++++++++++++++---
 src/frontend/src/views/Explore.vue            |  58 +++++++-
 7 files changed, 207 insertions(+), 42 deletions(-)

diff --git a/src/frontend/src/api/user.ts b/src/frontend/src/api/user.ts
index 5a4199c..a4dd3f8 100644
--- a/src/frontend/src/api/user.ts
+++ b/src/frontend/src/api/user.ts
@@ -8,6 +8,7 @@ export interface UserInfo {
   PhoneNumber: string
   RegistrationDate: string
   LastLoginDate: string
+  UserRole: string
 }
 
 /**
diff --git a/src/frontend/src/components/User/UserProfile.vue b/src/frontend/src/components/User/UserProfile.vue
index c143e48..3695769 100644
--- a/src/frontend/src/components/User/UserProfile.vue
+++ b/src/frontend/src/components/User/UserProfile.vue
@@ -36,6 +36,11 @@
         <span class="label">Last Login:</span>
         <span class="value">{{ formattedDate(profile.LastLoginDate) }}</span>
       </div>
+      <div class="field">
+        <span class="label">Privilege:</span>
+        <span class="value">{{ profile.UserRole }}</span>
+      </div>
+      
 
       <!-- logout buttons -->
       <div class="logout-actions">
@@ -77,6 +82,7 @@ interface Profile {
   PhoneNumber: string
   RegistrationDate: string
   LastLoginDate: string
+  UserRole: string
 }
 
 const router = useRouter()
@@ -88,7 +94,8 @@ const profile      = ref<Profile>({
   Email: '',
   PhoneNumber: '',
   RegistrationDate: '',
-  LastLoginDate: ''
+  LastLoginDate: '',
+  UserRole: ''
 })
 const loggingOut   = ref(false)
 const loggingOutAll = ref(false)
diff --git a/src/frontend/src/components/cards/store_card.vue b/src/frontend/src/components/cards/store_card.vue
index a08d369..824547d 100644
--- a/src/frontend/src/components/cards/store_card.vue
+++ b/src/frontend/src/components/cards/store_card.vue
@@ -34,7 +34,8 @@
 
         <p class="store-description">{{ truncatedDescription }}</p>
         <div class="store-footer">
-          <span class="store-product-count">{{ storeProductCount }}+ 商品</span>
+          <span class="store-product-count"></span>
+          <!-- <span class="store-product-count">{{ storeProductCount }}+ 商品</span> -->
           <el-button type="primary" size="small" class="visit-button">查看店铺</el-button>
         </div>
       </div>
@@ -87,7 +88,7 @@ const statusType = computed(() => getStatusType(storeStatus.value));
 const statusLabel = computed(() => translateStatus(storeStatus.value));
 
 const truncatedDescription = computed(() => {
-  const desc = props.store.Description || '';
+  const desc = props.store.Description || '暂无描述';
   return desc.length > 50 ? desc.slice(0, 50) + '...' : desc;
 });
 
diff --git a/src/frontend/src/components/layout/NaviBar.vue b/src/frontend/src/components/layout/NaviBar.vue
index 65e4e47..e3edaad 100644
--- a/src/frontend/src/components/layout/NaviBar.vue
+++ b/src/frontend/src/components/layout/NaviBar.vue
@@ -7,6 +7,12 @@ const router = useRouter()
 const activeIndex = ref(router.currentRoute.value.path)
 
 const handleSelect = (key: string) => {
+
+  if (key.startsWith('http://') || key.startsWith('https://')) {
+    window.open(key, '_blank')
+    return
+  }
+
   activeIndex.value = key
   router.push(key)
 }
@@ -31,26 +37,27 @@ const handleUserClick = () => {
         @select="handleSelect">
         <!-- Logo 放左侧 -->
         <el-menu-item index="/" class="logo-item">
-          <img style="width: 120px" src="@/assets/images/logo.svg" alt="Logo" />
+          <img style="width: 170px" src="@/assets/images/logo.svg" alt="Logo" />
         </el-menu-item>
 
         <div class="menu-main">
           <!-- 主导航 -->
           <el-menu-item index="/explore">EXPLORE</el-menu-item>
           <el-menu-item index="/stores">STORES</el-menu-item>
-          <el-sub-menu index="pages">
+          <el-menu-item index="/">PAGES</el-menu-item>
+          <!-- <el-sub-menu index="pages">
             <template #title>PAGES</template>
             <el-menu-item index="/order">Order</el-menu-item>
             <el-menu-item index="/merchant">Merchant_manage</el-menu-item>
             <el-menu-item index="/admin">Admin_manage</el-menu-item>
-          </el-sub-menu>
-          <el-menu-item index="/blog">BLOG</el-menu-item>
-          <el-menu-item index="/about">ABOUT</el-menu-item>
-          <el-menu-item index="/contacts">CONTACTS</el-menu-item>
+          </el-sub-menu> -->
+          <el-menu-item index="/">BLOG</el-menu-item>
+          <el-menu-item index="/">ABOUT</el-menu-item>
+          <el-menu-item index="https://github.com/MisakaVan/CS3321-Database-FinalProject">CONTACTS</el-menu-item>
         </div>
 
         <div class="menu-actions">
-          <el-menu-item index="/search">
+          <el-menu-item index="/explore">
             <el-icon>
               <Search />
             </el-icon>
@@ -117,4 +124,23 @@ const handleUserClick = () => {
 .el-menu--horizontal > .el-menu-item.is-active {
   background-color: transparent !important;
 }
+
+.search-area {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-input {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  z-index: 1000;
+  background: white;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  padding: 8px;
+}
 </style>
\ No newline at end of file
diff --git a/src/frontend/src/components/layout/TopInfoBar.vue b/src/frontend/src/components/layout/TopInfoBar.vue
index 0dd8461..528e7bc 100644
--- a/src/frontend/src/components/layout/TopInfoBar.vue
+++ b/src/frontend/src/components/layout/TopInfoBar.vue
@@ -11,9 +11,9 @@
 
       <div class="right">
         <el-space :size="20">
-          <RouterLink to="/news">News</RouterLink>
-          <RouterLink to="/faq">FAQ</RouterLink>
-          <RouterLink to="/payment">Payment</RouterLink>
+          <RouterLink to="/">News</RouterLink>
+          <RouterLink to="/">FAQ</RouterLink>
+          <RouterLink to="/merchant" target="_blank">MANAGE</RouterLink>
         </el-space>
       </div>
     </div>
@@ -21,8 +21,8 @@
 </template>
 
 <script setup lang="ts">
-const phone = '8 800 799 99 99'
-const store = 'St. Petersburg'
+const phone = '1145141919810'
+const store = 'Dongchuan Rd. 800'
 const hours = 'Daily 10:00–22:00'
 </script>
 
diff --git a/src/frontend/src/views/DashBoard/Dashboard.vue b/src/frontend/src/views/DashBoard/Dashboard.vue
index f8a2305..7b6b4c7 100644
--- a/src/frontend/src/views/DashBoard/Dashboard.vue
+++ b/src/frontend/src/views/DashBoard/Dashboard.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ref, shallowRef } from 'vue'
+import { ref, shallowRef, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
 import {
   House,
   DataAnalysis,
@@ -20,63 +22,120 @@ import OrderManage from '@/components/dashboard/merchant/OrderManage.vue'
 import StoreManagement from '@/components/dashboard/merchant/StoreManagement.vue'
 import StoreChangeRequests from '@/components/dashboard/merchant/StoreChangeRequests.vue'
 import StoreChangeReviewer from '@/components/dashboard/admin/StoreChangeReviewer.vue'
+import { fetchCurrentUser } from '@/api/user'
 
-/** 菜单配置（icon 直接放组件） */
-const menus = [
+const router = useRouter()
+const userInfo = ref<any>(null)
+const loading = ref(true)
+
+/** 完整的菜单配置 */
+const allMenus = [
   {
     index: 'home',
     label: '首页',
     icon: House,
-    component: General
+    component: General,
+    roles: ['merchant', 'admin']
   },
   {
     index: 'order',
     label: '订单管理',
     icon: DataAnalysis,
-    component: OrderManage
+    component: OrderManage,
+    roles: ['merchant', 'admin']
   },
   {
     index: 'store',
     label: '店铺管理',
     icon: Shop,
-    component: StoreManagement
+    component: StoreManagement,
+    roles: ['merchant', 'admin']
   },
   {
     index: 'store-request',
     label: '店铺变更申请',
     icon: Shop,
-    component: StoreChangeRequests
+    component: StoreChangeRequests,
+    roles: ['merchant', 'admin']
   },
   {
     index: 'admin-store-review',
     label: '店铺审核(管理员)',
     icon: Warning,
-    component: StoreChangeReviewer
+    component: StoreChangeReviewer,
+    roles: ['admin']
   }
 ]
 
-const activeMenu = ref(menus[0].index)
-const currentComponent = shallowRef(menus[0].component)
+/** 根据用户角色过滤菜单 */
+const menus = computed(() => {
+  if (!userInfo.value) return []
+  const userRole = userInfo.value.UserRole
+  return allMenus.filter(menu => menu.roles.includes(userRole))
+})
+
+const activeMenu = ref('')
+const currentComponent = shallowRef(General)
+
+/** 验证用户权限并初始化 */
+const initializeDashboard = async () => {
+  try {
+    const response = await fetchCurrentUser()
+    userInfo.value = response.data
+    
+    // 检查用户角色权限
+    const userRole = userInfo.value.UserRole
+    if (!['admin', 'merchant'].includes(userRole)) {
+      ElMessage.error('权限不足，无法访问此页面')
+      router.push('/')
+      return
+    }
+    
+    // 设置默认激活的菜单
+    const availableMenus = menus.value
+    if (availableMenus.length > 0) {
+      activeMenu.value = availableMenus[0].index
+      currentComponent.value = availableMenus[0].component
+    }
+    
+  } catch (error) {
+    console.error('获取用户信息失败:', error)
+    ElMessage.error('获取用户信息失败，请重新登录')
+    // 清除token并跳转到登录页
+    localStorage.removeItem('access_token')
+    router.push('/login')
+  } finally {
+    loading.value = false
+  }
+}
 
 /** 菜单切换：直接取菜单里的 component */
 function handleMenuSelect(index: string) {
-  const menu = menus.find(m => m.index === index)
+  const menu = menus.value.find(m => m.index === index)
   if (!menu) return
   activeMenu.value = index
   currentComponent.value = menu.component
 }
+
+onMounted(initializeDashboard)
 </script>
 
 <template>
-  <el-container class="layout-root">
+  <el-container class="layout-root" v-loading="loading">
     <!-- ===== 左侧导航 ===== -->
-    <el-aside width="200px" class="sidebar">
+    <el-aside width="200px" class="sidebar" v-if="!loading && userInfo">
       <!-- LOGO -->
       <div class="logo flex items-center justify-center gap-2">
         <img src="https://element-plus-admin.cn/assets/logo-CRQ9AZN7.png" width="26" />
         <span>ElementAdmin</span>
       </div>
 
+      <!-- 用户信息 -->
+      <div class="user-info">
+        <div class="user-name">{{ userInfo.Username }}</div>
+        <div class="user-role">{{ userInfo.UserRole === 'admin' ? '管理员' : '商家' }}</div>
+      </div>
+
       <el-scrollbar>
         <el-menu
           :default-active="activeMenu"
@@ -100,13 +159,18 @@ function handleMenuSelect(index: string) {
     </el-aside>
 
     <!-- ===== 右侧内容 ===== -->
-    <el-container>
+    <el-container v-if="!loading && userInfo">
       <el-main class="content-main">
         <el-scrollbar>
           <component :is="currentComponent" class="h-full" />
         </el-scrollbar>
       </el-main>
     </el-container>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-container">
+      <el-skeleton :rows="5" animated />
+    </div>
   </el-container>
 </template>
 
@@ -116,6 +180,7 @@ function handleMenuSelect(index: string) {
   height: 100vh;
   background: var(--el-bg-color);
 }
+
 /* ------ Sidebar ------ */
 .sidebar {
   background: #001529;          /* 深蓝 */
@@ -123,28 +188,45 @@ function handleMenuSelect(index: string) {
   display: flex;
   flex-direction: column;
 }
+
 .logo {
   height: 56px;
   font-weight: 600;
   font-size: 18px;
   color: #fff;
 }
-/* ------ Topbar ------ */
-.topbar {
-  height: 56px;
-  line-height: 56px;
-  border-bottom: 1px solid var(--el-border-color-lighter);
-  background: #fff;
-  padding: 0 24px;
+
+.user-info {
+  padding: 16px;
+  border-bottom: 1px solid #303030;
+  text-align: center;
+}
+
+.user-name {
+  color: #fff;
   font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 4px;
 }
+
+.user-role {
+  color: #bfcbd9;
+  font-size: 12px;
+}
+
 /* ------ 主体 ------ */
 .content-main {
   padding: 0;   /* 让内部组件自己撑满 */
 }
+
+.loading-container {
+  padding: 20px;
+  flex: 1;
+}
+
 /* 让 el-menu 选择项有圆角高亮 */
 :deep(.el-menu-item.is-active) {
   background-color: #1890ff !important;
   border-radius: 4px;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/views/Explore.vue b/src/frontend/src/views/Explore.vue
index daabdc6..57943e3 100644
--- a/src/frontend/src/views/Explore.vue
+++ b/src/frontend/src/views/Explore.vue
@@ -12,17 +12,21 @@ const router = useRouter()
 const products = ref<Product[]>([])
 const loading  = ref(false)
 const total    = ref(0)          // 如果后端未来支持返回总数可使用
-const limit    =  ref(30)
+const limit    = ref(30)
+const currentPage = ref(1)       // 当前页码
 
 /* 把查询参数解析成 API Query */
 function buildQuery() {
-  const { store_id, category_id, search, offset = 0 } = route.query
+  const { store_id, category_id, search, page = 1 } = route.query
+  const pageNum = Number(page)
+  currentPage.value = pageNum
+  
   return {
     store_id:   store_id ? Number(store_id) : undefined,
     category_id:category_id ? Number(category_id) : undefined,
     search:     search as string | undefined,
     limit:      limit.value,
-    offset:     Number(offset)
+    offset:     (pageNum - 1) * limit.value
   }
 }
 
@@ -46,7 +50,24 @@ onMounted(() => loadProducts())
 
 /* 处理筛选更新: 把筛选值写入 URL 查询参数即可 */
 function updateQuery(q: Record<string, any>) {
-  router.push({ path: '/explore', query: { ...route.query, ...q, offset: 0 } })
+  router.push({ path: '/explore', query: { ...route.query, ...q, page: 1 } })
+}
+
+/* 处理分页变化 */
+function handlePageChange(page: number) {
+  router.push({ 
+    path: '/explore', 
+    query: { ...route.query, page } 
+  })
+}
+
+/* 处理每页数量变化 */
+function handleSizeChange(size: number) {
+  limit.value = size
+  router.push({ 
+    path: '/explore', 
+    query: { ...route.query, page: 1 } 
+  })
 }
 </script>
 
@@ -62,7 +83,22 @@ function updateQuery(q: Record<string, any>) {
 
     <!-- 右侧列表 -->
     <el-col :xs="24" :sm="18" :md="19" :lg="20">
-      <ProductGrid :products="products" :loading="loading" />
+      <div class="product-content">
+        <ProductGrid :products="products" :loading="loading" />
+        
+        <!-- 分页组件 -->
+        <div class="pagination-wrapper" v-if="products.length > 0">
+          <el-pagination
+            v-model:current-page="currentPage"
+            v-model:page-size="limit"
+            :page-sizes="[10, 20, 30, 50]"
+            :total="total || products.length"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handlePageChange"
+          />
+        </div>
+      </div>
     </el-col>
   </el-row>
 </template>
@@ -71,4 +107,16 @@ function updateQuery(q: Record<string, any>) {
 .explore-page {
   padding: 24px;
 }
+
+.product-content {
+  display: flex;
+  flex-direction: column;
+  min-height: 400px;
+}
+
+.pagination-wrapper {
+  margin-top: 24px;
+  display: flex;
+  justify-content: center;
+}
 </style>

From fdae8a7c61ed7405bf747744365fb0582c99f929 Mon Sep 17 00:00:00 2001
From: Renyye <1457077123@qq.com>
Date: Mon, 26 May 2025 00:30:29 +0800
Subject: [PATCH 15/16] feat(frontend): logo & pic

---
 src/frontend/public/Websitelogo.svg           | 85 +++++++++++++++++++
 .../src/components/home/HeroCarousel.vue      | 64 +++++++-------
 .../src/components/layout/NaviBar.vue         |  2 +-
 .../src/views/DashBoard/Dashboard.vue         |  2 +-
 4 files changed, 122 insertions(+), 31 deletions(-)
 create mode 100644 src/frontend/public/Websitelogo.svg

diff --git a/src/frontend/public/Websitelogo.svg b/src/frontend/public/Websitelogo.svg
new file mode 100644
index 0000000..a3db780
--- /dev/null
+++ b/src/frontend/public/Websitelogo.svg
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 1012.5467 236.17332"
+   height="236.17332"
+   width="1012.5467"
+   xml:space="preserve"
+   id="svg2"
+   version="1.1"><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs6"><clipPath
+       id="clipPath14"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path12"
+         d="M 37.48,361.48 H 796.89 V 538.61 H 37.48 Z" /></clipPath><clipPath
+       id="clipPath24"
+       clipPathUnits="userSpaceOnUse"><path
+         style="clip-rule:evenodd"
+         id="path22"
+         d="M 0,0 H 3375 V 3375 H 0 Z" /></clipPath><clipPath
+       id="clipPath36"
+       clipPathUnits="userSpaceOnUse"><path
+         style="clip-rule:evenodd"
+         id="path34"
+         d="M 0,0 H 3375 V 3375 H 0 Z" /></clipPath><clipPath
+       id="clipPath48"
+       clipPathUnits="userSpaceOnUse"><path
+         style="clip-rule:evenodd"
+         id="path46"
+         d="m 164.39827,1175.4608 h 750 v 715.625 h -750 z" /></clipPath><clipPath
+       id="clipPath60"
+       clipPathUnits="userSpaceOnUse"><path
+         style="clip-rule:evenodd"
+         id="path58"
+         d="M 0,0 H 3375 V 3375 H 0 Z" /></clipPath></defs><g
+     clip-path="url(#clipPath14)"
+     transform="matrix(1.3333333,0,0,-1.3333333,-49.973333,718.14667)"
+     id="g10"><g
+       transform="matrix(0.23999999,0,0,-0.23999999,0,817.91998)"
+       id="g16"><g
+         id="g18"><g
+           clip-path="url(#clipPath24)"
+           id="g20"><g
+             transform="scale(3.125)"
+             id="g26"><path
+               id="path28"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+               d="M 0,0 H 1080 V 1080 H 0 Z" /></g></g></g><g
+         id="g30"><g
+           clip-path="url(#clipPath36)"
+           id="g32"><g
+             transform="scale(3.125)"
+             id="g38"><path
+               id="path40"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+               d="M 0,0 H 1080 V 1080 H 0 Z" /></g></g></g><g
+         id="g42"><g
+           clip-path="url(#clipPath48)"
+           id="g44"><g
+             transform="matrix(18.746338,0,0,18.746338,126.90559,1067.5851)"
+             id="g50"><path
+               id="path52"
+               style="fill:#00bf63;fill-opacity:1;fill-rule:nonzero;stroke:none"
+               d="m 14,36 c -2.21,0 -3.979999,1.790001 -3.979999,4 0,2.209999 1.77,4 3.979999,4 2.209999,0 4,-1.790001 4,-4 0,-2.209999 -1.790001,-4 -4,-4 z M 2,4 v 4 h 4 l 7.190001,15.17 -2.7,4.9 c -0.310001,0.58 -0.49,1.229999 -0.49,1.93 0,2.209999 1.79,4 4,4 H 38 V 30 H 14.85 c -0.279999,0 -0.5,-0.219999 -0.5,-0.5 0,-0.09 0.02,-0.17 0.06,-0.24 L 16.200001,26 H 31.1 c 1.499998,0 2.81,-0.83 3.499998,-2.059999 l 7.150002,-12.98 c 0.16,-0.28 0.25,-0.61 0.25,-0.96 0,-1.1099997 -0.900002,-2 -2,-2 H 10.43 l -1.8999993,-4 H 2.000001 Z m 32,32 c -2.209999,0 -3.98,1.790001 -3.98,4 0,2.209999 1.770001,4 3.98,4 2.209999,0 4,-1.790001 4,-4 0,-2.209999 -1.790001,-4 -4,-4 z" /></g></g></g><g
+         id="g54"><g
+           clip-path="url(#clipPath60)"
+           id="g56"><g
+             transform="matrix(3.125,0,0,3.125,1106.3037,1196.4659)"
+             id="g62"><text
+               id="text66"
+               style="font-variant:normal;font-weight:normal;font-size:154.6499939px;font-family:SourceHanSansSC;-inkscape-font-specification:SourceHanSansSC-Regular;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+               transform="translate(0.03125,175)"><tspan
+                 id="tspan64"
+                 y="0"
+                 x="0 92.32048 186.18736 279.8996 375.77679 466.70551 553.92285 626.29468">ShopEase</tspan></text>
+</g></g></g></g><path
+       id="path68"
+       style="fill:#000000;fill-opacity:0;fill-rule:nonzero;stroke:none"
+       d="M 39.45559,363.72696 H 219.43173 V 535.8094 H 39.45559 Z" /></g></svg>
\ No newline at end of file
diff --git a/src/frontend/src/components/home/HeroCarousel.vue b/src/frontend/src/components/home/HeroCarousel.vue
index 3dd8ef9..b091862 100644
--- a/src/frontend/src/components/home/HeroCarousel.vue
+++ b/src/frontend/src/components/home/HeroCarousel.vue
@@ -13,45 +13,50 @@ const rawSlides = [
 // 生成带 .src 的 slides
 const slides = rawSlides.map(s => ({
   ...s,
-  src: new URL(`../../assets/images/promo/${s.img}`, import.meta.url).href
+  src: `http://localhost:8000/src/assets/images/promo/${s.img}`
 }))
 
 /** 提取主色（或平均色）的函数（仅取左右两侧像素，不取上下） */
 function extractAverageColor(img: HTMLImageElement, edgeRatio = 0.05): string {
-  const w = img.naturalWidth
-  const h = img.naturalHeight
-  // 限制画布分辨率，避免内存过大
-  const cw = 200
-  const ch = Math.round((h / w) * cw)
+  try {
+    const w = img.naturalWidth
+    const h = img.naturalHeight
+    // 限制画布分辨率，避免内存过大
+    const cw = 200
+    const ch = Math.round((h / w) * cw)
 
-  const canvas = document.createElement('canvas')
-  canvas.width = cw
-  canvas.height = ch
-  const ctx = canvas.getContext('2d')!
-  ctx.drawImage(img, 0, 0, cw, ch)
+    const canvas = document.createElement('canvas')
+    canvas.width = cw
+    canvas.height = ch
+    const ctx = canvas.getContext('2d')!
+    ctx.drawImage(img, 0, 0, cw, ch)
 
-  const data = ctx.getImageData(0, 0, cw, ch).data
-  const edgeW = Math.max(1, Math.floor(cw * edgeRatio))
+    const data = ctx.getImageData(0, 0, cw, ch).data
+    const edgeW = Math.max(1, Math.floor(cw * edgeRatio))
 
-  let r = 0, g = 0, b = 0, count = 0
-  // 只累计左右两侧像素
-  for (let y = 0; y < ch; y++) {
-    for (let x = 0; x < cw; x++) {
-      if (x < edgeW || x >= cw - edgeW) {
-        const idx = (y * cw + x) * 4
-        r += data[idx]
-        g += data[idx + 1]
-        b += data[idx + 2]
-        count++
+    let r = 0, g = 0, b = 0, count = 0
+    // 只累计左右两侧像素
+    for (let y = 0; y < ch; y++) {
+      for (let x = 0; x < cw; x++) {
+        if (x < edgeW || x >= cw - edgeW) {
+          const idx = (y * cw + x) * 4
+          r += data[idx]
+          g += data[idx + 1]
+          b += data[idx + 2]
+          count++
+        }
       }
     }
-  }
 
-  if (count === 0) count = 1
-  r = Math.round(r / count)
-  g = Math.round(g / count)
-  b = Math.round(b / count)
-  return `rgb(${r}, ${g}, ${b})`
+    if (count === 0) count = 1
+    r = Math.round(r / count)
+    g = Math.round(g / count)
+    b = Math.round(b / count)
+    return `rgb(${r}, ${g}, ${b})`
+  } catch (error) {
+    console.warn('无法提取图片颜色，使用默认颜色', error)
+    return '#f5f5f5'
+  }
 }
 
 // 每张 slide 都保存一个 bgColor
@@ -81,6 +86,7 @@ function onImgLoad(e: Event, idx: number) {
               :src="s.src"
               class="banner-img"
               alt=""
+              crossorigin="anonymous"
               @load="e => onImgLoad(e, idx)"
             />
           </div>
diff --git a/src/frontend/src/components/layout/NaviBar.vue b/src/frontend/src/components/layout/NaviBar.vue
index e3edaad..0e5bc67 100644
--- a/src/frontend/src/components/layout/NaviBar.vue
+++ b/src/frontend/src/components/layout/NaviBar.vue
@@ -37,7 +37,7 @@ const handleUserClick = () => {
         @select="handleSelect">
         <!-- Logo 放左侧 -->
         <el-menu-item index="/" class="logo-item">
-          <img style="width: 170px" src="@/assets/images/logo.svg" alt="Logo" />
+          <img style="width: 170px" src="/Websitelogo.svg" alt="Logo" />
         </el-menu-item>
 
         <div class="menu-main">
diff --git a/src/frontend/src/views/DashBoard/Dashboard.vue b/src/frontend/src/views/DashBoard/Dashboard.vue
index 7b6b4c7..5cb5352 100644
--- a/src/frontend/src/views/DashBoard/Dashboard.vue
+++ b/src/frontend/src/views/DashBoard/Dashboard.vue
@@ -127,7 +127,7 @@ onMounted(initializeDashboard)
       <!-- LOGO -->
       <div class="logo flex items-center justify-center gap-2">
         <img src="https://element-plus-admin.cn/assets/logo-CRQ9AZN7.png" width="26" />
-        <span>ElementAdmin</span>
+        <span>Admin</span>
       </div>
 
       <!-- 用户信息 -->

From 00ecca52d11aaf1b7992537f696b9ecda22df818 Mon Sep 17 00:00:00 2001
From: Renyye <1457077123@qq.com>
Date: Mon, 26 May 2025 01:11:47 +0800
Subject: [PATCH 16/16] =?UTF-8?q?style(frontend):=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=87=E9=A2=98/logo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/index.html                       |  2 +-
 src/frontend/public/Websitelogo.svg           | 94 ++-----------------
 .../src/components/layout/NaviBar.vue         |  2 +-
 3 files changed, 11 insertions(+), 87 deletions(-)

diff --git a/src/frontend/index.html b/src/frontend/index.html
index b19040a..6c0b22a 100644
--- a/src/frontend/index.html
+++ b/src/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>ShopEase</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/frontend/public/Websitelogo.svg b/src/frontend/public/Websitelogo.svg
index a3db780..79278ae 100644
--- a/src/frontend/public/Websitelogo.svg
+++ b/src/frontend/public/Websitelogo.svg
@@ -1,85 +1,9 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   viewBox="0 0 1012.5467 236.17332"
-   height="236.17332"
-   width="1012.5467"
-   xml:space="preserve"
-   id="svg2"
-   version="1.1"><metadata
-     id="metadata8"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs6"><clipPath
-       id="clipPath14"
-       clipPathUnits="userSpaceOnUse"><path
-         id="path12"
-         d="M 37.48,361.48 H 796.89 V 538.61 H 37.48 Z" /></clipPath><clipPath
-       id="clipPath24"
-       clipPathUnits="userSpaceOnUse"><path
-         style="clip-rule:evenodd"
-         id="path22"
-         d="M 0,0 H 3375 V 3375 H 0 Z" /></clipPath><clipPath
-       id="clipPath36"
-       clipPathUnits="userSpaceOnUse"><path
-         style="clip-rule:evenodd"
-         id="path34"
-         d="M 0,0 H 3375 V 3375 H 0 Z" /></clipPath><clipPath
-       id="clipPath48"
-       clipPathUnits="userSpaceOnUse"><path
-         style="clip-rule:evenodd"
-         id="path46"
-         d="m 164.39827,1175.4608 h 750 v 715.625 h -750 z" /></clipPath><clipPath
-       id="clipPath60"
-       clipPathUnits="userSpaceOnUse"><path
-         style="clip-rule:evenodd"
-         id="path58"
-         d="M 0,0 H 3375 V 3375 H 0 Z" /></clipPath></defs><g
-     clip-path="url(#clipPath14)"
-     transform="matrix(1.3333333,0,0,-1.3333333,-49.973333,718.14667)"
-     id="g10"><g
-       transform="matrix(0.23999999,0,0,-0.23999999,0,817.91998)"
-       id="g16"><g
-         id="g18"><g
-           clip-path="url(#clipPath24)"
-           id="g20"><g
-             transform="scale(3.125)"
-             id="g26"><path
-               id="path28"
-               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
-               d="M 0,0 H 1080 V 1080 H 0 Z" /></g></g></g><g
-         id="g30"><g
-           clip-path="url(#clipPath36)"
-           id="g32"><g
-             transform="scale(3.125)"
-             id="g38"><path
-               id="path40"
-               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
-               d="M 0,0 H 1080 V 1080 H 0 Z" /></g></g></g><g
-         id="g42"><g
-           clip-path="url(#clipPath48)"
-           id="g44"><g
-             transform="matrix(18.746338,0,0,18.746338,126.90559,1067.5851)"
-             id="g50"><path
-               id="path52"
-               style="fill:#00bf63;fill-opacity:1;fill-rule:nonzero;stroke:none"
-               d="m 14,36 c -2.21,0 -3.979999,1.790001 -3.979999,4 0,2.209999 1.77,4 3.979999,4 2.209999,0 4,-1.790001 4,-4 0,-2.209999 -1.790001,-4 -4,-4 z M 2,4 v 4 h 4 l 7.190001,15.17 -2.7,4.9 c -0.310001,0.58 -0.49,1.229999 -0.49,1.93 0,2.209999 1.79,4 4,4 H 38 V 30 H 14.85 c -0.279999,0 -0.5,-0.219999 -0.5,-0.5 0,-0.09 0.02,-0.17 0.06,-0.24 L 16.200001,26 H 31.1 c 1.499998,0 2.81,-0.83 3.499998,-2.059999 l 7.150002,-12.98 c 0.16,-0.28 0.25,-0.61 0.25,-0.96 0,-1.1099997 -0.900002,-2 -2,-2 H 10.43 l -1.8999993,-4 H 2.000001 Z m 32,32 c -2.209999,0 -3.98,1.790001 -3.98,4 0,2.209999 1.770001,4 3.98,4 2.209999,0 4,-1.790001 4,-4 0,-2.209999 -1.790001,-4 -4,-4 z" /></g></g></g><g
-         id="g54"><g
-           clip-path="url(#clipPath60)"
-           id="g56"><g
-             transform="matrix(3.125,0,0,3.125,1106.3037,1196.4659)"
-             id="g62"><text
-               id="text66"
-               style="font-variant:normal;font-weight:normal;font-size:154.6499939px;font-family:SourceHanSansSC;-inkscape-font-specification:SourceHanSansSC-Regular;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
-               transform="translate(0.03125,175)"><tspan
-                 id="tspan64"
-                 y="0"
-                 x="0 92.32048 186.18736 279.8996 375.77679 466.70551 553.92285 626.29468">ShopEase</tspan></text>
-</g></g></g></g><path
-       id="path68"
-       style="fill:#000000;fill-opacity:0;fill-rule:nonzero;stroke:none"
-       d="M 39.45559,363.72696 H 219.43173 V 535.8094 H 39.45559 Z" /></g></svg>
\ No newline at end of file
+<svg width="500px" height="100px" viewBox="-4 12 89 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 19.5a1 1 0 1 0 0 -2 1 1 0 0 0 0 2m0 1a2 2 0 1 0 0 -4 2 2 0 0 0 0 4" fill="#000000"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 19.5a1 1 0 1 0 0 -2 1 1 0 0 0 0 2m0 1a2 2 0 1 0 0 -4 2 2 0 0 0 0 4" fill="#000000"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3 4a0.5 0.5 0 0 1 0.5 -0.5h2a0.5 0.5 0 0 1 0.476 0.348L9.37 14.5H17a0.5 0.5 0 0 1 0 1H9.004a0.5 0.5 0 0 1 -0.476 -0.348L5.135 4.5H3.5A0.5 0.5 0 0 1 3 4" fill="#28a745"/>
+  <path d="M8.5 13 6 6h13.337a0.5 0.5 0 0 1 0.48 0.637l-1.713 6a0.5 0.5 0 0 1 -0.481 0.363z" fill="#28a745"/>
+  <text x="28" y="16" font-family="PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif" font-size="12" fill="#000000">
+    ShopEase
+  </text>
+</svg>
diff --git a/src/frontend/src/components/layout/NaviBar.vue b/src/frontend/src/components/layout/NaviBar.vue
index 0e5bc67..fe37f9c 100644
--- a/src/frontend/src/components/layout/NaviBar.vue
+++ b/src/frontend/src/components/layout/NaviBar.vue
@@ -37,7 +37,7 @@ const handleUserClick = () => {
         @select="handleSelect">
         <!-- Logo 放左侧 -->
         <el-menu-item index="/" class="logo-item">
-          <img style="width: 170px" src="/Websitelogo.svg" alt="Logo" />
+          <img style="width: 200px; display: block; margin: 0 auto;" src="/Websitelogo.svg" alt="Logo" />
         </el-menu-item>
 
         <div class="menu-main">