diff --git a/public/image/logo.png b/public/image/logo.png
new file mode 100644
index 0000000..531d2f1
Binary files /dev/null and b/public/image/logo.png differ
diff --git a/src/components/Aside.vue b/src/components/Aside.vue
index 58d46f1..408a4f7 100644
--- a/src/components/Aside.vue
+++ b/src/components/Aside.vue
@@ -14,13 +14,12 @@
       </el-menu-item>
 
       <!-- 订单管理 -->
-      <el-sub-menu index="/merchant/orders">
+      <el-sub-menu index="/merchant/order">
         <template #title>
           <el-icon><Document /></el-icon>
           <span>订单管理</span>
         </template>
-        <el-menu-item index="/merchant/orders/pending">待办订单</el-menu-item>
-        <el-menu-item index="/merchant/orders/refund">退款管理</el-menu-item>
+        <el-menu-item index="/merchant/order/OrderManager">待办订单</el-menu-item>
       </el-sub-menu>
 
       <!-- 顾客评价 -->
@@ -49,18 +48,6 @@
         </template>
         <el-menu-item index="/merchant/stores/store-info">门店信息</el-menu-item>
       </el-sub-menu>
-
-      <!-- 财务管理 -->
-      <el-sub-menu index="/merchant/finance">
-        <template #title>
-          <el-icon><Coin /></el-icon>
-          <span>财务管理</span>
-        </template>
-        <el-menu-item index="/merchant/finance/daily-revenue">每日收益</el-menu-item>
-        <el-menu-item index="/merchant/finance/revenue-management">收支管理</el-menu-item>
-        <el-menu-item index="/merchant/finance/finance-download">财务下载</el-menu-item>
-        <el-menu-item index="/merchant/finance/account-collection">收款账号</el-menu-item>
-      </el-sub-menu>
     </el-menu>
     <div class="collapse-button-container">
       <el-button @click="toggleCollapse" type="text" style="width: 100%">
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 3f9aa11..1b371f7 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -3,11 +3,6 @@
     <div class="footer-content">
       <div class="footer-section">
         <div class="footer-logo">
-          <img
-            src="D:\code\Restaurant-management-system\uni-frontend\vue-beta\src\assets\image\logo.png"
-            alt="Logo"
-            class="logo"
-          />
           <span class="company-name">商户线上经营平台</span>
         </div>
         <p class="footer-description">为商户提供全方位的线上经营解决方案，助力商业成功</p>
@@ -16,10 +11,9 @@
       <div class="footer-section">
         <h4 class="footer-title">产品服务</h4>
         <ul class="footer-links">
-          <li><a href="#">订单管理</a></li>
-          <li><a href="#">商品管理</a></li>
-          <li><a href="#">门店管理</a></li>
-          <li><a href="#">财务管理</a></li>
+          <li><router-link to="/merchant/order/OrderManager">订单管理</router-link></li>
+          <li><router-link to="/merchant/products/list">商品管理</router-link></li>
+          <li><router-link to="/merchant/stores/store-info">门店管理</router-link></li>
         </ul>
       </div>
 
@@ -49,7 +43,7 @@
         </div>
         <div class="footer-meta">
           <span class="divider">|</span>
-          <span>当前用户: {{ currentUser }}</span>
+          <span>当前用户: {{ currentUser || '未登录' }}</span>
           <span class="divider">|</span>
           <span>最后更新: {{ currentTime }}</span>
         </div>
@@ -58,40 +52,140 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
 import { Phone, Message, Location } from '@element-plus/icons-vue'
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
 
-export default {
-  name: 'AppFooter',
-  components: {
-    Phone,
-    Message,
-    Location,
-  },
-  data() {
-    return {
-      currentUser: 'qq1244154570',
-      currentTime: '',
-    }
-  },
-  mounted() {
-    this.updateTime()
-    // 每分钟更新一次时间
-    setInterval(this.updateTime, 60000)
-  },
-  methods: {
-    updateTime() {
-      const now = new Date()
-      this.currentTime = now.toLocaleString('zh-CN', {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit',
-      })
-    },
-  },
+// 定义账户信息接口
+interface UserInfo {
+  accountId: number
+  accountName?: string
+  accountType?: string
+  accountPhone?: string
 }
+
+// 定义响应接口
+interface AccountResponse {
+  code: number
+  message: string
+  data: UserInfo
+}
+
+// StorageManager 类型定义
+interface StorageManager {
+  getUserInfo: () => UserInfo | null
+}
+
+// 假设 StorageManager 已在全局定义，这里提供本地实现
+const StorageManager: StorageManager = {
+  getUserInfo: (): UserInfo | null => {
+    const userInfoStr = localStorage.getItem('userInfo')
+    if (userInfoStr) {
+      try {
+        return JSON.parse(userInfoStr)
+      } catch (error) {
+        console.error('解析用户信息失败:', error)
+        return null
+      }
+    }
+    return null
+  }
+}
+
+// 获取账户ID
+const getAccountId = (): number | null => {
+  const userInfo = StorageManager.getUserInfo()
+  return userInfo ? userInfo.accountId : null
+}
+
+// 响应式数据
+const currentUser = ref<string>('加载中...')
+const currentTime = ref<string>('')
+let timeInterval: number | undefined
+
+// axios 配置
+const apiClient = axios.create({
+  baseURL: 'http://localhost:8080',
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+// 更新时间
+const updateTime = () => {
+  const now = new Date()
+  currentTime.value = now.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+// 获取用户信息
+const fetchUserInfo = async () => {
+  const accountId = getAccountId()
+  
+  if (!accountId) {
+    currentUser.value = '未登录'
+    return
+  }
+
+  try {
+    // 根据API文档，使用分店管理接口获取账户信息
+    // 注意：根据实体类设计，Account表包含账户信息
+    const response = await apiClient.get<AccountResponse>(`/branch/branch/by-boss/${accountId}`)
+    
+    if (response.data.code === 200) {
+      // 首先尝试从本地存储获取用户名
+      const localUserInfo = StorageManager.getUserInfo()
+      if (localUserInfo && localUserInfo.accountName) {
+        currentUser.value = localUserInfo.accountName
+      } else {
+        // 如果本地没有，尝试从响应中获取
+        // 注意：这个API可能返回的是分店列表，需要特殊处理
+        currentUser.value = `用户ID: ${accountId}`
+      }
+    } else {
+      // 如果分店接口失败，尝试直接显示账户ID
+      currentUser.value = `用户ID: ${accountId}`
+    }
+  } catch (error) {
+    console.error('获取用户信息失败:', error)
+    
+    // 尝试从本地存储获取用户信息
+    const localUserInfo = StorageManager.getUserInfo()
+    if (localUserInfo && localUserInfo.accountName) {
+      currentUser.value = localUserInfo.accountName
+    } else if (localUserInfo) {
+      currentUser.value = `用户ID: ${accountId}`
+    } else {
+      currentUser.value = '获取失败'
+    }
+  }
+}
+
+// 组件挂载时执行
+onMounted(async () => {
+  // 更新时间
+  updateTime()
+  // 每分钟更新一次时间
+  timeInterval = window.setInterval(updateTime, 60000)
+  
+  // 获取用户信息
+  await fetchUserInfo()
+})
+
+// 组件卸载时清理
+onUnmounted(() => {
+  if (timeInterval) {
+    clearInterval(timeInterval)
+  }
+})
 </script>
 
 <style scoped>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 500cbef..66f16e2 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,12 +1,161 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import axios from 'axios'
+import { ArrowDown, Bell } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+
+// 配置axios基础URL
+axios.defaults.baseURL = 'http://localhost:8080'
+
+// 类型定义
+interface UserInfo {
+  accountId: number
+  accountName: string
+  accountPassword?: string
+  accountPhone?: string | null
+  accountType?: string
+  accountImg?: string | null
+  accountGender?: string
+  accountTag?: string | null
+  salary?: number | null
+  isDeleted?: number
+  deletedAt?: string | null
+  createdAt?: string
+  updatedAt?: string
+}
+
+// StorageManager 工具类
+class StorageManager {
+  static getUserInfo(): UserInfo | null {
+    const userInfoStr = localStorage.getItem('userInfo')
+    if (userInfoStr) {
+      try {
+        return JSON.parse(userInfoStr)
+      } catch {
+        return null
+      }
+    }
+    return null
+  }
+
+  static setUserInfo(userInfo: UserInfo): void {
+    localStorage.setItem('userInfo', JSON.stringify(userInfo))
+  }
+
+  static clearUserInfo(): void {
+    localStorage.removeItem('userInfo')
+    localStorage.removeItem('token')
+  }
+
+  static getToken(): string | null {
+    return localStorage.getItem('token')
+  }
+}
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+// 响应式数据
+const user = ref({ name: '加载中...' })
+const userAvatar = ref<string>('')
+const loading = ref(false)
+
+// emit定义
+const emit = defineEmits(['collapse-change', 'button-click', 'input-change'])
+
+// 获取本地存储的accountId
+const getAccountId = (): number | null => {
+  const userInfo = StorageManager.getUserInfo()
+  return userInfo ? userInfo.accountId : null
+}
+
+// 获取用户信息
+const fetchUserInfo = async () => {
+  const accountId = getAccountId()
+
+  if (!accountId) {
+    user.value.name = '未登录'
+    return
+  }
+
+  loading.value = true
+
+  try {
+    // 获取token
+    const token = StorageManager.getToken()
+
+    // 调用API
+    const response = await axios.get(`/user/customers/${accountId}`, {
+      headers: {
+        'Authorization': token ? `Bearer ${token}` : ''
+      }
+    })
+
+    // 直接处理返回的用户数据
+    if (response.data && response.data.accountId) {
+      const userData: UserInfo = response.data
+      user.value.name = userData.accountName || '用户'
+      userAvatar.value = userData.accountImg || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
+
+      // 更新本地存储的用户信息（不包含密码）
+      const { accountPassword, ...safeUserData } = userData
+      StorageManager.setUserInfo(safeUserData as UserInfo)
+    } else {
+      console.error('获取用户信息失败: 数据格式错误')
+      user.value.name = '获取失败'
+      ElMessage.error('获取用户信息失败')
+    }
+  } catch (error: any) {
+    console.error('获取用户信息出错:', error)
+    user.value.name = '获取失败'
+
+    // 根据错误状态码显示不同的错误信息
+    if (error.response?.status === 401) {
+      ElMessage.error('登录已过期，请重新登录')
+      // 清除本地存储并跳转到登录页
+      StorageManager.clearUserInfo()
+      authStore.logout()
+      router.push('/login')
+    } else if (error.response?.status === 404) {
+      ElMessage.error('用户不存在')
+    } else {
+      ElMessage.error('网络错误，请稍后重试')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// 处理下拉菜单命令
+const handleDropdownCommand = (command: string) => {
+  if (command === 'logout') {
+    // 清除本地用户数据和token
+    StorageManager.clearUserInfo()
+    authStore.logout()
+    // 返回登录界面
+    router.push('/login')
+    ElMessage.success('退出登录成功')
+  }
+}
+
+// 处理通知点击
+const handleClick = () => {
+  // 派发事件，不传参数
+  emit('button-click')
+}
+
+// 组件挂载时获取用户信息
+onMounted(() => {
+  fetchUserInfo()
+})
+</script>
+
 <template>
   <el-row>
     <el-col :span="8">
       <div class="menu-header">
-        <img
-          src="D:\code\Restaurant-management-system\uni-frontend\vue-beta\src\assets\image\logo.png"
-          alt="Logo"
-          class="logo"
-        />
         <span class="divider">|</span>
         <span class="title">商户线上经营平台</span>
       </div>
@@ -14,60 +163,23 @@
     <el-col :span="8"> </el-col>
     <el-col :span="8">
       <div class="user-section">
-        <el-avatar
-          :size="40"
-          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
-          alt="用户头像"
-        >
+        <el-avatar :size="40" :src="userAvatar" alt="用户头像">
         </el-avatar>
         <el-dropdown @command="handleDropdownCommand">
-          <span class="user"
-            >{{ user.name }}<el-icon class="el-icon--right"><arrow-down /></el-icon
-          ></span>
+          <span class="user" v-loading="loading">
+            {{ user.name }}
+            <el-icon class="el-icon--right"><arrow-down /></el-icon>
+          </span>
           <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item command="a">账号管理</el-dropdown-item>
-              <el-dropdown-item command="b">资质认证</el-dropdown-item>
-              <el-dropdown-item command="logout">退出账号</el-dropdown-item>
-            </el-dropdown-menu>
+            <el-dropdown-item divided command="logout">退出账号</el-dropdown-item>
           </template>
         </el-dropdown>
         <span class="divider">|</span>
-        <el-icon @click="handleClick" class="notification-icon" :size="20">
-          <Bell />
-        </el-icon>
       </div>
     </el-col>
   </el-row>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useAuthStore } from '@/stores/auth'
-
-const router = useRouter()
-const authStore = useAuthStore()
-const user = ref({ name: 'admin' })
-
-const emit = defineEmits(['collapse-change', 'button-click', 'input-change'])
-
-// 处理下拉菜单命令
-const handleDropdownCommand = (command: string) => {
-  if (command === 'logout') {
-    // 清除本地用户数据和token
-    authStore.logout()
-    // 返回登录界面
-    router.push('/login')
-  }
-}
-
-const handleClick = () => {
-  // 派发事件，不传参数
-  emit('button-click')
-}
-</script>
-
 <style scoped>
 .menu-header,
 .user-section {
diff --git a/src/components/Map.vue b/src/components/Map.vue
index b9116c7..71fe5d6 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -50,10 +50,12 @@ defineOptions({
 
 // Props 定义
 interface Props {
-  province: string
-  city: string
-  district: string
-  address: string
+  province?: string
+  city?: string
+  district?: string
+  address?: string
+  longitude?: number | null
+  latitude?: number | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -61,11 +63,20 @@ const props = withDefaults(defineProps<Props>(), {
   city: '',
   district: '',
   address: '',
+  longitude: null,
+  latitude: null,
 })
 
 // Emits 定义
 const emit = defineEmits<{
-  'update-address': [address: string]
+  'update-location': [data: {
+    address: string
+    longitude: number
+    latitude: number
+    province?: string
+    city?: string
+    district?: string
+  }]
 }>()
 
 // 响应式数据
@@ -76,7 +87,7 @@ const marker = ref<any>(null)
 const geocoder = ref<any>(null)
 const placeSearch = ref<any>(null)
 const nearbyPOIs = ref<any[]>([])
-const mapInitialized = ref(false) // 新增：标记地图是否已初始化
+const mapInitialized = ref(false)
 
 // POI 类型定义
 interface POIItem {
@@ -92,7 +103,7 @@ const AMAP_KEY = import.meta.env.VITE_AMAP_API_KEY || 'your-amap-api-key'
 // 初始化地图
 const initMap = async () => {
   try {
-    if (mapInitialized.value) return // 如果已初始化，则不重复执行
+    if (mapInitialized.value) return
 
     mapLoading.value = true
 
@@ -123,32 +134,90 @@ const initMap = async () => {
       pageIndex: 1,
     })
 
-    mapInitialized.value = true // 标记地图已初始化
+    // 添加地图点击事件
+    map.value.on('click', handleMapClick)
+
+    mapInitialized.value = true
     mapLoading.value = false
 
-    // 如果有地址信息，立即进行地理编码
-    const fullAddress = `${props.province}${props.city}${props.district}${props.address}`
-    if (fullAddress.trim()) {
-      await geocodeAddress()
-    }
+    // 初始化完成后，根据传入的数据定位
+    await initialLocate()
   } catch (error) {
     mapLoading.value = false
+    ElMessage.error('地图加载失败，请刷新重试')
   }
 }
 
-// 地理编码 - 将地址转换为坐标
-const geocodeAddress = async () => {
-  if (!geocoder.value) return
+// 初始定位
+const initialLocate = async () => {
+  // 优先使用经纬度定位
+  if (props.longitude && props.latitude) {
+    await locateByCoordinates(props.longitude, props.latitude)
+  } 
+  // 其次使用地址定位
+  else if (props.address) {
+    await geocodeAddress(props.address)
+  }
+}
 
-  const fullAddress = `${props.province}${props.city}${props.district}${props.address}`
-  if (!fullAddress.trim()) return
+// 根据经纬度定位
+const locateByCoordinates = async (lng: number, lat: number) => {
+  if (!map.value || !geocoder.value) return
 
   try {
-    geocoder.value.getLocation(fullAddress, (status: string, result: any) => {
+    const lnglat = [lng, lat]
+    
+    // 更新地图位置
+    updateMapLocation(lnglat)
+    
+    // 反向地理编码获取地址信息
+    geocoder.value.getAddress(lnglat, (status: string, result: any) => {
+      if (status === 'complete' && result.regeocode) {
+        const regeocode = result.regeocode
+        const addressComponent = regeocode.addressComponent || {}
+        
+        emit('update-location', {
+          address: regeocode.formattedAddress,
+          longitude: lng,
+          latitude: lat,
+          province: addressComponent.province,
+          city: addressComponent.city,
+          district: addressComponent.district,
+        })
+      }
+    })
+    
+    // 搜索附近POI
+    searchNearbyPOI()
+  } catch (error) {
+    console.error('经纬度定位失败:', error)
+    ElMessage.error('定位失败')
+  }
+}
+
+// 地理编码 - 将地址转换为坐标（暴露给父组件调用）
+const geocodeAddress = async (address: string) => {
+  if (!geocoder.value || !address) return
+
+  try {
+    geocoder.value.getLocation(address, (status: string, result: any) => {
       if (status === 'complete' && result.geocodes && result.geocodes.length > 0) {
-        const location = result.geocodes[0].location
+        const geocode = result.geocodes[0]
+        const location = geocode.location
+        const addressComponent = geocode.addressComponent || {}
+        
         updateMapLocation(location)
         searchNearbyPOI()
+        
+        // 发送更新事件
+        emit('update-location', {
+          address: geocode.formattedAddress || address,
+          longitude: location.lng,
+          latitude: location.lat,
+          province: addressComponent.province,
+          city: addressComponent.city,
+          district: addressComponent.district,
+        })
       } else {
         ElMessage.warning('地址解析失败，请检查地址信息')
       }
@@ -159,6 +228,15 @@ const geocodeAddress = async () => {
   }
 }
 
+// 处理地图点击事件
+const handleMapClick = (e: any) => {
+  const lng = e.lnglat.getLng()
+  const lat = e.lnglat.getLat()
+  
+  // 定位到点击位置
+  locateByCoordinates(lng, lat)
+}
+
 // 更新地图位置
 const updateMapLocation = (location: any) => {
   if (!map.value) return
@@ -176,7 +254,7 @@ const updateMapLocation = (location: any) => {
   const AMap = (window as any).AMap
   marker.value = new AMap.Marker({
     position: location,
-    title: '分店位置',
+    title: '当前位置',
     icon: new AMap.Icon({
       size: new AMap.Size(30, 40),
       image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
@@ -210,8 +288,6 @@ const searchNearbyPOI = async () => {
             distance: Math.round(poi.distance || 0),
             location: [poi.location.lng, poi.location.lat],
           }))
-        } else {
-          ElMessage.warning('附近地点搜索失败')
         }
       },
     )
@@ -223,72 +299,45 @@ const searchNearbyPOI = async () => {
 
 // 选择POI地点
 const selectPOI = (poi: POIItem) => {
-  // 更新详细地址
-  emit('update-address', poi.address)
-
-  // 在地图上高亮选中的POI
-  const AMap = (window as any).AMap
-  const poiMarker = new AMap.Marker({
-    position: poi.location,
-    title: poi.name,
-    icon: new AMap.Icon({
-      size: new AMap.Size(25, 35),
-      image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
-    }),
-  })
-
-  map.value.add(poiMarker)
-  map.value.setCenter(poi.location)
-
+  // 定位到选中的POI
+  locateByCoordinates(poi.location[0], poi.location[1])
+  
   ElMessage.success(`已选择: ${poi.name}`)
 }
 
-// 这个 watch 被移动到了组件顶部
-
-// 监听地址属性变化，当有有效地址时再初始化或更新地图
+// 监听属性变化
 watch(
-  [() => props.province, () => props.city, () => props.district, () => props.address],
-  (
-    [newProvince, newCity, newDistrict, newAddress],
-    [oldProvince, oldCity, oldDistrict, oldAddress],
-  ) => {
-    // 检查是否有任何地址字段发生变化
-    const hasChanged =
-      newProvince !== oldProvince ||
-      newCity !== oldCity ||
-      newDistrict !== oldDistrict ||
-      newAddress !== oldAddress
-
-    // 检查是否有至少一个地址字段有值
-    const hasAddressData = newProvince || newCity || newDistrict || newAddress
-
-    // 如果地图还没初始化且有地址数据，则初始化地图
-    if (!mapInitialized.value && hasAddressData) {
-      initMap()
-    }
-    // 如果地图已初始化且地址数据发生变化，则更新地图位置
-    else if (mapInitialized.value && hasChanged && hasAddressData) {
-      nextTick(() => {
-        geocodeAddress()
-      })
+  [() => props.longitude, () => props.latitude],
+  ([newLng, newLat]) => {
+    if (mapInitialized.value && newLng && newLat) {
+      locateByCoordinates(newLng, newLat)
     }
   },
-  { immediate: true, deep: true }, // 立即执行一次监听器
 )
 
+watch(
+  () => props.address,
+  (newAddress) => {
+    if (mapInitialized.value && newAddress && !props.longitude && !props.latitude) {
+      geocodeAddress(newAddress)
+    }
+  },
+)
+
+// 暴露方法给父组件
+defineExpose({
+  geocodeAddress,
+  locateByCoordinates,
+})
+
 // 组件挂载
 onMounted(() => {
-  // 不再立即初始化地图，而是等待有效的地址数据
-  // 仅当组件挂载后没有收到有效地址数据时，才初始化一个默认地图
-  setTimeout(() => {
-    if (!mapInitialized.value) {
-      initMap()
-    }
-  }, 500) // 给予一些延迟以等待可能的地址数据
+  initMap()
 })
 </script>
 
 <style scoped>
+/* 样式保持不变 */
 .map-container {
   width: 100%;
   margin-top: 20px;
@@ -303,6 +352,7 @@ onMounted(() => {
   background: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   transition: box-shadow 0.3s ease;
+  height: 400px; /* 固定高度 */
 }
 
 .map-wrapper:hover {
@@ -311,12 +361,13 @@ onMounted(() => {
 
 .map-area {
   flex: 1;
-  height: auto;
+  height: 100%;
   min-width: 480px;
   position: relative;
 }
 
 #map-container {
+  height: 100%;
   border-radius: 12px 0 0 12px;
 }
 
@@ -480,6 +531,7 @@ onMounted(() => {
   .map-wrapper {
     flex-direction: column;
     border-radius: 8px;
+    height: auto;
   }
 
   .map-area {
diff --git a/src/router/auth.ts b/src/router/auth.ts
index a2828eb..683a295 100644
--- a/src/router/auth.ts
+++ b/src/router/auth.ts
@@ -5,6 +5,7 @@ import type { RouteRecordRaw } from 'vue-router'
 const LoginPage = () => import('@/views/login/LoginPage.vue')
 const RegisterPage = () => import('@/views/login/RegisterPage.vue')
 const ChangePasswordPage = () => import('@/views/login/ChangePasswordPage.vue')
+const accountmanagement = () => import('@/views/login/account-management.vue')
 
 // 认证相关路由配置
 export const authRoutes: RouteRecordRaw[] = [
@@ -37,7 +38,18 @@ export const authRoutes: RouteRecordRaw[] = [
       requiresAuth: true,
       allowedRoles: ['admin', 'manager', 'customer'],
     },
+  },  
+  {
+    path: '/account-management',
+    name: 'accountmanagement',
+    component: accountmanagement,
+    meta: {
+      title: '账号管理',
+      requiresAuth: true,
+      allowedRoles: ['admin', 'manager', 'customer'],
+    },
   },
+
 ]
 
 // 创建认证路由实例
diff --git a/src/router/merchant.ts b/src/router/merchant.ts
index c11628e..13d404f 100644
--- a/src/router/merchant.ts
+++ b/src/router/merchant.ts
@@ -16,29 +16,6 @@ const merchantRouter = createRouter({
           meta: { title: '首页', icon: 'HomeFilled' },
         },
 
-        // 订单管理模块
-        {
-          path: 'orders',
-          name: 'Orders',
-          component: () => import('@/views/merchant/Orders/index.vue'),
-          meta: { title: '订单管理', icon: 'Document' },
-          redirect: 'pending', // 当访问 /merchant/orders 时，重定向到其子路由 'pending'
-          children: [
-            {
-              path: 'pending',
-              name: 'OrdersPending',
-              component: () => import('@/views/merchant/Orders/Pending.vue'),
-              meta: { title: '待办订单' },
-            },
-            {
-              path: 'refund',
-              name: 'OrdersRefund',
-              component: () => import('@/views/merchant/Orders/Refund.vue'),
-              meta: { title: '退款管理' },
-            },
-          ],
-        },
-
         // 顾客评价模块
         {
           path: 'reviews',
@@ -52,13 +29,7 @@ const merchantRouter = createRouter({
               name: 'StoreReviews',
               component: () => import('@/views/merchant/Reviews/StoreReviews.vue'),
               meta: { title: '门店评价' },
-            },
-            {
-              path: 'reply-management',
-              name: 'ReviewReplyManagement',
-              component: () => import('@/views/merchant/Reviews/ReplyManagement.vue'),
-              meta: { title: '评价回复' },
-            },
+            }
           ],
         },
 
@@ -96,38 +67,20 @@ const merchantRouter = createRouter({
           ],
         },
 
-        // 财务管理模块
+        // 订单管理模块
         {
-          path: 'finance',
-          name: 'Finance',
-          component: () => import('@/views/merchant/Finance/index.vue'),
-          meta: { title: '财务管理', icon: 'Coin' },
-          redirect: 'daily-revenue',
+          path: 'order',
+          name: 'order',
+          component: () => import('@/views/merchant/order/index.vue'),
+          meta: { title: '订单管理', icon: 'Document' },
+          redirect: 'pending', // 当访问 /merchant/order 时，重定向到其子路由 'pending'
           children: [
             {
-              path: 'daily-revenue',
-              name: 'DailyRevenue',
-              component: () => import('@/views/merchant/Finance/DailyRevenue.vue'),
-              meta: { title: '每日收益' },
-            },
-            {
-              path: 'revenue-management',
-              name: 'RevenueManagement',
-              component: () => import('@/views/merchant/Finance/RevenueManagement.vue'),
-              meta: { title: '收支管理' },
-            },
-            {
-              path: 'finance-download',
-              name: 'FinanceDownload',
-              component: () => import('@/views/merchant/Finance/FinanceDownload.vue'),
-              meta: { title: '财务下载' },
-            },
-            {
-              path: 'account-collection',
-              name: 'AccountCollection',
-              component: () => import('@/views/merchant/Finance/AccountCollection.vue'),
-              meta: { title: '收款账号' },
-            },
+              path: 'OrderManager',
+              name: 'OrderManager',
+              component: () => import('@/views/merchant/order/OrderManager.vue'),
+              meta: { title: '待办订单' },
+            }
           ],
         },
       ],
diff --git a/src/views/merchant/Dashboard/index.vue b/src/views/merchant/Dashboard/index.vue
index baef9b8..d0efbe9 100644
--- a/src/views/merchant/Dashboard/index.vue
+++ b/src/views/merchant/Dashboard/index.vue
@@ -1,15 +1,729 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue'
+import { ElMessage, ElCard, ElRow, ElCol, ElStatistic, ElDatePicker, ElDivider } from 'element-plus'
+import axios from 'axios'
+import * as echarts from 'echarts'
+import { Calendar, TrendCharts, DataAnalysis, Shop } from '@element-plus/icons-vue'
+
+// API基础路径
+const baseURL = 'http://localhost:8080'
+
+// 定义接口类型
+interface DailyRevenue {
+  date: string
+  revenue: number
+  orderCount: number
+}
+
+interface StoreStatistics {
+  branchId: number
+  branchName: string
+  dailyRevenues: DailyRevenue[]
+  totalRevenue: number
+  averageRating: number
+  totalComments: number
+}
+
+interface ApiResponse<T> {
+  code: number
+  msg: string
+  data: T
+}
+
+// 获取本地存储的accountId
+const getAccountId = (): number | null => {
+  const userInfoStr = localStorage.getItem('userInfo')
+  if (userInfoStr) {
+    try {
+      const userInfo = JSON.parse(userInfoStr)
+      return userInfo.accountId || null
+    } catch (e) {
+      return null
+    }
+  }
+  return null
+}
+
+// 响应式数据
+const loading = ref(false)
+const branchId = ref<number>(2) // TODO: 这里需要根据实际情况获取分店ID
+const statistics = ref<StoreStatistics | null>(null)
+const dateRange = ref<Date[]>([])
+const revenueChart = ref<HTMLElement>()
+
+// 默认显示最近7天
+const defaultDateRange = () => {
+  const end = new Date()
+  const start = new Date()
+  start.setDate(start.getDate() - 6)
+  return [start, end]
+}
+
+// 计算属性
+const totalOrderCount = computed(() => {
+  if (!statistics.value) return 0
+  return statistics.value.dailyRevenues.reduce((sum, item) => sum + item.orderCount, 0)
+})
+
+const averageOrderValue = computed(() => {
+  if (!statistics.value || totalOrderCount.value === 0) return 0
+  return (statistics.value.totalRevenue / totalOrderCount.value).toFixed(2)
+})
+
+// 获取店铺统计数据
+const fetchStoreStatistics = async () => {
+  loading.value = true
+  try {
+    const accountId = getAccountId()
+    if (!accountId) {
+      ElMessage.error('请先登录')
+      return
+    }
+
+    const response = await axios.get<ApiResponse<StoreStatistics>>(
+      `${baseURL}/branch/statistics/store/${branchId.value}`,
+      {
+        headers: {
+          'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
+        }
+      }
+    )
+
+    if (response.data.code === 200) {
+      statistics.value = response.data.data
+      // 更新图表
+      updateChart()
+    } else {
+      ElMessage.error(response.data.msg || '获取数据失败')
+    }
+  } catch (error) {
+    console.error('获取统计数据失败:', error)
+    ElMessage.error('获取统计数据失败，请稍后重试')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 更新图表
+const updateChart = () => {
+  if (!statistics.value || !revenueChart.value) return
+
+  const myChart = echarts.init(revenueChart.value)
+  
+  const dates = statistics.value.dailyRevenues.map(item => {
+    const date = new Date(item.date)
+    return `${date.getMonth() + 1}/${date.getDate()}`
+  })
+  
+  const revenues = statistics.value.dailyRevenues.map(item => item.revenue)
+  const orderCounts = statistics.value.dailyRevenues.map(item => item.orderCount)
+
+  const option = {
+    title: {
+      text: '营业数据趋势',
+      left: 'center',
+      textStyle: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: '#2563eb'
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#2563eb'
+        }
+      },
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      borderColor: '#e5e7eb',
+      borderWidth: 1,
+      borderRadius: 12,
+      textStyle: {
+        color: '#374151'
+      }
+    },
+    legend: {
+      data: ['营业额', '订单数'],
+      top: 35,
+      itemGap: 20,
+      textStyle: {
+        color: '#6b7280',
+        fontSize: 14
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: 80,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: dates,
+      axisLine: {
+        lineStyle: {
+          color: '#e5e7eb'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#9ca3af'
+      }
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: '营业额(元)',
+        position: 'left',
+        axisLabel: {
+          formatter: '¥{value}',
+          color: '#9ca3af'
+        },
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#f3f4f6',
+            type: 'dashed'
+          }
+        }
+      },
+      {
+        type: 'value',
+        name: '订单数',
+        position: 'right',
+        axisLabel: {
+          color: '#9ca3af'
+        },
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        }
+      }
+    ],
+    series: [
+      {
+        name: '营业额',
+        type: 'line',
+        smooth: true,
+        data: revenues,
+        itemStyle: {
+          color: '#2563eb'
+        },
+        lineStyle: {
+          width: 3
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(37, 99, 235, 0.3)' },
+            { offset: 1, color: 'rgba(37, 99, 235, 0)' }
+          ])
+        }
+      },
+      {
+        name: '订单数',
+        type: 'line',
+        smooth: true,
+        yAxisIndex: 1,
+        data: orderCounts,
+        itemStyle: {
+          color: '#1d4ed8'
+        },
+        lineStyle: {
+          width: 3
+        }
+      }
+    ]
+  }
+
+  myChart.setOption(option)
+  
+  // 响应式调整
+  window.addEventListener('resize', () => {
+    myChart.resize()
+  })
+}
+
+// 日期范围变化处理
+const handleDateChange = (value: Date[]) => {
+  if (value && value.length === 2) {
+    // TODO: 根据日期范围重新请求数据
+    fetchStoreStatistics()
+  }
+}
+
+// 页面加载时初始化
+onMounted(() => {
+  dateRange.value = defaultDateRange()
+  fetchStoreStatistics()
+})
+</script>
+
 <template>
-  <div class="dashboard">
-    <h1>首页</h1>
+  <div class="dashboard-container" v-loading="loading">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <div class="header-content">
+        <h1 class="page-title">商户主页</h1>
+        <p class="page-subtitle">实时监控您的业务数据和运营状况</p>
+      </div>
+      <div class="header-extra">
+      </div>
+    </div>
+
+    <!-- 统计卡片 -->
+    <el-row :gutter="24" class="stat-cards">
+      <el-col :xs="24" :sm="12" :lg="6">
+        <el-card shadow="never" class="stat-card revenue-card">
+          <el-statistic :value="statistics?.totalRevenue || 0" :precision="2">
+            <template #title>
+              <div class="stat-title">
+                <div class="stat-icon revenue-icon">
+                  <el-icon><TrendCharts /></el-icon>
+                </div>
+                <span>总营业额</span>
+              </div>
+            </template>
+            <template #prefix>¥</template>
+          </el-statistic>
+        </el-card>
+      </el-col>
+      
+      <el-col :xs="24" :sm="12" :lg="6">
+        <el-card shadow="never" class="stat-card orders-card">
+          <el-statistic :value="totalOrderCount">
+            <template #title>
+              <div class="stat-title">
+                <div class="stat-icon orders-icon">
+                  <el-icon><Calendar /></el-icon>
+                </div>
+                <span>总订单数</span>
+              </div>
+            </template>
+            <template #suffix>单</template>
+          </el-statistic>
+        </el-card>
+      </el-col>
+      
+      <el-col :xs="24" :sm="12" :lg="6">
+        <el-card shadow="never" class="stat-card rating-card">
+          <el-statistic :value="statistics?.averageRating || 0" :precision="1">
+            <template #title>
+              <div class="stat-title">
+                <div class="stat-icon rating-icon">
+                  <el-icon><DataAnalysis /></el-icon>
+                </div>
+                <span>平均评分</span>
+              </div>
+            </template>
+            <template #suffix>分</template>
+          </el-statistic>
+        </el-card>
+      </el-col>
+      
+      <el-col :xs="24" :sm="12" :lg="6">
+        <el-card shadow="never" class="stat-card value-card">
+          <el-statistic :value="Number(averageOrderValue)">
+            <template #title>
+              <div class="stat-title">
+                <div class="stat-icon value-icon">
+                  <el-icon><Shop /></el-icon>
+                </div>
+                <span>客单价</span>
+              </div>
+            </template>
+            <template #prefix>¥</template>
+          </el-statistic>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 店铺信息 -->
+    <el-card class="store-info modern-card" shadow="never" v-if="statistics">
+      <template #header>
+        <div class="card-header">
+          <div class="header-icon">
+            <el-icon><Shop /></el-icon>
+          </div>
+          <span>店铺信息</span>
+        </div>
+      </template>
+      <div class="info-content">
+        <div class="info-item">
+          <span class="label">店铺名称</span>
+          <span class="value">{{ statistics.branchName }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">评论总数</span>
+          <span class="value">{{ statistics.totalComments }} 条</span>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 图表区域 -->
+    <el-card class="chart-container modern-card" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <div class="header-icon">
+            <el-icon><TrendCharts /></el-icon>
+          </div>
+          <span>数据趋势</span>
+        </div>
+      </template>
+      <div ref="revenueChart" class="revenue-chart"></div>
+    </el-card>
   </div>
 </template>
 
-<script setup lang="ts">
-// 首页
-</script>
-
 <style scoped>
-.dashboard {
-  padding: 0px;
+/* 全局容器样式 - 改为白色背景 */
+.dashboard-container {
+  padding: 32px;
+  background: #ffffff;
+  min-height: 100vh;
+  position: relative;
 }
-</style>
+
+.dashboard-container::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    radial-gradient(circle at 20% 50%, rgba(37, 99, 235, 0.03) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.02) 0%, transparent 50%),
+    radial-gradient(circle at 40% 80%, rgba(37, 99, 235, 0.015) 0%, transparent 50%);
+  pointer-events: none;
+  z-index: -1;
+}
+
+/* 页面头部 */
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 32px;
+  position: relative;
+  z-index: 1;
+  padding: 24px;
+  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+  border-radius: 20px;
+  color: white;
+  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.15);
+}
+
+.header-content {
+  flex: 1;
+}
+
+.page-title {
+  margin: 0 0 8px 0;
+  font-size: 32px;
+  font-weight: 700;
+  color: white;
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  margin: 0;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.header-extra {
+  margin-left: 24px;
+}
+
+/* 现代化日期选择器 */
+.modern-date-picker :deep(.el-input__wrapper) {
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+}
+
+.modern-date-picker :deep(.el-input__wrapper):hover {
+  background: rgba(255, 255, 255, 1);
+  border-color: rgba(255, 255, 255, 0.4);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+
+/* 统计卡片网格 */
+.stat-cards {
+  margin-bottom: 32px;
+}
+
+/* 统计卡片样式 */
+.stat-card {
+  height: 100%;
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  background: white;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, #2563eb, #1d4ed8);
+  transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(37, 99, 235, 0.15);
+  border-color: #2563eb;
+}
+
+.stat-card:hover::before {
+  height: 6px;
+}
+
+/* 不同卡片的蓝色渐变 */
+.revenue-card::before {
+  background: linear-gradient(90deg, #2563eb, #3b82f6);
+}
+
+.orders-card::before {
+  background: linear-gradient(90deg, #1d4ed8, #2563eb);
+}
+
+.rating-card::before {
+  background: linear-gradient(90deg, #1e40af, #1d4ed8);
+}
+
+.value-card::before {
+  background: linear-gradient(90deg, #1e3a8a, #1e40af);
+}
+
+/* 统计标题样式 */
+.stat-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #6b7280;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.stat-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: white;
+  transition: all 0.3s ease;
+}
+
+.revenue-icon {
+  background: linear-gradient(135deg, #2563eb, #3b82f6);
+}
+
+.orders-icon {
+  background: linear-gradient(135deg, #1d4ed8, #2563eb);
+}
+
+.rating-icon {
+  background: linear-gradient(135deg, #1e40af, #1d4ed8);
+}
+
+.value-icon {
+  background: linear-gradient(135deg, #1e3a8a, #1e40af);
+}
+
+/* 现代化卡片样式 */
+.modern-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  background: white;
+  transition: all 0.3s ease;
+  margin-bottom: 24px;
+}
+
+.modern-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 40px rgba(37, 99, 235, 0.1);
+  border-color: #2563eb;
+}
+
+/* 卡片头部 */
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.header-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #2563eb, #1d4ed8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 16px;
+}
+
+/* 店铺信息内容 */
+.info-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 24px;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 20px;
+  background: #f8fafc;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  transition: all 0.3s ease;
+}
+
+.info-item:hover {
+  background: #ffffff;
+  border-color: #2563eb;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.1);
+}
+
+.info-item .label {
+  color: #64748b;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.info-item .value {
+  color: #1e293b;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+/* 图表容器 */
+.chart-container {
+  margin-top: 24px;
+}
+
+.revenue-chart {
+  width: 100%;
+  height: 450px;
+  border-radius: 12px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .dashboard-container {
+    padding: 20px;
+  }
+  
+  .page-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 20px;
+    padding: 20px;
+  }
+  
+  .page-title {
+    font-size: 24px;
+  }
+  
+  .header-extra {
+    margin-left: 0;
+  }
+  
+  .header-extra :deep(.el-date-editor) {
+    width: 100%;
+  }
+  
+  .info-content {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  
+  .revenue-chart {
+    height: 320px;
+  }
+  
+  .stat-card:hover {
+    transform: translateY(-2px);
+  }
+}
+
+/* Element Plus 组件样式覆盖 */
+:deep(.el-statistic__content) {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+:deep(.el-card__body) {
+  padding: 24px;
+}
+
+:deep(.el-card__header) {
+  padding: 20px 24px;
+  border-bottom: 1px solid #e5e7eb;
+  background: #f8fafc;
+}
+
+/* 加载状态样式 */
+:deep(.el-loading-mask) {
+  background-color: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(4px);
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/merchant/Finance/AccountCollection.vue b/src/views/merchant/Finance/AccountCollection.vue
deleted file mode 100644
index b74995d..0000000
--- a/src/views/merchant/Finance/AccountCollection.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="account-collection">
-    <h2>收款账号</h2>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 收款账号
-</script>
-
-<style scoped>
-.account-collection {
-  padding: 0px;
-}
-</style>
diff --git a/src/views/merchant/Finance/DailyRevenue.vue b/src/views/merchant/Finance/DailyRevenue.vue
deleted file mode 100644
index 6d11f46..0000000
--- a/src/views/merchant/Finance/DailyRevenue.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="daily-revenue">
-    <h2>每日收益</h2>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 每日收益
-</script>
-
-<style scoped>
-.daily-revenue {
-  padding: 0px;
-}
-</style>
diff --git a/src/views/merchant/Finance/FinanceDownload.vue b/src/views/merchant/Finance/FinanceDownload.vue
deleted file mode 100644
index 98fe055..0000000
--- a/src/views/merchant/Finance/FinanceDownload.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="finance-download">
-    <h2>财务下载</h2>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 财务下载
-</script>
-
-<style scoped>
-.finance-download {
-  padding: 0px;
-}
-</style>
diff --git a/src/views/merchant/Finance/RevenueManagement.vue b/src/views/merchant/Finance/RevenueManagement.vue
deleted file mode 100644
index 57af60f..0000000
--- a/src/views/merchant/Finance/RevenueManagement.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="revenue-management">
-    <h2>收支管理</h2>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 收支管理
-</script>
-
-<style scoped>
-.revenue-management {
-  padding: 0px;
-}
-</style>
diff --git a/src/views/merchant/Finance/index.vue b/src/views/merchant/Finance/index.vue
deleted file mode 100644
index 231f89b..0000000
--- a/src/views/merchant/Finance/index.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="finance">
-    <router-view />
-  </div>
-</template>
-
-<script setup lang="ts">
-// 财务管理
-</script>
-
-<style scoped>
-.finance {
-  padding: 0px;
-}
-</style>
diff --git a/src/views/merchant/Orders/Pending.vue b/src/views/merchant/Orders/Pending.vue
deleted file mode 100644
index c9ce757..0000000
--- a/src/views/merchant/Orders/Pending.vue
+++ /dev/null
@@ -1,448 +0,0 @@
-<template>
-  <div class="pending-orders">
-    <el-card class="box-card">
-      <template #header>
-        <div class="card-header">
-          <div class="header-left">
-            <span>待办订单</span>
-            <el-tag type="success" effect="dark" class="branch-tag">{{ branch.branchName }}</el-tag>
-          </div>
-          <div class="header-right">
-            <el-button type="primary" @click="handleRefresh">
-              <el-icon><Refresh /></el-icon>
-              刷新
-            </el-button>
-          </div>
-        </div>
-      </template>
-
-      <!-- 搜索栏 -->
-      <div class="search-bar">
-        <el-form :inline="true" :model="searchForm" class="search-form">
-          <el-form-item label="订单状态">
-            <el-select
-              v-model="searchForm.orderStatus"
-              placeholder="请选择订单状态"
-              clearable
-              style="width: 150px"
-            >
-              <el-option label="未完成" :value="0" />
-              <el-option label="已完成" :value="1" />
-              <el-option label="已退款" :value="2" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="用户账号">
-            <el-input
-              v-model="searchForm.accountId"
-              placeholder="请输入用户账号"
-              clearable
-              style="width: 200px"
-            />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="handleSearch">搜索</el-button>
-            <el-button @click="handleReset">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-
-      <!-- 数据表格 -->
-      <el-table :data="tableData" style="width: 100%" v-loading="loading" border stripe>
-        <el-table-column prop="orderId" label="订单号" width="100" align="center" />
-        <el-table-column prop="accountId" label="用户账号" width="120" align="center" />
-        <el-table-column prop="orderTime" label="下单时间" width="180" align="center">
-          <template #default="scope">
-            {{ formatDateTime(scope.row.orderTime) }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="orderMoney" label="订单金额" width="120" align="center">
-          <template #default="scope">
-            <span class="price">￥{{ scope.row.orderMoney.toFixed(2) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="orderRemarks" label="备注" min-width="150" show-overflow-tooltip />
-        <el-table-column prop="orderStatus" label="订单状态" width="100" align="center">
-          <template #default="scope">
-            <el-tag :type="getOrderStatusType(scope.row.orderStatus)">
-              {{ getOrderStatusText(scope.row.orderStatus) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="200" align="center" fixed="right">
-          <template #default="scope">
-            <el-button size="small" @click="handleView(scope.row)" type="primary" link>
-              详情
-            </el-button>
-            <el-button
-              v-if="scope.row.orderStatus === 0"
-              size="small"
-              @click="handleComplete(scope.row)"
-              type="success"
-              link
-            >
-              完成
-            </el-button>
-            <el-button
-              v-if="scope.row.orderStatus === 0"
-              size="small"
-              @click="handleRefund(scope.row)"
-              type="danger"
-              link
-            >
-              退款
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <!-- 分页 -->
-      <div class="pagination-wrapper">
-        <el-pagination
-          v-model:current-page="pagination.currentPage"
-          v-model:page-size="pagination.pageSize"
-          :page-sizes="[5, 10, 20, 50, 100]"
-          :total="pagination.total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
-      </div>
-    </el-card>
-
-    <!-- 订单详情对话框 -->
-    <el-dialog v-model="detailDialogVisible" title="订单详情" width="700px">
-      <div v-if="currentOrder" class="order-detail">
-        <el-descriptions :column="2" border>
-          <el-descriptions-item label="订单号">{{ currentOrder.orderId }}</el-descriptions-item>
-          <el-descriptions-item label="用户账号">{{ currentOrder.accountId }}</el-descriptions-item>
-          <el-descriptions-item label="下单时间">{{
-            formatDateTime(currentOrder.orderTime)
-          }}</el-descriptions-item>
-          <el-descriptions-item label="订单金额"
-            >￥{{ currentOrder.orderMoney.toFixed(2) }}</el-descriptions-item
-          >
-          <el-descriptions-item label="订单状态">
-            <el-tag :type="getOrderStatusType(currentOrder.orderStatus)">
-              {{ getOrderStatusText(currentOrder.orderStatus) }}
-            </el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="店铺名称">{{
-            currentOrder.branchName
-          }}</el-descriptions-item>
-          <el-descriptions-item label="备注" :span="2">
-            {{ currentOrder.orderRemarks || '无备注' }}
-          </el-descriptions-item>
-        </el-descriptions>
-
-        <!-- 订单明细 -->
-        <div class="order-items">
-          <h3>订单明细</h3>
-          <el-table :data="currentOrder.orderItems || []" border stripe style="width: 100%">
-            <el-table-column prop="dishName" label="菜品名称" min-width="150" />
-            <el-table-column prop="price" label="单价" width="100" align="center">
-              <template #default="scope">
-                <span class="price">￥{{ scope.row.price.toFixed(2) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="number" label="数量" width="80" align="center" />
-            <el-table-column label="小计" width="120" align="center">
-              <template #default="scope">
-                <span class="price">￥{{ (scope.row.price * scope.row.number).toFixed(2) }}</span>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Refresh } from '@element-plus/icons-vue'
-import axios from 'axios'
-
-// 接口类型定义
-interface OrderItem {
-  orderListId: number
-  orderId: number
-  number: number
-  dishId: number
-  dishName: string
-  price: number
-}
-
-interface Order {
-  orderId: number
-  accountId: string
-  orderTime: string
-  branchId: number
-  orderMoney: number
-  orderRemarks: string
-  isDeleted: number
-  orderStatus: number
-  branchName: string
-  orderItems?: OrderItem[]
-}
-
-interface SearchForm {
-  orderStatus: number | null
-  accountId: string
-}
-
-interface Pagination {
-  currentPage: number
-  pageSize: number
-  total: number
-}
-
-// 响应式数据
-const loading = ref(false)
-const tableData = ref<Order[]>([])
-const detailDialogVisible = ref(false)
-const currentOrder = ref<Order | null>(null)
-
-// 搜索表单
-const searchForm = reactive<SearchForm>({
-  orderStatus: null,
-  accountId: '',
-})
-
-// 分页数据
-const pagination = reactive<Pagination>({
-  currentPage: 1,
-  pageSize: 10,
-  total: 0,
-})
-
-// 当前店铺信息
-const branch = reactive({
-  branchId: 1,
-  branchName: '北京三里屯店',
-})
-
-// API 基础URL
-const API_BASE_URL = 'http://localhost:8080/api'
-
-// 获取订单列表
-const fetchOrders = async () => {
-  loading.value = true
-  try {
-    const params = {
-      page: pagination.currentPage,
-      size: pagination.pageSize,
-      orderStatus: searchForm.orderStatus,
-      accountId: searchForm.accountId,
-    }
-
-    // 使用店铺ID查询订单
-    const response = await axios.get(`${API_BASE_URL}/orders/branch/${branch.branchId}`, {
-      params,
-    })
-    tableData.value = response.data.data.records
-    pagination.total = response.data.data.total
-  } catch (error) {
-    console.error('获取订单列表失败:', error)
-    ElMessage.error('获取订单列表失败')
-  } finally {
-    loading.value = false
-  }
-}
-
-// 获取订单详情
-const fetchOrderDetail = async (orderId: number) => {
-  try {
-    const response = await axios.get(`${API_BASE_URL}/orders/${orderId}`)
-    return response.data.data
-  } catch (error) {
-    console.error('获取订单详情失败:', error)
-    ElMessage.error('获取订单详情失败')
-    return null
-  }
-}
-
-// 格式化日期时间
-const formatDateTime = (dateStr: string) => {
-  if (!dateStr) return ''
-  const date = new Date(dateStr)
-  return date.toLocaleString('zh-CN')
-}
-
-// 获取订单状态文本
-const getOrderStatusText = (status: number) => {
-  switch (status) {
-    case 0:
-      return '未完成'
-    case 1:
-      return '已完成'
-    case 2:
-      return '已退款'
-    default:
-      return '未知状态'
-  }
-}
-
-// 获取订单状态对应的标签类型
-const getOrderStatusType = (status: number) => {
-  switch (status) {
-    case 0:
-      return 'warning' // 未完成
-    case 1:
-      return 'success' // 已完成
-    case 2:
-      return 'danger' // 已退款
-    default:
-      return 'info'
-  }
-}
-
-// 搜索
-const handleSearch = () => {
-  pagination.currentPage = 1
-  fetchOrders()
-}
-
-// 重置搜索
-const handleReset = () => {
-  Object.assign(searchForm, {
-    orderStatus: null,
-    accountId: '',
-  })
-  pagination.currentPage = 1
-  fetchOrders()
-}
-
-// 刷新数据
-const handleRefresh = () => {
-  fetchOrders()
-}
-
-// 分页大小改变
-const handleSizeChange = (size: number) => {
-  pagination.pageSize = size
-  fetchOrders()
-}
-
-// 当前页改变
-const handleCurrentChange = (page: number) => {
-  pagination.currentPage = page
-  fetchOrders()
-}
-
-// 查看订单详情
-const handleView = async (order: Order) => {
-  const orderDetail = await fetchOrderDetail(order.orderId)
-  if (orderDetail) {
-    currentOrder.value = orderDetail
-    detailDialogVisible.value = true
-  }
-}
-
-// 完成订单
-const handleComplete = async (order: Order) => {
-  try {
-    await ElMessageBox.confirm(`确定要将订单 #${order.orderId} 标记为已完成吗？`, {
-      title: '完成确认',
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'success',
-    })
-
-    // 调用更新订单状态API
-    await axios.patch(`${API_BASE_URL}/orders/${order.orderId}/status`, {
-      orderStatus: 1, // 已完成
-    })
-    ElMessage.success('订单已标记为完成')
-    fetchOrders()
-  } catch (error) {
-    if (error !== 'cancel') {
-      console.error('完成订单失败:', error)
-      ElMessage.error('完成订单失败')
-    }
-  }
-}
-
-// 退款订单
-const handleRefund = async (order: Order) => {
-  try {
-    await ElMessageBox.confirm(`确定要将订单 #${order.orderId} 退款吗？`, {
-      title: '退款确认',
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    })
-
-    // 调用更新订单状态API
-    await axios.patch(`${API_BASE_URL}/orders/${order.orderId}/status`, {
-      orderStatus: 2, // 已退款
-    })
-    ElMessage.success('订单已退款')
-    fetchOrders()
-  } catch (error) {
-    if (error !== 'cancel') {
-      console.error('退款操作失败:', error)
-      ElMessage.error('退款操作失败')
-    }
-  }
-}
-
-// 组件挂载时获取数据
-onMounted(() => {
-  fetchOrders()
-})
-</script>
-
-<style scoped>
-.pending-orders {
-  padding: 0px;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-}
-
-.branch-tag {
-  margin-left: 10px;
-}
-
-.search-bar {
-  margin-bottom: 5px;
-}
-
-.search-form {
-  background: #f5f7fa;
-  padding: 10px;
-  border-radius: 4px;
-}
-
-.price {
-  color: #f56c6c;
-  font-weight: bold;
-}
-
-.pagination-wrapper {
-  margin-top: 10px;
-  display: flex;
-  justify-content: center;
-}
-
-.order-detail {
-  margin-bottom: 10px;
-}
-
-.order-items {
-  margin-top: 20px;
-}
-
-.order-items h3 {
-  margin-bottom: 10px;
-}
-</style>
diff --git a/src/views/merchant/Orders/Refund.vue b/src/views/merchant/Orders/Refund.vue
deleted file mode 100644
index 8a00ae7..0000000
--- a/src/views/merchant/Orders/Refund.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="refund-orders">
-    <h2>退款管理</h2>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 退款管理
-</script>
-
-<style scoped>
-.refund-orders {
-  padding: 0px;
-}
-</style>
diff --git a/src/views/merchant/Products/ProductList.vue b/src/views/merchant/Products/ProductList.vue
index 755670b..a4228d7 100644
--- a/src/views/merchant/Products/ProductList.vue
+++ b/src/views/merchant/Products/ProductList.vue
@@ -1,137 +1,392 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import axios from 'axios'
+
+// 基础配置
+const baseURL = 'http://localhost:8080'
+
+// 获取本地存储的accountId
+const getAccountId = (): number | null => {
+  const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
+  return userInfo ? userInfo.accountId : null
+}
+
+// 接口类型定义
+interface Dish {
+  dishId?: number
+  dishName: string
+  category: string
+  price: number
+  stock: number
+  status: string
+  description: string
+  imageUrl: string
+  sales?: number
+  tag: string
+}
+
+interface ApiResponse<T> {
+  code: number
+  message: string
+  data: T
+}
+
+interface PageData {
+  records: Dish[]
+  total: number
+  current: number
+  size: number
+  pages: number
+}
+
+// 响应式数据
+const dishes = ref<Dish[]>([])
+const loading = ref(false)
+const dialogVisible = ref(false)
+const isEdit = ref(false)
+const currentDish = ref<Dish>({
+  dishName: '',
+  category: '',
+  price: 0,
+  stock: 0,
+  status: '在售',
+  description: '',
+  imageUrl: '',
+  tag: ''
+})
+
+// 分页数据
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+
+// 搜索条件
+const searchParams = ref({
+  dishName: '',
+  category: '',
+  status: ''
+})
+
+// 分类选项
+const categoryOptions = [
+  '川菜', '粤菜', '湘菜', '海鲜', '西餐', '家常菜', '主食', 
+  '咖啡', '茶饮', '果汁', '奶茶', '酒品', '蛋糕', '布丁', 
+  '炸物', '冰淇淋', '健康轻食'
+]
+
+// 状态选项
+const statusOptions = ['在售', '停售']
+
+// 计算属性
+const filteredDishes = computed(() => {
+  return dishes.value.filter(dish => {
+    return (!searchParams.value.dishName || dish.dishName.includes(searchParams.value.dishName)) &&
+           (!searchParams.value.category || dish.category === searchParams.value.category) &&
+           (!searchParams.value.status || dish.status === searchParams.value.status)
+  })
+})
+
+// 获取菜品列表
+const fetchDishes = async () => {
+  loading.value = true
+  try {
+    const response = await axios.get<ApiResponse<PageData>>(`${baseURL}/branch/dishes`, {
+      params: {
+        page: currentPage.value,
+        size: pageSize.value,
+        ...searchParams.value
+      }
+    })
+    
+    if (response.data.code === 200) {
+      dishes.value = response.data.data.records
+      total.value = response.data.data.total
+      currentPage.value = response.data.data.current
+    } else {
+      ElMessage.error(response.data.message || '获取菜品列表失败')
+    }
+  } catch (error) {
+    ElMessage.error('网络错误，请重试')
+    console.error('获取菜品列表失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 打开新增对话框
+const openAddDialog = () => {
+  isEdit.value = false
+  currentDish.value = {
+    dishName: '',
+    category: '',
+    price: 0,
+    stock: 0,
+    status: '在售',
+    description: '',
+    imageUrl: '',
+    tag: ''
+  }
+  dialogVisible.value = true
+}
+
+// 打开编辑对话框
+const openEditDialog = (dish: Dish) => {
+  isEdit.value = true
+  currentDish.value = { ...dish }
+  dialogVisible.value = true
+}
+
+// 保存菜品
+const saveDish = async () => {
+  if (!currentDish.value.dishName.trim()) {
+    ElMessage.warning('请输入菜品名称')
+    return
+  }
+  
+  if (!currentDish.value.category) {
+    ElMessage.warning('请选择菜品分类')
+    return
+  }
+  
+  if (currentDish.value.price <= 0) {
+    ElMessage.warning('请输入正确的价格')
+    return
+  }
+
+  loading.value = true
+  try {
+    let response
+    
+    if (isEdit.value && currentDish.value.dishId) {
+      // 更新菜品
+      response = await axios.put<ApiResponse<{ dishId: number }>>(
+        `${baseURL}/branch/dishes/${currentDish.value.dishId}`,
+        currentDish.value
+      )
+    } else {
+      // 新增菜品
+      response = await axios.post<ApiResponse<{ dishId: number }>>(
+        `${baseURL}/branch/dishes/`,
+        currentDish.value
+      )
+    }
+    
+    if (response.data.code === 200) {
+      ElMessage.success(isEdit.value ? '更新成功' : '添加成功')
+      dialogVisible.value = false
+      await fetchDishes()
+    } else {
+      ElMessage.error(response.data.message || '操作失败')
+    }
+  } catch (error) {
+    ElMessage.error('网络错误，请重试')
+    console.error('保存菜品失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 删除菜品
+const deleteDish = async (dish: Dish) => {
+  try {
+    await ElMessageBox.confirm('确定要删除这个菜品吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+    
+    loading.value = true
+    const response = await axios.delete<ApiResponse<null>>(`${baseURL}/branch/dishes/${dish.dishId}`)
+    
+    if (response.data.code === 200) {
+      ElMessage.success('删除成功')
+      await fetchDishes()
+    } else {
+      ElMessage.error(response.data.message || '删除失败')
+    }
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('网络错误，请重试')
+      console.error('删除菜品失败:', error)
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// 更新菜品状态
+const updateDishStatus = async (dish: Dish, status: string) => {
+  try {
+    loading.value = true
+    const response = await axios.patch<ApiResponse<null>>(
+      `${baseURL}/branch/dishes/${dish.dishId}/status`,
+      { status }
+    )
+    
+    if (response.data.code === 200) {
+      ElMessage.success('状态更新成功')
+      dish.status = status
+    } else {
+      ElMessage.error(response.data.message || '状态更新失败')
+    }
+  } catch (error) {
+    ElMessage.error('网络错误，请重试')
+    console.error('更新状态失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索菜品
+const searchDishes = () => {
+  currentPage.value = 1
+  fetchDishes()
+}
+
+// 重置搜索
+const resetSearch = () => {
+  searchParams.value = {
+    dishName: '',
+    category: '',
+    status: ''
+  }
+  currentPage.value = 1
+  fetchDishes()
+}
+
+// 页码改变
+const handlePageChange = (page: number) => {
+  currentPage.value = page
+  fetchDishes()
+}
+
+// 页大小改变
+const handleSizeChange = (size: number) => {
+  pageSize.value = size
+  currentPage.value = 1
+  fetchDishes()
+}
+
+// 初始化
+onMounted(() => {
+  fetchDishes()
+})
+</script>
+
 <template>
-  <div class="product-list">
-    <el-card class="box-card">
-      <template #header>
-        <div class="card-header">
-          <div class="header-left">
-            <span>菜品管理</span>
-            <el-tag type="success" effect="dark" class="branch-tag">{{
-              branch.branch_name
-            }}</el-tag>
-          </div>
-          <el-button type="primary" @click="handleAdd">
-            <el-icon><Plus /></el-icon>
-            添加菜品
-          </el-button>
-        </div>
-      </template>
-
-      <!-- 搜索栏 -->
-      <div class="search-bar">
-        <el-form :inline="true" :model="searchForm" class="search-form">
-          <el-form-item label="菜品名称">
+  <div class="dish-management">
+    <el-card class="search-card">
+      <h2>菜品管理</h2>
+      
+      <!-- 搜索区域 -->
+      <div class="search-area">
+        <el-row :gutter="20">
+          <el-col :span="6">
             <el-input
-              v-model="searchForm.dishName"
-              placeholder="请输入菜品名称"
+              v-model="searchParams.dishName"
+              placeholder="菜品名称"
+              @keyup.enter="searchDishes"
               clearable
-              style="width: 200px"
             />
-          </el-form-item>
-          <el-form-item label="分类">
+          </el-col>
+          <el-col :span="4">
             <el-select
-              v-model="searchForm.category"
-              placeholder="请选择分类"
+              v-model="searchParams.category"
+              placeholder="菜品分类"
               clearable
-              style="width: 150px"
             >
-              <el-option label="主食" value="主食" />
-              <el-option label="小菜" value="小菜" />
-              <el-option label="汤类" value="汤类" />
-              <el-option label="饮品" value="饮品" />
+              <el-option
+                v-for="category in categoryOptions"
+                :key="category"
+                :label="category"
+                :value="category"
+              />
             </el-select>
-          </el-form-item>
-          <el-form-item label="状态">
+          </el-col>
+          <el-col :span="4">
             <el-select
-              v-model="searchForm.status"
-              placeholder="请选择状态"
+              v-model="searchParams.status"
+              placeholder="菜品状态"
               clearable
-              style="width: 120px"
             >
-              <el-option label="在售" value="在售" />
-              <el-option label="停售" value="停售" />
+              <el-option
+                v-for="status in statusOptions"
+                :key="status"
+                :label="status"
+                :value="status"
+              />
             </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="handleSearch">搜索</el-button>
-            <el-button @click="handleReset">重置</el-button>
-          </el-form-item>
-        </el-form>
+          </el-col>
+          <el-col :span="2">
+            <el-button type="primary" @click="searchDishes" :loading="loading">
+              搜索
+            </el-button>
+            </el-col>
+            <el-col :span="2">
+            <el-button @click="resetSearch">重置</el-button>
+            </el-col>
+            <el-col :span="4">
+            <el-button type="success" @click="openAddDialog">
+              新增菜品
+            </el-button>
+          </el-col>
+        </el-row>
       </div>
+    </el-card>
 
-      <!-- 数据表格 -->
-      <el-table :data="tableData" style="width: 100%" v-loading="loading" border stripe>
-        <el-table-column prop="dishId" label="ID" width="80" align="center" />
-        <el-table-column prop="dishName" label="菜品名称" min-width="150">
+    <!-- 菜品列表 -->
+    <el-card class="table-card">
+      <el-table :data="filteredDishes" v-loading="loading" stripe>
+        <el-table-column prop="dishId" label="ID" width="80" />
+        <el-table-column prop="dishName" label="菜品名称" min-width="120" />
+        <el-table-column prop="category" label="分类" width="100" />
+        <el-table-column prop="price" label="价格" width="100">
           <template #default="scope">
-            <div class="dish-info">
-              <el-image
-                v-if="scope.row.imageUrl"
-                :src="scope.row.imageUrl"
-                style="width: 40px; height: 40px; border-radius: 4px; margin-right: 10px"
-                fit="cover"
-              >
-                <template #error>
-                  <div class="image-slot">
-                    <el-icon><Picture /></el-icon>
-                  </div>
-                </template>
-              </el-image>
-              <span>{{ scope.row.dishName }}</span>
-            </div>
+            ¥{{ scope.row.price.toFixed(2) }}
           </template>
         </el-table-column>
-        <el-table-column prop="category" label="分类" width="100" align="center" />
-        <el-table-column prop="price" label="价格" width="100" align="center">
-          <template #default="scope">
-            <span class="price">￥{{ scope.row.price }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="stock" label="库存" width="80" align="center">
-          <template #default="scope">
-            <el-tag
-              :type="scope.row.stock > 10 ? 'success' : scope.row.stock > 0 ? 'warning' : 'danger'"
-            >
-              {{ scope.row.stock }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="status" label="状态" width="80" align="center">
+        <el-table-column prop="stock" label="库存" width="80" />
+        <el-table-column prop="sales" label="销量" width="80" />
+        <el-table-column prop="status" label="状态" width="100">
           <template #default="scope">
             <el-tag :type="scope.row.status === '在售' ? 'success' : 'danger'">
               {{ scope.row.status }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="sales" label="销量" width="80" align="center" />
-        <el-table-column prop="tag" label="标签" width="120">
+        <el-table-column prop="tag" label="标签" width="120" />
+        <el-table-column prop="description" label="描述" min-width="150" show-overflow-tooltip />
+        <el-table-column label="操作" width="200" fixed="right">
           <template #default="scope">
-            <el-tag v-if="scope.row.tag" size="small" type="info">
-              {{ scope.row.tag }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createdAt" label="创建时间" width="180" align="center">
-          <template #default="scope">
-            {{ formatDateTime(scope.row.createdAt) }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="200" align="center" fixed="right">
-          <template #default="scope">
-            <el-button size="small" @click="handleView(scope.row)" type="info" link>
-              查看
-            </el-button>
-            <el-button size="small" @click="handleEdit(scope.row)" type="primary" link>
+            <el-button
+              type="primary"
+              size="small"
+              @click="openEditDialog(scope.row)"
+            >
               编辑
             </el-button>
             <el-button
+              v-if="scope.row.status === '在售'"
+              type="warning"
               size="small"
-              @click="handleToggleStatus(scope.row)"
-              :type="scope.row.status === '在售' ? 'warning' : 'success'"
-              link
+              @click="updateDishStatus(scope.row, '停售')"
             >
-              {{ scope.row.status === '在售' ? '停售' : '上架' }}
+              停售
             </el-button>
-            <el-button size="small" @click="handleDelete(scope.row)" type="danger" link>
+            <el-button
+              v-else
+              type="success"
+              size="small"
+              @click="updateDishStatus(scope.row, '在售')"
+            >
+              上架
+            </el-button>
+            <el-button
+              type="danger"
+              size="small"
+              @click="deleteDish(scope.row)"
+            >
               删除
             </el-button>
           </template>
@@ -141,614 +396,158 @@
       <!-- 分页 -->
       <div class="pagination-wrapper">
         <el-pagination
-          v-model:current-page="pagination.currentPage"
-          v-model:page-size="pagination.pageSize"
-          :page-sizes="[5, 10, 20, 50, 100]"
-          :total="pagination.total"
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="total"
           layout="total, sizes, prev, pager, next, jumper"
           @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
+          @current-change="handlePageChange"
         />
       </div>
     </el-card>
 
-    <!-- 菜品详情对话框 -->
-    <el-dialog v-model="detailDialogVisible" title="菜品详情" width="600px">
-      <div v-if="currentDish" class="dish-detail">
-        <el-descriptions :column="2" border>
-          <el-descriptions-item label="菜品ID">{{ currentDish.dishId }}</el-descriptions-item>
-          <el-descriptions-item label="菜品名称">{{ currentDish.dishName }}</el-descriptions-item>
-          <el-descriptions-item label="分类">{{ currentDish.category }}</el-descriptions-item>
-          <el-descriptions-item label="价格">￥{{ currentDish.price }}</el-descriptions-item>
-          <el-descriptions-item label="库存">{{ currentDish.stock }}</el-descriptions-item>
-          <el-descriptions-item label="销量">{{ currentDish.sales }}</el-descriptions-item>
-          <el-descriptions-item label="状态">
-            <el-tag :type="currentDish.status === '在售' ? 'success' : 'danger'">
-              {{ currentDish.status }}
-            </el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="标签">
-            <el-tag v-if="currentDish.tag" type="info">{{ currentDish.tag }}</el-tag>
-            <span v-else>无</span>
-          </el-descriptions-item>
-          <el-descriptions-item label="创建时间" :span="2">
-            {{ formatDateTime(currentDish.createdAt) }}
-          </el-descriptions-item>
-          <el-descriptions-item label="更新时间" :span="2">
-            {{ formatDateTime(currentDish.updatedAt) }}
-          </el-descriptions-item>
-          <el-descriptions-item label="描述" :span="2">
-            {{ currentDish.description || '无描述' }}
-          </el-descriptions-item>
-        </el-descriptions>
-        <div v-if="currentDish.imageUrl" class="dish-image">
-          <h4>菜品图片</h4>
-          <el-image :src="currentDish.imageUrl" style="width: 200px; height: 200px" fit="cover">
-            <template #error>
-              <div class="image-slot">
-                <el-icon><Picture /></el-icon>
-              </div>
-            </template>
-          </el-image>
-        </div>
-      </div>
-    </el-dialog>
-
-    <!-- 编辑菜品对话框 -->
-    <el-dialog v-model="editDialogVisible" title="编辑菜品" width="800px">
-      <el-form :model="editForm" :rules="editRules" ref="editFormRef" label-width="100px">
+    <!-- 新增/编辑对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="isEdit ? '编辑菜品' : '新增菜品'"
+      width="600px"
+    >
+      <el-form :model="currentDish" label-width="100px">
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item label="菜品名称" prop="dishName">
-              <el-input v-model="editForm.dishName" placeholder="请输入菜品名称" />
+            <el-form-item label="菜品名称" required>
+              <el-input v-model="currentDish.dishName" placeholder="请输入菜品名称" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="分类" prop="category">
-              <el-select v-model="editForm.category" placeholder="请选择分类" style="width: 100%">
-                <el-option label="主食" value="主食" />
-                <el-option label="小菜" value="小菜" />
-                <el-option label="汤类" value="汤类" />
-                <el-option label="饮品" value="饮品" />
+            <el-form-item label="菜品分类" required>
+              <el-select v-model="currentDish.category" placeholder="请选择分类">
+                <el-option
+                  v-for="category in categoryOptions"
+                  :key="category"
+                  :label="category"
+                  :value="category"
+                />
               </el-select>
             </el-form-item>
           </el-col>
         </el-row>
+
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item label="价格" prop="price">
+            <el-form-item label="价格" required>
               <el-input-number
-                v-model="editForm.price"
+                v-model="currentDish.price"
                 :min="0"
                 :precision="2"
-                style="width: 100%"
                 placeholder="请输入价格"
               />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="库存" prop="stock">
+            <el-form-item label="库存">
               <el-input-number
-                v-model="editForm.stock"
+                v-model="currentDish.stock"
                 :min="0"
-                style="width: 100%"
                 placeholder="请输入库存"
               />
             </el-form-item>
           </el-col>
         </el-row>
+
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item label="状态" prop="status">
-              <el-radio-group v-model="editForm.status">
-                <el-radio value="在售">在售</el-radio>
-                <el-radio value="停售">停售</el-radio>
-              </el-radio-group>
+            <el-form-item label="状态">
+              <el-select v-model="currentDish.status">
+                <el-option
+                  v-for="status in statusOptions"
+                  :key="status"
+                  :label="status"
+                  :value="status"
+                />
+              </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="标签">
-              <el-input v-model="editForm.tag" placeholder="请输入标签" />
+              <el-input v-model="currentDish.tag" placeholder="请输入标签" />
             </el-form-item>
           </el-col>
         </el-row>
+
         <el-form-item label="图片URL">
-          <el-input v-model="editForm.imageUrl" placeholder="请输入图片URL" />
+          <el-input v-model="currentDish.imageUrl" placeholder="请输入图片链接" />
         </el-form-item>
+
         <el-form-item label="描述">
           <el-input
-            v-model="editForm.description"
+            v-model="currentDish.description"
             type="textarea"
             :rows="3"
             placeholder="请输入菜品描述"
           />
         </el-form-item>
       </el-form>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="editDialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleSaveEdit">保存</el-button>
-        </span>
-      </template>
-    </el-dialog>
 
-    <!-- 添加菜品对话框 -->
-    <el-dialog v-model="addDialogVisible" title="添加菜品" width="800px">
-      <el-form :model="addForm" :rules="addRules" ref="addFormRef" label-width="100px">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="菜品名称" prop="dishName">
-              <el-input v-model="addForm.dishName" placeholder="请输入菜品名称" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="分类" prop="category">
-              <el-select v-model="addForm.category" placeholder="请选择分类" style="width: 100%">
-                <el-option label="主食" value="主食" />
-                <el-option label="小菜" value="小菜" />
-                <el-option label="汤类" value="汤类" />
-                <el-option label="饮品" value="饮品" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="价格" prop="price">
-              <el-input-number
-                v-model="addForm.price"
-                :min="0"
-                :precision="2"
-                style="width: 100%"
-                placeholder="请输入价格"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="库存" prop="stock">
-              <el-input-number
-                v-model="addForm.stock"
-                :min="0"
-                style="width: 100%"
-                placeholder="请输入库存"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="状态" prop="status">
-              <el-radio-group v-model="addForm.status">
-                <el-radio value="在售">在售</el-radio>
-                <el-radio value="停售">停售</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="标签">
-              <el-input v-model="addForm.tag" placeholder="请输入标签" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-form-item label="图片URL">
-          <el-input v-model="addForm.imageUrl" placeholder="请输入图片URL" />
-        </el-form-item>
-        <el-form-item label="描述">
-          <el-input
-            v-model="addForm.description"
-            type="textarea"
-            :rows="3"
-            placeholder="请输入菜品描述"
-          />
-        </el-form-item>
-      </el-form>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="addDialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleSaveAdd">保存</el-button>
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="saveDish" :loading="loading">
+            {{ isEdit ? '更新' : '添加' }}
+          </el-button>
         </span>
       </template>
     </el-dialog>
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
-import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
-import { Plus, Picture } from '@element-plus/icons-vue'
-import axios from 'axios'
-
-// 接口类型定义
-interface Dish {
-  dishId: number
-  dishName: string
-  category: string
-  price: number
-  stock: number
-  status: '在售' | '停售'
-  description?: string
-  imageUrl?: string
-  sales: number
-  tag?: string
-  isDeleted: number
-  deletedAt?: string
-  createdAt: string
-  updatedAt: string
-}
-
-interface SearchForm {
-  dishName: string
-  category: string
-  status: string
-}
-
-interface Pagination {
-  currentPage: number
-  pageSize: number
-  total: number
-}
-
-// 响应式数据
-const loading = ref(false)
-const tableData = ref<Dish[]>([])
-const detailDialogVisible = ref(false)
-const editDialogVisible = ref(false)
-const addDialogVisible = ref(false)
-const currentDish = ref<Dish | null>(null)
-const editFormRef = ref<FormInstance>()
-const addFormRef = ref<FormInstance>()
-
-// 搜索表单
-const searchForm = reactive<SearchForm>({
-  dishName: '',
-  category: '',
-  status: '',
-})
-
-// 分页数据
-const pagination = reactive<Pagination>({
-  currentPage: 1,
-  pageSize: 5,
-  total: 0,
-})
-
-// 编辑表单
-const editForm = reactive({
-  dishId: 0,
-  dishName: '',
-  category: '',
-  price: 0,
-  stock: 0,
-  status: '在售' as '在售' | '停售',
-  description: '',
-  imageUrl: '',
-  tag: '',
-})
-
-// 添加表单
-const addForm = reactive({
-  dishName: '',
-  category: '',
-  price: 0,
-  stock: 0,
-  status: '在售' as '在售' | '停售',
-  description: '',
-  imageUrl: '',
-  tag: '',
-})
-
-const branch = reactive({
-  branch_id: 1,
-  branch_name: '中山路总店',
-  branch_address: '广东省深圳市福田区中山路123号',
-  branch_phone: '0755-88888888',
-  branch_start: '08:00',
-  branch_end: '22:00',
-  branch_status: '营业中',
-  branch_boss: 'ACC001',
-  is_deleted: 0,
-  deleted_at: null,
-  created_at: '2025-06-15 13:29:22',
-  updated_at: '2025-06-15 15:21:51',
-})
-
-// 编辑表单验证规则
-const editRules = {
-  dishName: [{ required: true, message: '请输入菜品名称', trigger: 'blur' }],
-  category: [{ required: true, message: '请选择分类', trigger: 'change' }],
-  price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
-  stock: [{ required: true, message: '请输入库存', trigger: 'blur' }],
-  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
-}
-
-// 添加表单验证规则
-const addRules = {
-  dishName: [{ required: true, message: '请输入菜品名称', trigger: 'blur' }],
-  category: [{ required: true, message: '请选择分类', trigger: 'change' }],
-  price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
-  stock: [{ required: true, message: '请输入库存', trigger: 'blur' }],
-  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
-}
-
-// API 基础URL
-const API_BASE_URL = 'http://localhost:8080/api'
-
-// 获取菜品列表
-const fetchDishes = async () => {
-  loading.value = true
-  try {
-    const params = {
-      page: pagination.currentPage,
-      size: pagination.pageSize,
-      dishName: searchForm.dishName,
-      category: searchForm.category,
-      status: searchForm.status,
-    }
-
-    // 使用店铺ID查询对应菜单菜品
-    const response = await axios.get(`${API_BASE_URL}/dishes/branch/${branch.branch_id}`, {
-      params,
-    })
-    tableData.value = response.data.data.records
-    pagination.total = response.data.data.total
-  } catch (error) {
-    console.error('获取菜品列表失败:', error)
-    ElMessage.error('获取菜品列表失败')
-  } finally {
-    loading.value = false
-  }
-}
-
-// 获取店铺所有菜品（不分页）
-const fetchAllDishes = async () => {
-  try {
-    const response = await axios.get(`${API_BASE_URL}/dishes/branch/${branch.branch_id}/all`)
-    return response.data.data
-  } catch (error) {
-    console.error('获取所有菜品失败:', error)
-    ElMessage.error('获取所有菜品失败')
-    return []
-  }
-}
-
-// 格式化日期时间
-const formatDateTime = (dateStr: string) => {
-  if (!dateStr) return ''
-  const date = new Date(dateStr)
-  return date.toLocaleString('zh-CN')
-}
-
-// 搜索
-const handleSearch = () => {
-  pagination.currentPage = 1
-  fetchDishes()
-}
-
-// 重置搜索
-const handleReset = () => {
-  Object.assign(searchForm, {
-    dishName: '',
-    category: '',
-    status: '',
-  })
-  pagination.currentPage = 1
-  fetchDishes()
-}
-
-// 分页大小改变
-const handleSizeChange = (size: number) => {
-  pagination.pageSize = size
-  fetchDishes()
-}
-
-// 当前页改变
-const handleCurrentChange = (page: number) => {
-  pagination.currentPage = page
-  fetchDishes()
-}
-
-// 添加菜品
-const handleAdd = () => {
-  // 重置添加表单
-  Object.assign(addForm, {
-    dishName: '',
-    category: '',
-    price: 0,
-    stock: 0,
-    status: '在售',
-    description: '',
-    imageUrl: '',
-    tag: '',
-  })
-  addDialogVisible.value = true
-}
-
-// 查看详情
-const handleView = (dish: Dish) => {
-  currentDish.value = dish
-  detailDialogVisible.value = true
-}
-
-// 编辑菜品
-const handleEdit = (dish: Dish) => {
-  Object.assign(editForm, {
-    dishId: dish.dishId,
-    dishName: dish.dishName,
-    category: dish.category,
-    price: dish.price,
-    stock: dish.stock,
-    status: dish.status,
-    description: dish.description || '',
-    imageUrl: dish.imageUrl || '',
-    tag: dish.tag || '',
-  })
-  editDialogVisible.value = true
-}
-
-// 保存编辑
-const handleSaveEdit = async () => {
-  if (!editFormRef.value) return
-
-  await editFormRef.value.validate((valid) => {
-    if (valid) {
-      saveEditDish()
-    }
-  })
-}
-
-// 保存编辑数据
-const saveEditDish = async () => {
-  try {
-    // 在表单数据中添加店铺ID
-    const dishData = { ...editForm, branchId: branch.branch_id }
-    const response = await axios.put(`${API_BASE_URL}/dishes/${editForm.dishId}`, dishData)
-    ElMessage.success('编辑成功')
-    editDialogVisible.value = false
-    fetchDishes()
-  } catch (error) {
-    console.error('编辑失败:', error)
-    ElMessage.error('编辑失败')
-  }
-}
-
-// 切换状态
-const handleToggleStatus = async (dish: Dish) => {
-  try {
-    const newStatus = dish.status === '在售' ? '停售' : '在售'
-    await axios.patch(`${API_BASE_URL}/dishes/${dish.dishId}/status`, {
-      status: newStatus,
-      branchId: branch.branch_id,
-    })
-    ElMessage.success(`${newStatus === '在售' ? '上架' : '停售'}成功`)
-    fetchDishes()
-  } catch (error) {
-    console.error('状态切换失败:', error)
-    ElMessage.error('状态切换失败')
-  }
-}
-
-// 删除菜品
-const handleDelete = async (dish: Dish) => {
-  try {
-    await ElMessageBox.confirm(`确定要删除菜品"${dish.dishName}"吗？`, '删除确认', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    })
-
-    // 删除时传递店铺ID参数
-    await axios.delete(`${API_BASE_URL}/dishes/${dish.dishId}`, {
-      params: { branchId: branch.branch_id },
-    })
-    ElMessage.success('删除成功')
-    fetchDishes()
-  } catch (error) {
-    if (error !== 'cancel') {
-      console.error('删除失败:', error)
-      ElMessage.error('删除失败')
-    }
-  }
-}
-
-// 保存添加
-const handleSaveAdd = async () => {
-  if (!addFormRef.value) return
-
-  await addFormRef.value.validate((valid) => {
-    if (valid) {
-      saveAddDish()
-    }
-  })
-}
-
-// 保存添加数据
-const saveAddDish = async () => {
-  try {
-    // 添加时需要传递店铺ID
-    const dishData = { ...addForm, branchId: branch.branch_id }
-    const response = await axios.post(`${API_BASE_URL}/dishes`, dishData)
-    ElMessage.success('添加成功')
-    addDialogVisible.value = false
-    fetchDishes()
-  } catch (error) {
-    console.error('添加失败:', error)
-    ElMessage.error('添加失败')
-  }
-}
-
-// 组件挂载时获取数据
-onMounted(() => {
-  fetchDishes()
-})
-</script>
-
 <style scoped>
-.product-list {
-  padding: 0px;
+.dish-management {
+  padding: 20px;
 }
 
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.search-card {
+  margin-bottom: 20px;
 }
 
-.header-left {
-  display: flex;
-  align-items: center;
+.search-card h2 {
+  margin: 0 0 20px 0;
+  color: #303133;
 }
 
-.branch-tag {
-  margin-left: 10px;
+.search-area {
+  margin-bottom: 20px;
 }
 
-.search-bar {
-  margin-bottom: 5px;
-}
-
-.search-form {
-  background: #f5f7fa;
-  padding: 10px;
-  border-radius: 4px;
-}
-
-.dish-info {
-  display: flex;
-  align-items: center;
-}
-
-.image-slot {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  background: var(--el-fill-color-light);
-  color: var(--el-text-color-secondary);
-  font-size: 14px;
-}
-
-.price {
-  color: #f56c6c;
-  font-weight: bold;
+.table-card {
+  min-height: 400px;
 }
 
 .pagination-wrapper {
-  margin-top: 10px;
-  display: flex;
-  justify-content: center;
-}
-
-.dish-detail {
-  margin-bottom: 10px;
-}
-
-.dish-image {
-  margin-top: 10px;
+  margin-top: 20px;
   text-align: center;
 }
 
-.dish-image h4 {
-  margin-bottom: 10px;
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
 }
-</style>
+
+.el-input-number {
+  width: 100%;
+}
+
+.el-select {
+  width: 100%;
+}
+
+.el-table .cell {
+  word-break: break-all;
+}
+
+.el-button + .el-button {
+  margin-left: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/merchant/Reviews/ReplyManagement.vue b/src/views/merchant/Reviews/ReplyManagement.vue
deleted file mode 100644
index 78f000d..0000000
--- a/src/views/merchant/Reviews/ReplyManagement.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="reply-management">
-    <h2>评价回复</h2>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 评价回复
-</script>
-
-<style scoped>
-.reply-management {
-  padding: 0px;
-}
-</style>
diff --git a/src/views/merchant/Reviews/StoreReviews.vue b/src/views/merchant/Reviews/StoreReviews.vue
index 3406ba3..75618c8 100644
--- a/src/views/merchant/Reviews/StoreReviews.vue
+++ b/src/views/merchant/Reviews/StoreReviews.vue
@@ -1,353 +1,170 @@
-<template>
-  <div class="store-reviews">
-    <el-card class="box-card">
-      <template #header>
-        <div class="card-header">
-          <div class="header-left">
-            <span>门店评价管理</span>
-            <el-tag type="success" effect="dark" class="branch-tag">{{
-              branch.branch_name
-            }}</el-tag>
-          </div>
-          <el-button type="primary" @click="handleRefresh">
-            <el-icon><Refresh /></el-icon>
-            刷新数据
-          </el-button>
-        </div>
-      </template>
-
-      <!-- 搜索栏 -->
-      <div class="search-bar">
-        <el-form :inline="true" :model="searchForm" class="search-form">
-          <el-form-item label="菜品名称">
-            <el-input
-              v-model="searchForm.dishName"
-              placeholder="请输入菜品名称"
-              clearable
-              style="width: 200px"
-            />
-          </el-form-item>
-          <el-form-item label="评分">
-            <el-select
-              v-model="searchForm.rating"
-              placeholder="请选择评分"
-              clearable
-              style="width: 150px"
-            >
-              <el-option label="1星" value="1" />
-              <el-option label="2星" value="2" />
-              <el-option label="3星" value="3" />
-              <el-option label="4星" value="4" />
-              <el-option label="5星" value="5" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="评论类型">
-            <el-select
-              v-model="searchForm.commentType"
-              placeholder="评论类型"
-              clearable
-              style="width: 150px"
-            >
-              <el-option label="主评论" value="main" />
-              <el-option label="回复评论" value="reply" />
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="handleSearch">搜索</el-button>
-            <el-button @click="handleReset">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-
-      <!-- 数据表格 -->
-      <el-table :data="tableData" style="width: 100%" v-loading="loading" border stripe>
-        <el-table-column type="expand">
-          <template #default="scope">
-            <div v-if="scope.row.replies && scope.row.replies.length > 0" class="reply-list">
-              <el-table :data="scope.row.replies" border style="width: 100%" size="small">
-                <el-table-column prop="commentId" label="ID" width="80" align="center" />
-                <el-table-column prop="dishName" label="菜品名称" width="120" align="center" />
-                <el-table-column prop="accountName" label="用户" width="120" align="center" />
-                <el-table-column prop="commentText" label="评论内容" min-width="200">
-                  <template #default="rScope">
-                    <div class="comment-content">
-                      {{ rScope.row.commentText }}
-                    </div>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="createdAt" label="评论时间" width="180" align="center">
-                  <template #default="rScope">
-                    {{ formatDateTime(rScope.row.createdAt) }}
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" width="100" align="center" fixed="right">
-                  <template #default="rScope">
-                    <el-button size="small" @click="handleDelete(rScope.row)" type="danger" link>
-                      删除
-                    </el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
-            <div v-else class="no-replies">暂无回复</div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="commentId" label="ID" width="80" align="center" />
-        <el-table-column prop="dishName" label="菜品名称" width="120" align="center" />
-        <el-table-column prop="accountName" label="用户" width="120" align="center" />
-        <el-table-column prop="commentText" label="评论内容" min-width="200">
-          <template #default="scope">
-            <div class="comment-content">
-              {{ scope.row.commentText }}
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="commentRating" label="评分" width="120" align="center">
-          <template #default="scope">
-            <el-rate
-              v-model="scope.row.commentRating"
-              disabled
-              show-score
-              text-color="#ff9900"
-              score-template="{value}"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column prop="createdAt" label="评论时间" width="180" align="center">
-          <template #default="scope">
-            {{ formatDateTime(scope.row.createdAt) }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="160" align="center" fixed="right">
-          <template #default="scope">
-            <el-button size="small" @click="handleView(scope.row)" type="info" link>
-              查看
-            </el-button>
-            <el-button size="small" @click="handleReply(scope.row)" type="primary" link>
-              回复
-            </el-button>
-            <el-button size="small" @click="handleDelete(scope.row)" type="danger" link>
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <!-- 分页 -->
-      <div class="pagination-wrapper">
-        <el-pagination
-          v-model:current-page="pagination.currentPage"
-          v-model:page-size="pagination.pageSize"
-          :page-sizes="[5, 10, 20, 50, 100]"
-          :total="pagination.total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
-      </div>
-    </el-card>
-
-    <!-- 评论详情对话框 -->
-    <el-dialog v-model="detailDialogVisible" title="评论详情" width="600px">
-      <div v-if="currentComment" class="comment-detail">
-        <el-descriptions :column="2" border>
-          <el-descriptions-item label="评论ID">{{ currentComment.commentId }}</el-descriptions-item>
-          <el-descriptions-item label="评论类型">
-            {{ currentComment.updatedId && currentComment.updatedId > 0 ? '回复评论' : '主评论' }}
-          </el-descriptions-item>
-          <el-descriptions-item label="菜品名称">{{
-            currentComment.dishName
-          }}</el-descriptions-item>
-          <el-descriptions-item label="用户账号">{{
-            currentComment.accountName
-          }}</el-descriptions-item>
-          <el-descriptions-item label="评分">
-            <el-rate
-              v-model="currentComment.commentRating"
-              disabled
-              show-score
-              text-color="#ff9900"
-              score-template="{value}"
-            />
-          </el-descriptions-item>
-          <el-descriptions-item label="评论时间">{{
-            formatDateTime(currentComment.createdAt)
-          }}</el-descriptions-item>
-          <el-descriptions-item label="评论内容" :span="2">
-            {{ currentComment.commentText }}
-          </el-descriptions-item>
-        </el-descriptions>
-
-        <!-- 显示相关回复 -->
-        <div
-          v-if="currentComment.replies && currentComment.replies.length > 0"
-          class="replies-section"
-        >
-          <h4>相关回复</h4>
-          <el-table :data="currentComment.replies" border style="width: 100%" size="small">
-            <el-table-column prop="commentId" label="ID" width="80" align="center" />
-            <el-table-column prop="accountName" label="用户" width="120" align="center" />
-            <el-table-column prop="commentText" label="评论内容" min-width="200">
-              <template #default="scope">
-                <div class="comment-content">
-                  {{ scope.row.commentText }}
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="createdAt" label="回复时间" width="180" align="center">
-              <template #default="scope">
-                {{ formatDateTime(scope.row.createdAt) }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-      </div>
-    </el-dialog>
-
-    <!-- 回复评论对话框 -->
-    <el-dialog v-model="replyDialogVisible" title="回复评论" width="500px">
-      <div v-if="currentComment" class="original-comment">
-        <h4>原评论</h4>
-        <p>{{ currentComment.commentText }}</p>
-        <p class="comment-info">
-          {{ currentComment.accountName }} - {{ formatDateTime(currentComment.createdAt) }}
-        </p>
-      </div>
-
-      <el-form
-        :model="replyForm"
-        :rules="replyRules"
-        ref="replyFormRef"
-        label-width="80px"
-        class="reply-form"
-      >
-        <el-form-item label="回复内容" prop="commentText">
-          <el-input
-            v-model="replyForm.commentText"
-            type="textarea"
-            :rows="4"
-            placeholder="请输入回复内容"
-          />
-        </el-form-item>
-      </el-form>
-
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="replyDialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleSaveReply">提交回复</el-button>
-        </span>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
-import { Refresh } from '@element-plus/icons-vue'
 import axios from 'axios'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+import { StorageManager } from '@/utils/storage'
+
+// 基础配置
+const baseAPI = 'http://localhost:8080'
 
 // 接口类型定义
+interface Branch {
+  branchId: number
+  branchName: string
+  branchAddress: string
+  branchStatus: string
+  branchBoss: string
+}
+
 interface Comment {
   commentId: number
   commentText: string
   commentDishId: number
-  commentAccountId: string
+  commentAccountId: number
   commentRating: number
-  isDeleted: number
-  deletedAt: string | null
+  parentCommentId: number | null
+  isDeleted?: number
+  deletedAt?: string
   createdAt: string
-  updatedId: number | null
-  // 附加信息
-  dishName: string
-  accountName: string
+  updatedAt?: string
   replies?: Comment[]
+  dishName?: string
+  accountName?: string
 }
 
-interface SearchForm {
+interface Dish {
+  dishId: number
   dishName: string
-  rating: string
-  commentType: string
 }
 
-interface Pagination {
-  currentPage: number
-  pageSize: number
+interface PageData {
+  records: Comment[]
   total: number
+  current: number
+  size: number
+  pages: number
 }
 
 // 响应式数据
 const loading = ref(false)
-const tableData = ref<Comment[]>([])
-const detailDialogVisible = ref(false)
-const replyDialogVisible = ref(false)
-const currentComment = ref<Comment | null>(null)
-const replyFormRef = ref<FormInstance>()
-const loadingReplies = ref<Record<number, boolean>>({})
+const replyLoading = ref(false)
+const currentBranch = ref<Branch | null>(null)
+const commentList = ref<Comment[]>([])
+const dishList = ref<Dish[]>([])
 
-// 搜索表单
-const searchForm = reactive<SearchForm>({
-  dishName: '',
-  rating: '',
-  commentType: '',
+// 分页参数
+const pagination = reactive({
+  current: 1,
+  size: 10,
+  total: 0
 })
 
-// 分页数据
-const pagination = reactive<Pagination>({
-  currentPage: 1,
-  pageSize: 10,
-  total: 0,
+// 搜索参数
+const searchForm = reactive({
+  dishName: '',
+  rating: ''
 })
 
 // 回复表单
 const replyForm = reactive({
-  commentText: '',
-  commentDishId: 0,
-  parentCommentId: 0,
+  commentParentId: 0,
+  content: ''
 })
 
-const branch = reactive({
-  branch_id: 1,
-  branch_name: '中山路总店',
-  branch_address: '广东省深圳市福田区中山路123号',
-  branch_phone: '0755-88888888',
-  branch_start: '08:00',
-  branch_end: '22:00',
-  branch_status: '营业中',
-  branch_boss: 'ACC001',
-  is_deleted: 0,
-  deleted_at: null,
-  created_at: '2025-06-15 13:29:22',
-  updated_at: '2025-06-15 15:21:51',
-})
+const replyFormRef = ref<FormInstance>()
+const replyDialogVisible = ref(false)
+const currentComment = ref<Comment | null>(null)
+
+// 评分选项
+const ratingOptions = [
+  { label: '全部评分', value: '' },
+  { label: '1星', value: '1' },
+  { label: '2星', value: '2' },
+  { label: '3星', value: '3' },
+  { label: '4星', value: '4' },
+  { label: '5星', value: '5' }
+]
 
 // 回复表单验证规则
 const replyRules = {
-  commentText: [{ required: true, message: '请输入回复内容', trigger: 'blur' }],
+  content: [
+    { required: true, message: '请输入回复内容', trigger: 'blur' },
+    { min: 1, max: 500, message: '回复内容长度在1到500个字符', trigger: 'blur' }
+  ]
 }
 
-// API 基础URL
-const API_BASE_URL = 'http://localhost:8080/api'
+// 获取本地存储的accountId
+const getAccountId = (): number | null => {
+  const userInfo = StorageManager.getUserInfo()
+  return userInfo ? userInfo.accountId : null
+}
+
+// 根据负责人查询分店信息
+const fetchBranchInfo = async (): Promise<void> => {
+  const accountId = getAccountId()
+  if (!accountId) {
+    ElMessage.error('未找到账户信息，请重新登录')
+    return
+  }
+
+  try {
+    loading.value = true
+    const response = await axios.get(`${baseAPI}/branch/branch/by-boss/${accountId}`)
+    
+    if (response.data.code === 200 && response.data.data.length > 0) {
+      currentBranch.value = response.data.data[0]
+      await fetchDishList()
+      await fetchCommentList()
+    } else {
+      ElMessage.warning('未找到您管理的分店信息')
+    }
+  } catch (error) {
+    console.error('获取分店信息失败:', error)
+    ElMessage.error('获取分店信息失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取分店菜品列表
+const fetchDishList = async (): Promise<void> => {
+  if (!currentBranch.value) return
+
+  try {
+    const response = await axios.get(`${baseAPI}/branch/dishes/branch/${currentBranch.value.branchId}/all`)
+    
+    if (response.data.code === 200) {
+      dishList.value = response.data.data
+    }
+  } catch (error) {
+    console.error('获取菜品列表失败:', error)
+  }
+}
 
 // 获取评论列表
-const fetchComments = async () => {
-  loading.value = true
+const fetchCommentList = async (): Promise<void> => {
+  if (!currentBranch.value) return
+
   try {
+    loading.value = true
     const params = {
-      page: pagination.currentPage,
-      size: pagination.pageSize,
-      dishName: searchForm.dishName,
-      rating: searchForm.rating,
-      commentType: searchForm.commentType,
+      page: pagination.current,
+      size: pagination.size,
+      dishName: searchForm.dishName || undefined,
+      rating: searchForm.rating || undefined
     }
 
-    // 使用新的API端点，根据店铺ID获取评论列表
-    const response = await axios.get(
-      `${API_BASE_URL}/comments/branch/${branch.branch_id}/with-replies`,
-      { params },
-    )
-    tableData.value = response.data.data.records || []
-    pagination.total = response.data.data.total
+    const response = await axios.get(`${baseAPI}/branch/comments/branch/${currentBranch.value.branchId}/with-replies`, { params })
+    
+    if (response.data.code === 200) {
+      const pageData: PageData = response.data.data
+      commentList.value = pageData.records
+      pagination.total = pageData.total
+      pagination.current = pageData.current
+    } else {
+      ElMessage.error(response.data.msg || '获取评论列表失败')
+    }
   } catch (error) {
     console.error('获取评论列表失败:', error)
     ElMessage.error('获取评论列表失败')
@@ -356,242 +173,478 @@ const fetchComments = async () => {
   }
 }
 
-// 格式化日期时间
-const formatDateTime = (dateStr: string) => {
-  if (!dateStr) return ''
-  const date = new Date(dateStr)
-  return date.toLocaleString('zh-CN')
-}
-
-// 搜索
-const handleSearch = () => {
-  pagination.currentPage = 1
-  fetchComments()
+// 搜索评论
+const handleSearch = (): void => {
+  pagination.current = 1
+  fetchCommentList()
 }
 
 // 重置搜索
-const handleReset = () => {
-  Object.assign(searchForm, {
-    dishName: '',
-    rating: '',
-    commentType: '',
-  })
-  pagination.currentPage = 1
-  fetchComments()
+const handleReset = (): void => {
+  searchForm.dishName = ''
+  searchForm.rating = ''
+  pagination.current = 1
+  fetchCommentList()
 }
 
-// 刷新数据
-const handleRefresh = () => {
-  fetchComments()
+// 分页改变
+const handlePageChange = (page: number): void => {
+  pagination.current = page
+  fetchCommentList()
 }
 
-// 分页大小改变
-const handleSizeChange = (size: number) => {
-  pagination.pageSize = size
-  fetchComments()
+const handleSizeChange = (size: number): void => {
+  pagination.size = size
+  pagination.current = 1
+  fetchCommentList()
 }
 
-// 当前页改变
-const handleCurrentChange = (page: number) => {
-  pagination.currentPage = page
-  fetchComments()
-}
-
-// 查看详情
-const handleView = async (comment: Comment) => {
-  try {
-    // 根据店铺ID和菜品ID获取评论详情
-    const response = await axios.get(
-      `${API_BASE_URL}/comments/branch/${branch.branch_id}/dish/${comment.commentDishId}`,
-    )
-
-    // 从返回的评论列表中找到当前评论
-    const comments = response.data.data || []
-    const currentCommentDetail = comments.find((c: Comment) => c.commentId === comment.commentId)
-
-    if (currentCommentDetail) {
-      currentComment.value = currentCommentDetail
-
-      // 获取所有回复评论
-      const replies = comments.filter((c: Comment) => c.updatedId === comment.commentId)
-      if (replies && replies.length > 0) {
-        // 确保回复按时间排序
-        if (currentComment.value) {
-          currentComment.value.replies = replies.sort(
-            (a: Comment, b: Comment) =>
-              new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
-          )
-        }
-      }
-
-      detailDialogVisible.value = true
-    } else {
-      ElMessage.warning('未找到评论详情')
-    }
-  } catch (error) {
-    console.error('获取评论详情失败:', error)
-    ElMessage.error('获取评论详情失败')
+// 打开回复对话框
+const openReplyDialog = (comment: Comment): void => {
+  currentComment.value = comment
+  replyForm.commentParentId = comment.commentId
+  replyForm.content = ''
+  replyDialogVisible.value = true
+  
+  // 清除之前的验证状态
+  if (replyFormRef.value) {
+    replyFormRef.value.clearValidate()
   }
 }
 
-// 回复评论
-const handleReply = (comment: Comment) => {
-  currentComment.value = comment
-  replyForm.commentDishId = comment.commentDishId
-  replyForm.parentCommentId = comment.commentId
-  replyForm.commentText = ''
-  replyDialogVisible.value = true
+// 关闭回复对话框
+const closeReplyDialog = (): void => {
+  replyDialogVisible.value = false
+  replyForm.content = ''
+  replyForm.commentParentId = 0
+  currentComment.value = null
+  
+  if (replyFormRef.value) {
+    replyFormRef.value.clearValidate()
+  }
 }
 
-// 保存回复
-const handleSaveReply = async () => {
+// 提交回复 - 修复版本
+const submitReply = async (): Promise<void> => {
   if (!replyFormRef.value) return
 
   try {
-    // 使用 Promise 形式的 validate 以正确处理异步验证
-    const valid = await replyFormRef.value.validate()
+    await replyFormRef.value.validate()
+    replyLoading.value = true
 
-    if (valid) {
-      // 提交回复，使用新的API端点，包含店铺ID
-      const response = await axios.post(
-        `${API_BASE_URL}/comments/branch/${branch.branch_id}/reply`,
-        {
-          commentText: replyForm.commentText,
-          commentDishId: replyForm.commentDishId,
-          updatedId: replyForm.parentCommentId,
-          commentRating: 5, // 使用默认评分5，而不是null，避免后端验证失败
-        },
-      )
+    const accountId = getAccountId()
+    if (!accountId) {
+      ElMessage.error('未找到账户信息，请重新登录')
+      replyLoading.value = false
+      return
+    }
 
+    if (!currentComment.value) {
+      ElMessage.error('评论信息缺失')
+      replyLoading.value = false
+      return
+    }
+
+    // 按照API文档要求构造完整的Comment对象
+    const postData = {
+      commentText: replyForm.content,
+      commentDishId: currentComment.value.commentDishId, // 使用原评论的菜品ID
+      commentAccountId: accountId,
+      commentRating: 0, // 回复评论没有评分
+      parentCommentId: replyForm.commentParentId, // 父评论ID
+      isDeleted: 0,
+      deletedAt: "",
+      createdAt: "",
+      updatedAt: "",
+      replies: [],
+      dishName: "",
+      accountName: ""
+    }
+
+    console.log('发送回复请求:', postData) // 调试日志
+
+    const response = await axios.post(`${baseAPI}/branch/comments/reply`, postData)
+    
+    if (response.data.code === 200) {
       ElMessage.success('回复成功')
-      replyDialogVisible.value = false
-
-      // 回复成功后重新获取评论列表
-      fetchComments()
+      closeReplyDialog()
+      await fetchCommentList()
+    } else {
+      ElMessage.error(response.data.msg || '回复失败')
     }
   } catch (error) {
     console.error('回复失败:', error)
-    ElMessage.error(typeof error === 'string' ? error : '回复失败')
+    if (axios.isAxiosError(error)) {
+      const errorMsg = error.response?.data?.msg || error.message || '网络错误'
+      ElMessage.error(`回复失败: ${errorMsg}`)
+    } else {
+      ElMessage.error('回复失败')
+    }
+  } finally {
+    replyLoading.value = false
   }
 }
 
 // 删除评论
-const handleDelete = async (comment: Comment) => {
+const deleteComment = async (commentId: number): Promise<void> => {
   try {
-    await ElMessageBox.confirm('确定要删除此评论吗？', '删除确认', {
+    await ElMessageBox.confirm('确定要删除这条评论吗？', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
-      type: 'warning',
+      type: 'warning'
     })
 
-    // 使用新的API端点，包含店铺ID
-    await axios.delete(`${API_BASE_URL}/comments/branch/${branch.branch_id}/${comment.commentId}`)
-    ElMessage.success('删除成功')
-    fetchComments()
+    const response = await axios.delete(`${baseAPI}/branch/comments/${commentId}`)
+    
+    if (response.data.code === 200) {
+      ElMessage.success('删除成功')
+      await fetchCommentList()
+    } else {
+      ElMessage.error(response.data.msg || '删除失败')
+    }
   } catch (error) {
     if (error !== 'cancel') {
-      console.error('删除失败:', error)
+      console.error('删除评论失败:', error)
       ElMessage.error('删除失败')
     }
   }
 }
 
-// 组件挂载时获取数据
+// 获取评分星级显示
+const getStarRating = (rating: number): string => {
+  return '★'.repeat(rating) + '☆'.repeat(5 - rating)
+}
+
+// 格式化时间
+const formatTime = (timeStr: string): string => {
+  return new Date(timeStr).toLocaleString('zh-CN')
+}
+
+// 获取菜品名称
+const getDishName = (dishId: number): string => {
+  const dish = dishList.value.find(d => d.dishId === dishId)
+  return dish ? dish.dishName : '未知菜品'
+}
+
+// 页面初始化
 onMounted(() => {
-  // 默认只获取主评论
-  searchForm.commentType = 'main'
-  fetchComments()
+  fetchBranchInfo()
 })
 </script>
 
+<template>
+  <div class="review-management">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <h2>评价管理</h2>
+      <div v-if="currentBranch" class="branch-info">
+        <el-tag type="primary" size="large">
+          {{ currentBranch.branchName }}
+        </el-tag>
+        <span class="branch-address">{{ currentBranch.branchAddress }}</span>
+      </div>
+    </div>
+
+    <!-- 搜索区域 -->
+    <el-card class="search-card" shadow="never">
+      <el-form :model="searchForm" inline>
+        <el-form-item label="菜品名称">
+          <el-input
+            v-model="searchForm.dishName"
+            placeholder="输入菜品名称"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="评分">
+          <el-select
+            v-model="searchForm.rating"
+            placeholder="选择评分"
+            clearable
+            style="width: 120px"
+          >
+            <el-option
+              v-for="option in ratingOptions"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch" :loading="loading">
+            搜索
+          </el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 评论列表 -->
+    <el-card class="comment-card" shadow="never">
+      <div v-loading="loading">
+        <div v-if="commentList.length === 0" class="empty-state">
+          <el-empty description="暂无评论数据" />
+        </div>
+        
+        <div v-else class="comment-list">
+          <div v-for="comment in commentList" :key="comment.commentId" class="comment-item">
+            <!-- 主评论 -->
+            <div class="main-comment">
+              <div class="comment-header">
+                <div class="user-info">
+                  <el-avatar :size="40" :src="comment.accountName || ''" />
+                  <div class="user-details">
+                    <div class="username">{{ comment.accountName || '匿名用户' }}</div>
+                    <div class="comment-time">{{ formatTime(comment.createdAt) }}</div>
+                  </div>
+                </div>
+                <div class="rating">
+                  <span class="stars">{{ getStarRating(comment.commentRating || 0) }}</span>
+                  <span class="rating-text">{{ comment.commentRating || 0 }}分</span>
+                </div>
+              </div>
+              
+              <div class="dish-info">
+                <el-tag size="small" type="info">{{ getDishName(comment.commentDishId) }}</el-tag>
+              </div>
+              
+              <div class="comment-content">
+                {{ comment.commentText }}
+              </div>
+              
+              <div class="comment-actions">
+                <el-button size="small" type="primary" text @click="openReplyDialog(comment)">
+                  回复
+                </el-button>
+                <el-button size="small" type="danger" text @click="deleteComment(comment.commentId)">
+                  删除
+                </el-button>
+              </div>
+            </div>
+
+            <!-- 回复列表 -->
+            <div v-if="comment.replies && comment.replies.length > 0" class="replies">
+              <div v-for="reply in comment.replies" :key="reply.commentId" class="reply-item">
+                <div class="reply-header">
+                  <div class="reply-user">
+                    <el-avatar :size="30" :src="reply.accountName || ''" />
+                    <span class="reply-username">{{ reply.accountName || '商家' }}</span>
+                    <el-tag size="small" type="success">回复</el-tag>
+                  </div>
+                  <div class="reply-time">{{ formatTime(reply.createdAt) }}</div>
+                </div>
+                <div class="reply-content">{{ reply.commentText }}</div>
+                <div class="reply-actions">
+                  <el-button size="small" type="danger" text @click="deleteComment(reply.commentId)">
+                    删除
+                  </el-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination-wrapper">
+        <el-pagination
+          v-model:current-page="pagination.current"
+          v-model:page-size="pagination.size"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="sizes, prev, pager, next, jumper, total"
+          @size-change="handleSizeChange"
+          @current-change="handlePageChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 回复对话框 -->
+    <el-dialog
+      v-model="replyDialogVisible"
+      title="回复评论"
+      width="500px"
+      :close-on-click-modal="false"
+      @close="closeReplyDialog"
+    >
+      <div v-if="currentComment" class="reply-dialog-content">
+        <div class="original-comment">
+          <div class="original-comment-header">
+            <span class="label">原评论:</span>
+            <span class="dish-name">{{ getDishName(currentComment.commentDishId) }}</span>
+            <span class="rating">{{ getStarRating(currentComment.commentRating || 0) }}</span>
+          </div>
+          <div class="original-comment-text">{{ currentComment.commentText }}</div>
+        </div>
+
+        <el-form ref="replyFormRef" :model="replyForm" :rules="replyRules">
+          <el-form-item label="回复内容" prop="content">
+            <el-input
+              v-model="replyForm.content"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入回复内容..."
+              maxlength="500"
+              show-word-limit
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeReplyDialog">取消</el-button>
+          <el-button type="primary" @click="submitReply" :loading="replyLoading">
+            发送回复
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
 <style scoped>
-.store-reviews {
-  padding: 0px;
+.review-management {
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: 100vh;
 }
 
-.card-header {
+.page-header {
+  margin-bottom: 20px;
+}
+
+.page-header h2 {
+  margin: 0 0 10px 0;
+  color: #303133;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.branch-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.branch-address {
+  color: #606266;
+  font-size: 14px;
+}
+
+.search-card {
+  margin-bottom: 20px;
+}
+
+.comment-card {
+  margin-bottom: 20px;
+}
+
+.empty-state {
+  padding: 40px 0;
+  text-align: center;
+}
+
+.comment-list {
+  space-y: 16px;
+}
+
+.comment-item {
+  border-bottom: 1px solid #ebeef5;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+}
+
+.comment-item:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.main-comment {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  border: 1px solid #e4e7ed;
+}
+
+.comment-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
+  margin-bottom: 12px;
 }
 
-.header-left {
+.user-info {
   display: flex;
   align-items: center;
+  gap: 12px;
 }
 
-.branch-tag {
-  margin-left: 10px;
-}
-
-.search-bar {
-  margin-bottom: 5px;
-}
-
-.search-form {
-  background: #f5f7fa;
-  padding: 10px;
-  border-radius: 4px;
-}
-
-.pagination-wrapper {
-  margin-top: 10px;
+.user-details {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.username {
+  font-weight: 600;
+  color: #303133;
+  font-size: 14px;
+}
+
+.comment-time {
+  color: #909399;
+  font-size: 12px;
+}
+
+.rating {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.stars {
+  color: #f7ba2a;
+  font-size: 16px;
+}
+
+.rating-text {
+  color: #606266;
+  font-size: 14px;
+}
+
+.dish-info {
+  margin-bottom: 12px;
 }
 
 .comment-content {
+  color: #303133;
+  line-height: 1.6;
+  margin-bottom: 12px;
   word-break: break-word;
-  line-height: 1.5;
 }
 
-.reply-tag {
-  background-color: #409eff;
-  color: white;
-  font-size: 12px;
-  padding: 2px 6px;
-  border-radius: 4px;
-  margin-right: 6px;
+.comment-actions {
+  display: flex;
+  gap: 8px;
 }
 
-.comment-detail {
-  margin-bottom: 20px;
+.replies {
+  margin-top: 16px;
+  padding-left: 20px;
+  border-left: 3px solid #e4e7ed;
 }
 
-.replies-section {
-  margin-top: 20px;
-}
-
-.original-comment {
-  margin-bottom: 20px;
-  padding: 10px;
-  background-color: #f5f7fa;
-  border-radius: 4px;
-}
-
-.original-comment h4 {
-  margin-top: 0;
+.reply-item {
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  padding: 12px;
   margin-bottom: 8px;
 }
 
-.comment-info {
-  font-size: 12px;
-  color: #999;
-  margin-top: 5px;
-}
-
-.reply-form {
-  margin-top: 15px;
-}
-
-.reply-list {
-  padding: 10px 20px;
-}
-
-.no-replies {
-  padding: 20px;
-  text-align: center;
-  color: #999;
+.reply-item:last-child {
+  margin-bottom: 0;
 }
 
 .reply-header {
@@ -602,6 +655,80 @@ onMounted(() => {
 }
 
 .reply-user {
-  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
-</style>
+
+.reply-username {
+  font-weight: 500;
+  color: #303133;
+  font-size: 13px;
+}
+
+.reply-time {
+  color: #909399;
+  font-size: 12px;
+}
+
+.reply-content {
+  color: #303133;
+  line-height: 1.5;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.reply-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.pagination-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+.reply-dialog-content {
+  space-y: 16px;
+}
+
+.original-comment {
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  padding: 12px;
+  margin-bottom: 20px;
+}
+
+.original-comment-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.label {
+  font-weight: 600;
+  color: #606266;
+  font-size: 13px;
+}
+
+.dish-name {
+  color: #409eff;
+  font-size: 13px;
+}
+
+.original-comment-text {
+  color: #303133;
+  line-height: 1.5;
+  font-size: 14px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/merchant/Stores/StoreInfo.vue b/src/views/merchant/Stores/StoreInfo.vue
index 5dd3c2d..066d63f 100644
--- a/src/views/merchant/Stores/StoreInfo.vue
+++ b/src/views/merchant/Stores/StoreInfo.vue
@@ -1,718 +1,743 @@
 <template>
-  <div class="store-info">
-    <el-card class="header-card">
-      <el-row :gutter="24">
-        <el-col :span="18">
-          <div class="card-header">
-            <span class="header-title">分店信息管理</span>
-          </div>
-        </el-col>
-        <el-col :span="6">
-          <div class="function-selector">
-            <el-radio-group v-model="activeTab" size="large">
-              <el-radio-button :value="1">基础信息</el-radio-button>
-              <el-radio-button :value="2">营业状况</el-radio-button>
-            </el-radio-group>
-          </div>
-        </el-col>
-      </el-row>
-    </el-card>
+  <div class="store-info-container">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1>店铺信息管理</h1>
+      <div class="header-actions">
+        <el-button @click="refreshData" :icon="Refresh">刷新</el-button>
+      </div>
+    </div>
 
-    <!-- 基础信息表单 -->
-    <el-card v-if="activeTab === 1" class="form-card" v-loading="loading">
-      <template #header>
-        <span class="card-title">基础信息设置</span>
-      </template>
+    <!-- 标签页切换 -->
+    <el-tabs v-model="activeTab" class="store-tabs">
+      <el-tab-pane label="基础信息" name="basic">
+        <el-card class="info-card" v-loading="loading.basic">
+          <el-form
+            ref="basicFormRef"
+            :model="formData.basic"
+            :rules="rules.basic"
+            label-width="120px"
+          >
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="分店名称" prop="branchName">
+                  <el-input
+                    v-model="formData.basic.branchName"
+                    placeholder="请输入分店名称"
+                    clearable
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="联系电话" prop="branchPhone">
+                  <el-input
+                    v-model="formData.basic.branchPhone"
+                    placeholder="请输入联系电话"
+                    clearable
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
 
-      <el-form
-        ref="basicFormRef"
-        :model="basicForm"
-        :rules="basicRules"
-        label-width="120px"
-        class="basic-form"
-      >
-        <el-row :gutter="24">
-          <el-col :span="12">
-            <el-form-item label="分店名称" prop="branchName">
-              <el-input v-model="basicForm.branchName" placeholder="请输入分店名称" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="分店电话" prop="branchPhone">
+            <el-form-item label="店铺地址" prop="branchAddress">
               <el-input
-                v-model="basicForm.branchPhone"
-                placeholder="请输入分店联系电话"
+                v-model="formData.basic.branchAddress"
+                placeholder="请输入完整地址（省市区街道门牌号）"
                 clearable
-              />
+                @blur="handleAddressBlur"
+              >
+                <template #append>
+                  <el-button @click="parseAddress" :loading="parsing">
+                    <el-icon><Location /></el-icon>
+                    解析地址
+                  </el-button>
+                </template>
+              </el-input>
             </el-form-item>
-          </el-col>
-        </el-row>
 
-        <el-row :gutter="24">
-          <el-col :span="24">
-            <el-form-item label="分店地址" prop="branchAddress">
-              <div class="address-selector">
-                <el-select
-                  v-model="addressForm.province"
-                  placeholder="请选择省份"
-                  @change="onProvinceChange"
-                  style="width: 150px; margin-right: 12px"
-                >
-                  <el-option
-                    v-for="province in provinces"
-                    :key="province.adcode"
-                    :label="province.name"
-                    :value="province.adcode"
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="经度" prop="longitude">
+                  <el-input-number
+                    v-model="formData.basic.longitude"
+                    :precision="6"
+                    :min="-180"
+                    :max="180"
+                    placeholder="经度"
+                    style="width: 100%"
                   />
-                </el-select>
-                <el-select
-                  v-model="addressForm.city"
-                  placeholder="请选择城市"
-                  @change="onCityChange"
-                  style="width: 150px; margin-right: 12px"
-                >
-                  <el-option
-                    v-for="city in cities"
-                    :key="city.adcode"
-                    :label="city.name"
-                    :value="city.adcode"
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="纬度" prop="latitude">
+                  <el-input-number
+                    v-model="formData.basic.latitude"
+                    :precision="6"
+                    :min="-90"
+                    :max="90"
+                    placeholder="纬度"
+                    style="width: 100%"
                   />
-                </el-select>
-                <el-select
-                  v-model="addressForm.district"
-                  placeholder="请选择区域"
-                  @change="onDistrictChange"
-                  style="width: 150px; margin-right: 12px"
-                >
-                  <el-option
-                    v-for="district in districts"
-                    :key="district.adcode"
-                    :label="district.name"
-                    :value="district.adcode"
-                  />
-                </el-select>
-              </div>
-              <el-input
-                v-model="basicForm.branchAddress"
-                placeholder="请输入详细地址"
-                style="margin-top: 12px"
-                clearable
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
 
-        <!-- 地图组件 -->
-        <el-row :gutter="24">
-          <el-col :span="24">
-            <el-form-item label="位置地图">
+            <!-- 地图组件 -->
+            <el-form-item label="地图定位">
               <Map
-                :province="getProvinceName(addressForm.province)"
-                :city="getCityName(addressForm.city)"
-                :district="getDistrictName(addressForm.district)"
-                :address="basicForm.branchAddress"
-                @update-address="onMapAddressUpdate"
+                ref="mapRef"
+                :address="formData.basic.branchAddress"
+                :longitude="formData.basic.longitude"
+                :latitude="formData.basic.latitude"
+                @update-location="handleLocationUpdate"
               />
             </el-form-item>
-          </el-col>
-        </el-row>
 
-        <el-row :gutter="24">
-          <el-col :span="12">
-            <el-form-item label="分店负责人" prop="branchBoss">
-              <el-input
-                v-model="basicForm.branchBoss"
-                disabled
-                placeholder="请输入分店负责人"
-                clearable
-              />
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="省份" prop="province">
+                  <el-input
+                    v-model="formData.basic.province"
+                    placeholder="自动解析省份"
+                    disabled
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="负责人" prop="branchBoss">
+                  <el-input
+                    v-model="formData.basic.branchBoss"
+                    disabled
+                    placeholder="店铺负责人"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-form-item>
+              <el-button type="primary" @click="saveBasicInfo" :loading="saving.basic">
+                保存基础信息
+              </el-button>
+              <el-button @click="resetForm('basic')">重置</el-button>
             </el-form-item>
-          </el-col>
-        </el-row>
+          </el-form>
+        </el-card>
+      </el-tab-pane>
 
-        <el-form-item class="form-actions">
-          <el-button type="primary" @click="saveBasicInfo" :loading="saving">
-            <el-icon><Check /></el-icon>
-            保存信息
-          </el-button>
-          <el-button @click="resetBasicForm">
-            <el-icon><Refresh /></el-icon>
-            重置
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-
-    <!-- 营业状况表单 -->
-    <el-card v-if="activeTab === 2" class="form-card" v-loading="loading">
-      <template #header>
-        <span class="card-title">营业状况设置</span>
-      </template>
-
-      <el-form
-        ref="businessFormRef"
-        :model="businessForm"
-        :rules="businessRules"
-        label-width="120px"
-        class="business-form"
-      >
-        <el-row :gutter="24">
-          <el-col :span="12">
+      <el-tab-pane label="营业信息" name="business">
+        <el-card class="info-card" v-loading="loading.business">
+          <el-form
+            ref="businessFormRef"
+            :model="formData.business"
+            :rules="rules.business"
+            label-width="120px"
+          >
             <el-form-item label="营业状态" prop="branchStatus">
-              <el-radio-group v-model="businessForm.branchStatus">
-                <el-radio value="营业中">
-                  <el-tag type="success">营业中</el-tag>
-                </el-radio>
-                <el-radio value="暂停营业">
-                  <el-tag type="warning">暂停营业</el-tag>
-                </el-radio>
-                <el-radio value="停业整顿">
-                  <el-tag type="danger">停业整顿</el-tag>
-                </el-radio>
-              </el-radio-group>
+              <el-select
+                v-model="formData.business.branchStatus"
+                placeholder="请选择营业状态"
+                style="width: 100%"
+              >
+                <el-option label="营业中" value="open" />
+                <el-option label="休息中" value="closed" />
+              </el-select>
             </el-form-item>
-          </el-col>
-        </el-row>
 
-        <el-row :gutter="24">
-          <el-col :span="24">
-            <el-form-item label="营业时间" prop="businessHours">
-              <div class="time-range">
-                <el-time-picker
-                  v-model="businessForm.branchStart"
-                  placeholder="营业开始时间"
-                  format="HH:mm"
-                  value-format="HH:mm"
-                  style="width: 150px"
-                />
-                <span class="time-separator">至</span>
-                <el-time-picker
-                  v-model="businessForm.branchEnd"
-                  placeholder="营业结束时间"
-                  format="HH:mm"
-                  value-format="HH:mm"
-                  style="width: 150px"
-                />
-              </div>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="开始时间" prop="branchStart">
+                  <el-time-picker
+                    v-model="formData.business.branchStart"
+                    placeholder="选择开始时间"
+                    format="HH:mm"
+                    value-format="HH:mm"
+                    style="width: 100%"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="结束时间" prop="branchEnd">
+                  <el-time-picker
+                    v-model="formData.business.branchEnd"
+                    placeholder="选择结束时间"
+                    format="HH:mm"
+                    value-format="HH:mm"
+                    style="width: 100%"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-form-item>
+              <el-button type="primary" @click="saveBusinessInfo" :loading="saving.business">
+                保存营业信息
+              </el-button>
+              <el-button @click="resetForm('business')">重置</el-button>
             </el-form-item>
-          </el-col>
-        </el-row>
+          </el-form>
+        </el-card>
+      </el-tab-pane>
 
-        <el-form-item class="form-actions">
-          <el-button type="primary" @click="saveBusinessInfo" :loading="saving">
-            <el-icon><Check /></el-icon>
-            保存设置
-          </el-button>
-          <el-button @click="resetBusinessForm">
-            <el-icon><Refresh /></el-icon>
-            重置
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+      <el-tab-pane label="店铺列表" name="list">
+        <el-card class="info-card">
+          <!-- 搜索栏 -->
+          <div class="search-bar">
+            <el-input
+              v-model="searchParams.keyword"
+              placeholder="搜索分店名称"
+              clearable
+              style="width: 200px"
+              @clear="fetchBranchList"
+            />
+            <el-select
+              v-model="searchParams.branchStatus"
+              placeholder="营业状态"
+              clearable
+              style="width: 150px; margin-left: 10px"
+              @change="fetchBranchList"
+            >
+              <el-option label="营业中" value="open" />
+              <el-option label="休息中" value="closed" />
+            </el-select>
+            <el-button type="primary" @click="fetchBranchList" style="margin-left: 10px">
+              搜索
+            </el-button>
+          </div>
+
+          <!-- 表格 -->
+          <el-table
+            :data="branchList"
+            v-loading="loading.list"
+            style="width: 100%; margin-top: 20px"
+          >
+            <el-table-column prop="branchName" label="分店名称" min-width="150" />
+            <el-table-column prop="branchAddress" label="地址" min-width="200" />
+            <el-table-column prop="branchPhone" label="联系电话" width="120" />
+            <el-table-column prop="branchStatus" label="状态" width="100">
+              <template #default="{ row }">
+                <el-tag :type="row.branchStatus === 'open' ? 'success' : 'info'">
+                  {{ row.branchStatus === 'open' ? '营业中' : '休息中' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="营业时间" width="150">
+              <template #default="{ row }">
+                {{ row.branchStart }} - {{ row.branchEnd }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="150" fixed="right">
+              <template #default="{ row }">
+                <el-button type="primary" size="small" @click="editBranch(row)">编辑</el-button>
+                <el-button type="danger" size="small" @click="deleteBranch(row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <!-- 分页 -->
+          <el-pagination
+            v-model:current-page="pagination.current"
+            v-model:page-size="pagination.size"
+            :page-sizes="[10, 20, 50, 100]"
+            :total="pagination.total"
+            layout="total, sizes, prev, pager, next, jumper"
+            style="margin-top: 20px; justify-content: center"
+            @size-change="fetchBranchList"
+            @current-change="fetchBranchList"
+          />
+        </el-card>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from 'vue'
+import { ref, reactive, onMounted, watch, nextTick } from 'vue'
 import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
-import { Check, Refresh, Clock } from '@element-plus/icons-vue'
+import { Refresh, Location } from '@element-plus/icons-vue'
 import axios from 'axios'
 import Map from '@/components/Map.vue'
 
+// 获取本地存储的用户信息
+interface UserInfo {
+  accountId: number
+  accountName: string
+  accountType: string
+}
+
+// 获取用户信息的工具函数
+const getUserInfo = (): UserInfo | null => {
+  const userInfoStr = localStorage.getItem('userInfo')
+  if (userInfoStr) {
+    try {
+      return JSON.parse(userInfoStr)
+    } catch (e) {
+      console.error('解析用户信息失败:', e)
+    }
+  }
+  return null
+}
+
+// 获取accountId
+const getAccountId = (): number | null => {
+  const userInfo = getUserInfo()
+  return userInfo ? userInfo.accountId : null
+}
+
+// 类型定义
+interface Branch {
+  branchId?: number
+  branchName: string
+  branchAddress: string
+  branchPhone?: string
+  branchStart?: string
+  branchEnd?: string
+  branchStatus: string
+  branchBoss?: number
+  province?: string
+  latitude?: number
+  longitude?: number
+}
+
+interface PaginationParams {
+  current: number
+  size: number
+  total: number
+}
+
 // 响应式数据
-const loading = ref(false)
-const saving = ref(false)
-const recordLoading = ref(false)
-const activeTab = ref(1)
-const recordDialogVisible = ref(false)
-const user = reactive({
-  account_id: 'ACC001',
-  account_name: '张三',
-  account_password: 'password123',
-  account_phone: '13800138000',
-  account_type: '员工',
-  account_img: '/images/user001.jpg',
-  account_gender: '男',
-  account_tag: 'VIP',
-  salary: 5000.0,
-  is_deleted: 0,
-})
+const baseURL = 'http://localhost:8080'
+const accountId = ref<number | null>(getAccountId())
+const activeTab = ref('basic')
+const currentBranchId = ref<number | null>(null)
+const parsing = ref(false)
+const mapRef = ref<any>(null)
 
 // 表单引用
-const basicFormRef = ref()
-const businessFormRef = ref()
+const basicFormRef = ref<FormInstance>()
+const businessFormRef = ref<FormInstance>()
 
-// 基础信息表单
-const basicForm = reactive({
-  branchId: 0,
-  branchName: '',
-  branchAddress: '',
-  branchPhone: '',
-  branchBoss: user.account_name,
+// 加载状态
+const loading = reactive({
+  basic: false,
+  business: false,
+  list: false,
 })
 
-// 营业信息表单
-const businessForm = reactive({
-  branchId: 0,
-  branchStatus: '营业中',
-  branchStart: '09:00',
-  branchEnd: '22:00',
+// 保存状态
+const saving = reactive({
+  basic: false,
+  business: false,
 })
 
-// 地址选择表单
-const addressForm = reactive({
-  province: '',
-  city: '',
-  district: '',
+// 表单数据
+const formData = reactive({
+  basic: {
+    branchName: '',
+    branchAddress: '',
+    branchPhone: '',
+    branchBoss: accountId.value,
+    province: '',
+    latitude: null as number | null,
+    longitude: null as number | null,
+  },
+  business: {
+    branchStatus: 'open',
+    branchStart: '09:00',
+    branchEnd: '22:00',
+  },
 })
 
-// 地址选项数据
-interface DistrictItem {
-  adcode: string
-  name: string
+// 搜索参数
+const searchParams = reactive({
+  keyword: '',
+  branchStatus: '',
+})
+
+// 分页参数
+const pagination = reactive<PaginationParams>({
+  current: 1,
+  size: 10,
+  total: 0,
+})
+
+// 分店列表
+const branchList = ref<Branch[]>([])
+
+// 表单验证规则
+const rules = {
+  basic: {
+    branchName: [
+      { required: true, message: '请输入分店名称', trigger: 'blur' },
+      { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' },
+    ],
+    branchAddress: [
+      { required: true, message: '请输入分店地址', trigger: 'blur' },
+      { min: 5, max: 100, message: '长度在 5 到 100 个字符', trigger: 'blur' },
+    ],
+    branchPhone: [
+      { pattern: /^1[3-9]\d{9}$|^\d{3,4}-\d{7,8}$/, message: '请输入正确的电话号码', trigger: 'blur' },
+    ],
+  },
+  business: {
+    branchStatus: [{ required: true, message: '请选择营业状态', trigger: 'change' }],
+    branchStart: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
+    branchEnd: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
+  },
 }
 
-interface BossItem {
-  id: string
-  name: string
-  phone: string
-}
-
-const provinces = ref<DistrictItem[]>([])
-const cities = ref<DistrictItem[]>([])
-const districts = ref<DistrictItem[]>([])
-const bossOptions = ref<BossItem[]>([])
-
-// 修改记录
-const modifyRecords = ref([])
-
-// API 基础URL
-const API_BASE_URL = 'http://localhost:8080/api'
-
-async function fetchDistricts(keywords: string) {
-  try {
-    const response = await axios.get(`${API_BASE_URL}/district`, { params: { keywords } })
-    return response.data[0]?.districts || []
-  } catch (error) {
-    ElMessage.error(`获取行政区划失败 (keywords: ${error}):`)
-    return [] // 出错时返回空数组
+// 处理地址输入框失焦事件
+const handleAddressBlur = () => {
+  if (formData.basic.branchAddress) {
+    parseAddress()
   }
 }
 
-const onProvinceChange = async () => {
-  cities.value = await fetchDistricts(addressForm.province)
-}
-const onCityChange = async () => {
-  districts.value = await fetchDistricts(addressForm.city)
-}
-const onDistrictChange = async () => {
-  // 区域变化处理
-  console.log('区域已变更:', addressForm.district)
+// 解析地址
+const parseAddress = async () => {
+  if (!formData.basic.branchAddress) {
+    ElMessage.warning('请输入地址')
+    return
+  }
+
+  parsing.value = true
+  
+  // 通知地图组件解析地址
+  await nextTick()
+  if (mapRef.value) {
+    mapRef.value.geocodeAddress(formData.basic.branchAddress)
+  }
+  
+  // 从地址中提取省份
+  const provinceMatch = formData.basic.branchAddress.match(/^(.+?(?:省|市|自治区|特别行政区))/)
+  if (provinceMatch) {
+    formData.basic.province = provinceMatch[1].replace(/省|市|自治区|特别行政区/, '')
+  }
+  
+  parsing.value = false
 }
 
-// 获取省份名称
-const getProvinceName = (adcode: string) => {
-  const province = provinces.value.find((p) => p.adcode === adcode)
-  return province?.name || ''
-}
-
-// 获取城市名称
-const getCityName = (adcode: string) => {
-  const city = cities.value.find((c) => c.adcode === adcode)
-  return city?.name || ''
-}
-
-// 获取区域名称
-const getDistrictName = (adcode: string) => {
-  const district = districts.value.find((d) => d.adcode === adcode)
-  return district?.name || ''
-}
-
-// 地图地址更新回调
-const onMapAddressUpdate = (address: string) => {
-  basicForm.branchAddress = address
+// 处理地图位置更新
+const handleLocationUpdate = (data: { 
+  address: string, 
+  longitude: number, 
+  latitude: number,
+  province?: string 
+}) => {
+  formData.basic.branchAddress = data.address
+  formData.basic.longitude = data.longitude
+  formData.basic.latitude = data.latitude
+  
+  if (data.province) {
+    formData.basic.province = data.province.replace(/省|市|自治区|特别行政区/, '')
+  }
+  
   ElMessage.success('地址已更新')
 }
 
+// 获取当前用户的分店信息
+const fetchMyBranch = async () => {
+  if (!accountId.value) {
+    ElMessage.warning('未获取到用户信息')
+    return
+  }
+
+  try {
+    loading.basic = true
+    loading.business = true
+    
+    const response = await axios.get(`${baseURL}/branch/branch/by-boss/${accountId.value}`)
+    
+    if (response.data.code === 200 && response.data.data && response.data.data.length > 0) {
+      const branch = response.data.data[0]
+      currentBranchId.value = branch.branchId
+      
+      // 填充基础信息
+      formData.basic.branchName = branch.branchName || ''
+      formData.basic.branchAddress = branch.branchAddress || ''
+      formData.basic.branchPhone = branch.branchPhone || ''
+      formData.basic.province = branch.province || ''
+      formData.basic.latitude = branch.latitude || null
+      formData.basic.longitude = branch.longitude || null
+      
+      // 填充营业信息
+      formData.business.branchStatus = branch.branchStatus || 'open'
+      formData.business.branchStart = branch.branchStart || '09:00'
+      formData.business.branchEnd = branch.branchEnd || '22:00'
+    }
+  } catch (error) {
+    console.error('获取分店信息失败:', error)
+    ElMessage.error('获取分店信息失败')
+  } finally {
+    loading.basic = false
+    loading.business = false
+  }
+}
+
 // 保存基础信息
 const saveBasicInfo = async () => {
   if (!basicFormRef.value) return
-
-  try {
-    await basicFormRef.value.validate()
-    saving.value = true
-
-    // 构建完整的地址
-    const fullAddress =
-      getProvinceName(addressForm.province) +
-      getCityName(addressForm.city) +
-      getDistrictName(addressForm.district) +
-      basicForm.branchAddress
-
-    // 创建要发送的数据
-    const branchData = {
-      ...basicForm,
-      branchAddress: fullAddress,
-      branchBoss: user.account_id,
-    }
-
-    // 发送请求保存数据
-    const response = await axios.post(`${API_BASE_URL}/branch/basic-info`, branchData)
-
-    if (response.data.code === 200) {
-      // 更新ID（如果是新创建的店铺）
-      if (response.data.data && response.data.data.branchId) {
-        basicForm.branchId = response.data.data.branchId
-        businessForm.branchId = response.data.data.branchId
+  
+  await basicFormRef.value.validate(async (valid) => {
+    if (!valid) return
+    
+    try {
+      saving.basic = true
+      
+      const data: Branch = {
+        ...formData.basic,
+        branchBoss: accountId.value!,
+        branchStatus: formData.business.branchStatus,
       }
-      ElMessage.success(response.data.message || '基础信息保存成功')
-
-      // 重新获取店铺信息
-      await getBasicForm()
-    } else {
-      ElMessage.error(response.data.message || '保存失败')
+      
+      if (currentBranchId.value) {
+        data.branchId = currentBranchId.value
+      }
+      
+      const response = await axios.post(`${baseURL}/branch/branch/basic-info`, data)
+      
+      if (response.data.code === 200) {
+        ElMessage.success('保存成功')
+        if (response.data.data && response.data.data.branchId) {
+          currentBranchId.value = response.data.data.branchId
+        }
+        fetchMyBranch()
+      } else {
+        ElMessage.error(response.data.message || '保存失败')
+      }
+    } catch (error) {
+      console.error('保存基础信息失败:', error)
+      ElMessage.error('保存失败')
+    } finally {
+      saving.basic = false
     }
-  } catch (error: any) {
-    ElMessage.error(`保存失败：${error.response?.data?.message || error.message || '未知错误'}`)
-  } finally {
-    saving.value = false
-  }
-}
-
-// 重置基础表单
-const resetBasicForm = () => {
-  basicFormRef.value?.resetFields()
-  Object.assign(addressForm, {
-    province: '',
-    city: '',
-    district: '',
   })
-  cities.value = []
-  districts.value = []
 }
 
 // 保存营业信息
 const saveBusinessInfo = async () => {
   if (!businessFormRef.value) return
-
-  try {
-    await businessFormRef.value.validate()
-    saving.value = true
-
-    // 检查是否有分店ID
-    if (!businessForm.branchId) {
+  
+  await businessFormRef.value.validate(async (valid) => {
+    if (!valid) return
+    
+    if (!currentBranchId.value) {
       ElMessage.warning('请先保存基础信息')
-      activeTab.value = 1 // 切换到基础信息页签
+      activeTab.value = 'basic'
       return
     }
-
-    // 构建营业信息数据
-    const businessInfo = {
-      branchStatus: businessForm.branchStatus,
-      branchStart: businessForm.branchStart,
-      branchEnd: businessForm.branchEnd,
-    }
-
-    // 发送请求更新营业信息
-    const response = await axios.put(
-      `${API_BASE_URL}/branch/${businessForm.branchId}/business-info`,
-      businessInfo,
-    )
-
-    if (response.data.code === 200) {
-      ElMessage.success(response.data.message || '营业信息更新成功')
-    } else {
-      ElMessage.error(response.data.message || '更新失败')
-    }
-  } catch (error: any) {
-    ElMessage.error(`更新失败：${error.response?.data?.message || error.message || '未知错误'}`)
-  } finally {
-    saving.value = false
-  }
-}
-
-// 重置营业表单
-const resetBusinessForm = () => {
-  businessFormRef.value?.resetFields()
-}
-
-// 表单验证规则
-const basicRules = {
-  branchName: [
-    { required: true, message: '请输入分店名称', trigger: 'blur' },
-    { min: 2, max: 50, message: '分店名称长度在 2 到 50 个字符', trigger: 'blur' },
-  ],
-  branchPhone: [
-    { required: true, message: '请输入分店电话', trigger: 'blur' },
-    {
-      pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/,
-      message: '请输入正确的电话号码',
-      trigger: 'blur',
-    },
-  ],
-  branchAddress: [
-    { required: true, message: '请输入分店地址', trigger: 'blur' },
-    { min: 5, max: 200, message: '地址长度在 5 到 200 个字符', trigger: 'blur' },
-  ],
-  branchBoss: [{ required: true, message: '请选择分店负责人', trigger: 'change' }],
-}
-
-const businessRules = {
-  branchStatus: [{ required: true, message: '请选择营业状态', trigger: 'change' }],
-  businessHours: [
-    {
-      validator: (rule: any, value: any, callback: any) => {
-        if (!businessForm.branchStart || !businessForm.branchEnd) {
-          callback(new Error('请设置完整的营业时间'))
-        } else if (businessForm.branchStart >= businessForm.branchEnd) {
-          callback(new Error('营业结束时间必须晚于开始时间'))
-        } else {
-          callback()
-        }
-      },
-      trigger: 'change',
-    },
-  ],
-}
-
-// 获取基础表单数据
-const getBasicForm = async () => {
-  try {
-    loading.value = true
-
-    const response = await axios.get(`${API_BASE_URL}/branch/by-boss/${user.account_id}`, {})
-
-    if (response.data.code === 200 && response.data.data.length > 0) {
-      const data = response.data.data[0]
-
-      // 基础信息表单赋值
-      basicForm.branchId = data.branchId
-      basicForm.branchName = data.branchName
-      basicForm.branchAddress = data.branchAddress
-      basicForm.branchPhone = data.branchPhone
-
-      // 营业信息表单赋值
-      businessForm.branchId = data.branchId
-      businessForm.branchStatus = data.branchStatus
-      businessForm.branchStart = data.branchStart
-      businessForm.branchEnd = data.branchEnd
-
-      // 简单地址解析
-      const address = data.branchAddress // "广东省深圳市福田区中山路123号"
-      const match = address.match(/^(.+?省)(.+?市)(.+?区)(.*)$/)
-      if (match) {
-        const [, provinceName, cityName, districtName, detailAddr] = match
-
-        // 设置省份
-        const province = provinces.value.find((p) => p.name === provinceName)
-        if (province) {
-          addressForm.province = province.adcode
-          await onProvinceChange()
-
-          // 设置城市
-          const city = cities.value.find((c) => c.name === cityName)
-          if (city) {
-            addressForm.city = city.adcode
-            await onCityChange()
-
-            // 设置区域
-            const district = districts.value.find((d) => d.name === districtName)
-            if (district) {
-              addressForm.district = district.adcode
-            }
-          }
-        }
-
-        // 更新详细地址
-        basicForm.branchAddress = detailAddr
+    
+    try {
+      saving.business = true
+      
+      const response = await axios.put(
+        `${baseURL}/branch/branch/${currentBranchId.value}/business-info`,
+        formData.business
+      )
+      
+      if (response.data.code === 200) {
+        ElMessage.success('更新成功')
+        fetchMyBranch()
+      } else {
+        ElMessage.error(response.data.message || '更新失败')
       }
+    } catch (error) {
+      console.error('更新营业信息失败:', error)
+      ElMessage.error('更新失败')
+    } finally {
+      saving.business = false
+    }
+  })
+}
 
-      ElMessage.success('门店信息加载成功')
+// 获取分店列表
+const fetchBranchList = async () => {
+  try {
+    loading.list = true
+    
+    const params = {
+      current: pagination.current,
+      size: pagination.size,
+      keyword: searchParams.keyword,
+      branchStatus: searchParams.branchStatus,
+      branchBoss: accountId.value,
+    }
+    
+    const response = await axios.get(`${baseURL}/branch/branch/page`, { params })
+    
+    if (response.data.code === 200) {
+      branchList.value = response.data.data.records || []
+      pagination.total = response.data.data.total || 0
+    } else {
+      ElMessage.error(response.data.message || '获取列表失败')
     }
   } catch (error) {
-    ElMessage.error('获取门店信息失败')
+    console.error('获取分店列表失败:', error)
+    ElMessage.error('获取列表失败')
   } finally {
-    loading.value = false
+    loading.list = false
   }
 }
 
-const showModifyRecords = () => {
-  recordDialogVisible.value = true
+// 编辑分店
+const editBranch = (branch: Branch) => {
+  currentBranchId.value = branch.branchId!
+  
+  // 切换到基础信息标签页
+  activeTab.value = 'basic'
+  
+  // 填充表单数据
+  formData.basic.branchName = branch.branchName
+  formData.basic.branchAddress = branch.branchAddress
+  formData.basic.branchPhone = branch.branchPhone || ''
+  formData.basic.province = branch.province || ''
+  formData.basic.latitude = branch.latitude || null
+  formData.basic.longitude = branch.longitude || null
+  
+  formData.business.branchStatus = branch.branchStatus
+  formData.business.branchStart = branch.branchStart || '09:00'
+  formData.business.branchEnd = branch.branchEnd || '22:00'
 }
 
-// 组件挂载时获取数据
-onMounted(async () => {
-  provinces.value = await fetchDistricts('中国')
-  await getBasicForm()
+// 删除分店
+const deleteBranch = async (branch: Branch) => {
+  await ElMessageBox.confirm(`确定要删除分店"${branch.branchName}"吗？`, '删除确认', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+  
+  try {
+    const response = await axios.delete(`${baseURL}/branch/branch/${branch.branchId}`)
+    
+    if (response.data.code === 200) {
+      ElMessage.success('删除成功')
+      fetchBranchList()
+      
+      // 如果删除的是当前编辑的分店，清空表单
+      if (branch.branchId === currentBranchId.value) {
+        currentBranchId.value = null
+        resetForm('basic')
+        resetForm('business')
+      }
+    } else {
+      ElMessage.error(response.data.message || '删除失败')
+    }
+  } catch (error) {
+    console.error('删除分店失败:', error)
+    ElMessage.error('删除失败')
+  }
+}
+
+// 重置表单
+const resetForm = (type: 'basic' | 'business') => {
+  if (type === 'basic') {
+    basicFormRef.value?.resetFields()
+    formData.basic.branchBoss = accountId.value
+    formData.basic.province = ''
+    formData.basic.latitude = null
+    formData.basic.longitude = null
+  } else {
+    businessFormRef.value?.resetFields()
+  }
+}
+
+// 刷新数据
+const refreshData = () => {
+  if (activeTab.value === 'list') {
+    fetchBranchList()
+  } else {
+    fetchMyBranch()
+  }
+}
+
+// 监听标签页切换
+watch(activeTab, (newVal) => {
+  if (newVal === 'list') {
+    fetchBranchList()
+  }
+})
+
+// 页面挂载时执行
+onMounted(() => {
+  if (!accountId.value) {
+    ElMessage.error('未获取到用户信息，请重新登录')
+    return
+  }
+  
+  fetchMyBranch()
 })
 </script>
 
 <style scoped>
-.store-info {
-  padding: 10px;
+.store-info-container {
+  padding: 20px;
   background-color: #f5f7fa;
   min-height: 100vh;
 }
 
-.header-card {
-  margin-bottom: 5px;
-  border-radius: 5px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-}
-
-.card-header {
+.page-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-}
-
-.header-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-}
-
-.header-actions {
-  display: flex;
-  gap: 12px;
-}
-
-.function-selector {
-  margin-top: 5px;
-  text-align: center;
-}
-
-.form-card {
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-}
-
-.card-title {
-  font-size: 16px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.basic-form,
-.business-form {
+  margin-bottom: 20px;
   padding: 20px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
 }
 
-.address-selector {
+.page-header h1 {
+  margin: 0;
+  font-size: 24px;
+  color: #303133;
+}
+
+.store-tabs {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+.info-card {
+  margin-top: 20px;
+  border: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+.search-bar {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 12px;
+  margin-bottom: 20px;
 }
 
-.time-range {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.time-separator {
-  color: var(--el-text-color-secondary);
-  font-weight: 500;
-}
-
-.form-actions {
-  margin-top: 32px;
-  text-align: center;
-}
-
-.form-actions .el-button {
-  min-width: 120px;
-  margin: 0 8px;
-}
-
-/* 表单项样式优化 */
 .el-form-item {
-  margin-bottom: 24px;
+  margin-bottom: 22px;
 }
 
-.el-form-item__label {
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-/* 选择器样式 */
-.el-select .el-select__placeholder {
-  color: var(--el-text-color-placeholder);
-}
-
-/* 单选按钮组样式 */
-.el-radio-group .el-radio {
-  margin-right: 20px;
-}
-
-.el-radio__label {
-  padding-left: 8px;
+.el-tag {
+  cursor: default;
 }
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-  .store-info {
-    padding: 12px;
+  .page-header {
+    flex-direction: column;
+    align-items: flex-start;
   }
 
-  .address-selector {
+  .header-actions {
+    margin-top: 10px;
+  }
+
+  .search-bar {
     flex-direction: column;
     align-items: stretch;
   }
 
-  .address-selector .el-select {
-    width: 100% !important;
-    margin-right: 0 !important;
-    margin-bottom: 12px;
-  }
-
-  .time-range {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 8px;
-  }
-
-  .time-range .el-time-picker {
+  .search-bar > * {
+    margin: 5px 0 !important;
     width: 100% !important;
   }
-
-  .form-actions .el-button {
-    width: 100%;
-    margin: 8px 0;
-  }
-}
-
-/* 表格样式优化 */
-.el-table {
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.el-table th {
-  background-color: var(--el-fill-color-light);
-  font-weight: 600;
-}
-
-/* 标签样式 */
-.el-tag {
-  border-radius: 4px;
-  font-weight: 500;
-}
-
-/* 按钮样式优化 */
-.el-button {
-  border-radius: 6px;
-  font-weight: 500;
-}
-
-.el-button--primary {
-  background: linear-gradient(135deg, #409eff, #66b3ff);
-  border: none;
-}
-
-.el-button--primary:hover {
-  background: linear-gradient(135deg, #66b3ff, #409eff);
 }
 </style>
diff --git a/src/views/merchant/order/OrderManager.vue b/src/views/merchant/order/OrderManager.vue
new file mode 100644
index 0000000..c6ca24e
--- /dev/null
+++ b/src/views/merchant/order/OrderManager.vue
@@ -0,0 +1,579 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue'
+import axios from 'axios'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+
+// 接口类型定义
+interface Order {
+  orderId: number
+  accountId: number
+  orderTime: string
+  branchId: number
+  orderMoney: number
+  orderRemarks?: string
+  orderStatus: number
+  isDeleted: number
+  createdAt: string
+  updatedAt: string
+}
+
+interface OrderDetail extends Order {
+  orderLists: OrderListItem[]
+}
+
+interface OrderListItem {
+  orderListId: number
+  orderId: number
+  dishId: number
+  number: number
+  dishName?: string
+  price?: number
+}
+
+interface ApiResponse<T> {
+  code: number
+  message: string
+  data: T
+}
+
+interface PageData<T> {
+  records: T[]
+  total: number
+  current: number
+  size: number
+  pages: number
+}
+
+// 存储管理器类型
+interface UserInfo {
+  accountId: number
+  branchId?: number
+  accountName?: string
+  accountType?: string
+}
+
+// 模拟StorageManager
+const StorageManager = {
+  getUserInfo: (): UserInfo | null => {
+    const userStr = localStorage.getItem('userInfo')
+    return userStr ? JSON.parse(userStr) : null
+  }
+}
+
+const getAccountId = (): number | null => {
+  const userInfo = StorageManager.getUserInfo()
+  return userInfo ? userInfo.accountId : null
+}
+
+// 响应式数据
+const loading = ref(false)
+const tableData = ref<Order[]>([])
+const total = ref(0)
+const currentPage = ref(1)
+const pageSize = ref(10)
+const branchId = ref<number | null>(null)
+
+// 搜索表单
+const searchForm = reactive({
+  orderStatus: '',
+  accountId: ''
+})
+
+// 订单详情对话框
+const dialogVisible = ref(false)
+const orderDetail = ref<OrderDetail | null>(null)
+const detailLoading = ref(false)
+
+// 状态更新对话框
+const statusDialogVisible = ref(false)
+const selectedOrder = ref<Order | null>(null)
+const newStatus = ref<number>(1)
+
+// 基础API URL
+const BASE_API = 'http://localhost:8080'
+
+// 订单状态映射
+const statusMap = {
+  1: '待处理',
+  2: '已完成',
+  '-1': '已取消'
+}
+
+const statusOptions = [
+  { label: '全部', value: '' },
+  { label: '待处理', value: '1' },
+  { label: '已完成', value: '2' },
+  { label: '已取消', value: '-1' }
+]
+
+// 状态标签类型
+const getStatusType = (status: number) => {
+  switch (status) {
+    case 1: return 'warning'
+    case 2: return 'success'
+    case -1: return 'danger'
+    default: return 'info'
+  }
+}
+
+// 初始化branchId
+const initBranchId = async () => {
+  const accountId = getAccountId()
+  if (!accountId) {
+    ElMessage.error('未获取到用户信息，请重新登录')
+    return
+  }
+  
+  try {
+    // 这里假设当前登录用户就是分店管理员，直接使用一个默认的branchId
+    // 在实际应用中，您可能需要通过API获取当前用户管理的分店ID
+    //branchId.value = 1 // 临时设置，实际应该通过API获取
+    
+    // 或者通过查询分店负责人接口获取branchId
+    const response = await axios.get(`${BASE_API}/branch/branch/by-boss/${accountId}`)
+    if (response.data.code === 200 && response.data.data.length > 0) {
+      branchId.value = response.data.data[0].branchId
+    }
+  } catch (error) {
+    console.error('获取分店信息失败:', error)
+    ElMessage.error('获取分店信息失败')
+  }
+}
+
+// 获取订单列表
+const fetchOrders = async () => {
+  if (!branchId.value) {
+    await initBranchId()
+    if (!branchId.value) return
+  }
+
+  loading.value = true
+  try {
+    const params = {
+      page: currentPage.value,
+      size: pageSize.value,
+      ...(searchForm.orderStatus && { orderStatus: searchForm.orderStatus }),
+      ...(searchForm.accountId && { accountId: searchForm.accountId })
+    }
+
+    const response = await axios.get<ApiResponse<PageData<Order>>>(
+      `${BASE_API}/branch/orders/branch/${branchId.value}`,
+      { params }
+    )
+
+    if (response.data.code === 200) {
+      tableData.value = response.data.data.records
+      total.value = response.data.data.total
+    } else {
+      ElMessage.error(response.data.message || '获取订单列表失败')
+    }
+  } catch (error) {
+    console.error('获取订单列表失败:', error)
+    ElMessage.error('获取订单列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取订单详情
+const fetchOrderDetail = async (orderId: number) => {
+  detailLoading.value = true
+  try {
+    const response = await axios.get<ApiResponse<OrderDetail>>(
+      `${BASE_API}/branch/orders/${orderId}`
+    )
+
+    if (response.data.code === 200) {
+      orderDetail.value = response.data.data
+      dialogVisible.value = true
+    } else {
+      ElMessage.error(response.data.message || '获取订单详情失败')
+    }
+  } catch (error) {
+    console.error('获取订单详情失败:', error)
+    ElMessage.error('获取订单详情失败')
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+// 更新订单状态
+const updateOrderStatus = async () => {
+  if (!selectedOrder.value) return
+
+  try {
+    const response = await axios.patch<ApiResponse<any>>(
+      `${BASE_API}/branch/orders/${selectedOrder.value.orderId}/status`,
+      { orderStatus: newStatus.value }
+    )
+
+    if (response.data.code === 200) {
+      ElMessage.success('订单状态更新成功')
+      statusDialogVisible.value = false
+      await fetchOrders()
+    } else {
+      ElMessage.error(response.data.message || '更新订单状态失败')
+    }
+  } catch (error) {
+    console.error('更新订单状态失败:', error)
+    ElMessage.error('更新订单状态失败')
+  }
+}
+
+// 取消订单
+const cancelOrder = async (order: Order) => {
+  try {
+    await ElMessageBox.confirm(
+      `确定要取消订单 #${order.orderId} 吗？`,
+      '确认取消',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    )
+
+    const response = await axios.delete<ApiResponse<any>>(
+      `${BASE_API}/branch/orders/${order.orderId}`
+    )
+
+    if (response.data.code === 200) {
+      ElMessage.success('订单取消成功')
+      await fetchOrders()
+    } else {
+      ElMessage.error(response.data.message || '取消订单失败')
+    }
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('取消订单失败:', error)
+      ElMessage.error('取消订单失败')
+    }
+  }
+}
+
+// 搜索
+const handleSearch = () => {
+  currentPage.value = 1
+  fetchOrders()
+}
+
+// 重置搜索
+const handleReset = () => {
+  Object.assign(searchForm, {
+    orderStatus: '',
+    accountId: ''
+  })
+  currentPage.value = 1
+  fetchOrders()
+}
+
+// 分页变化
+const handleCurrentChange = (page: number) => {
+  currentPage.value = page
+  fetchOrders()
+}
+
+const handleSizeChange = (size: number) => {
+  pageSize.value = size
+  currentPage.value = 1
+  fetchOrders()
+}
+
+// 打开状态更新对话框
+const openStatusDialog = (order: Order) => {
+  selectedOrder.value = order
+  newStatus.value = order.orderStatus
+  statusDialogVisible.value = true
+}
+
+// 格式化金额
+const formatMoney = (money: number) => {
+  return `¥${money.toFixed(2)}`
+}
+
+// 格式化时间
+const formatTime = (time: string) => {
+  return new Date(time).toLocaleString('zh-CN')
+}
+
+// 组件挂载时初始化
+onMounted(() => {
+  fetchOrders()
+})
+</script>
+
+<template>
+  <div class="order-management">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <span>订单管理</span>
+        </div>
+      </template>
+
+      <!-- 搜索表单 -->
+      <el-form :model="searchForm" label-width="80px" inline class="search-form">
+        <el-form-item label="订单状态">
+          <el-select v-model="searchForm.orderStatus" placeholder="请选择状态" clearable>
+            <el-option
+              v-for="option in statusOptions"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="用户ID">
+          <el-input
+            v-model="searchForm.accountId"
+            placeholder="请输入用户ID"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">查询</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- 订单表格 -->
+      <el-table
+        :data="tableData"
+        :loading="loading"
+        style="width: 100%"
+        class="order-table"
+      >
+        <el-table-column prop="orderId" label="订单ID" width="100" />
+        <el-table-column prop="accountId" label="用户ID" width="100" />
+        <el-table-column label="下单时间" width="180">
+          <template #default="{ row }">
+            {{ formatTime(row.orderTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="订单金额" width="120">
+          <template #default="{ row }">
+            <span class="money">{{ formatMoney(row.orderMoney) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="订单状态" width="100">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.orderStatus)">
+              {{ statusMap[row.orderStatus as keyof typeof statusMap] }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="orderRemarks" label="备注" show-overflow-tooltip />
+        <el-table-column label="操作" width="220" fixed="right">
+          <template #default="{ row }">
+            <el-button
+              type="primary"
+              size="small"
+              @click="fetchOrderDetail(row.orderId)"
+            >
+              详情
+            </el-button>
+            <el-button
+              type="warning"
+              size="small"
+              @click="openStatusDialog(row)"
+              :disabled="row.orderStatus === -1"
+            >
+              状态
+            </el-button>
+            <el-button
+              type="danger"
+              size="small"
+              @click="cancelOrder(row)"
+              :disabled="row.orderStatus !== 1"
+            >
+              取消
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-wrapper">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 订单详情对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      title="订单详情"
+      width="70%"
+      :close-on-click-modal="false"
+    >
+      <div v-if="orderDetail" class="order-detail">
+        <el-descriptions title="基本信息" :column="2" border>
+          <el-descriptions-item label="订单ID">
+            {{ orderDetail.orderId }}
+          </el-descriptions-item>
+          <el-descriptions-item label="用户ID">
+            {{ orderDetail.accountId }}
+          </el-descriptions-item>
+          <el-descriptions-item label="下单时间">
+            {{ formatTime(orderDetail.orderTime) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="订单金额">
+            <span class="money">{{ formatMoney(orderDetail.orderMoney) }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="订单状态">
+            <el-tag :type="getStatusType(orderDetail.orderStatus)">
+              {{ statusMap[orderDetail.orderStatus as keyof typeof statusMap] }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="备注">
+            {{ orderDetail.orderRemarks || '无' }}
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <el-divider />
+
+        <h3>订单明细</h3>
+        <el-table :data="orderDetail.orderLists" style="width: 100%">
+          <el-table-column prop="dishId" label="菜品ID" width="100" />
+          <el-table-column prop="dishName" label="菜品名称" />
+          <el-table-column prop="number" label="数量" width="100" />
+          <el-table-column label="单价" width="120">
+            <template #default="{ row }">
+              {{ row.price ? formatMoney(row.price) : '-' }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-else-if="detailLoading" style="text-align: center; padding: 40px;">
+        <el-icon class="is-loading"><Loading /></el-icon>
+        <p>加载中...</p>
+      </div>
+    </el-dialog>
+
+    <!-- 状态更新对话框 -->
+    <el-dialog
+      v-model="statusDialogVisible"
+      title="更新订单状态"
+      width="400px"
+      :close-on-click-modal="false"
+    >
+      <div v-if="selectedOrder">
+        <p>订单ID: {{ selectedOrder.orderId }}</p>
+        <p>当前状态: 
+          <el-tag :type="getStatusType(selectedOrder.orderStatus)">
+            {{ statusMap[selectedOrder.orderStatus as keyof typeof statusMap] }}
+          </el-tag>
+        </p>
+        <el-form label-width="80px" style="margin-top: 20px;">
+          <el-form-item label="新状态">
+            <el-select v-model="newStatus" placeholder="请选择新状态">
+              <el-option label="待处理" :value="1" />
+              <el-option label="已完成" :value="2" />
+              <el-option label="已取消" :value="-1" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="statusDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="updateOrderStatus">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.order-management {
+  padding: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.search-form {
+  margin-bottom: 20px;
+  padding: 20px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+}
+
+.order-table {
+  margin-bottom: 20px;
+}
+
+.money {
+  color: #f56c6c;
+  font-weight: bold;
+}
+
+.pagination-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.order-detail {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.order-detail h3 {
+  margin: 20px 0 10px 0;
+  color: #303133;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .search-form {
+    padding: 15px;
+  }
+  
+  .search-form .el-form-item {
+    margin-bottom: 10px;
+  }
+  
+  .order-table {
+    font-size: 12px;
+  }
+  
+  .el-dialog {
+    margin: 0 5% !important;
+    width: 90% !important;
+  }
+}
+
+/* 加载状态样式 */
+.is-loading {
+  animation: rotating 2s linear infinite;
+}
+
+@keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/merchant/Orders/index.vue b/src/views/merchant/order/index.vue
similarity index 100%
rename from src/views/merchant/Orders/index.vue
rename to src/views/merchant/order/index.vue