diff --git a/Api.text b/Api.text
new file mode 100644
index 0000000..2288a9a
--- /dev/null
+++ b/Api.text
@@ -0,0 +1,278 @@
+# 前端数据需求分析
+
+## 组件数据需求
+
+### 1. Address.vue (地址选择组件)
+- 数据需求：省市区级联选择数据
+- 数据结构：
+  ```
+  address {
+    province: string,  // 省份名称
+    city: string,      // 城市名称
+    district: string   // 区县名称
+  }
+  ```
+
+### 2. Search.vue (搜索组件)
+- 数据需求：搜索关键词、搜索类型、搜索历史
+- 数据结构：
+  ```
+  search {
+    keyword: string,           // 搜索关键词
+    type: string,              // 搜索类型（如"宝贝"、"店铺"）
+    history: string[]          // 搜索历史记录
+  }
+  ```
+
+### 3. page.vue (分页组件)
+- 数据需求：总页数
+- 数据结构：
+  ```
+  pagination {
+    totalPages: number         // 总页数
+  }
+  ```
+
+## 页面数据需求
+
+### 1. Login.vue (登录页面)
+- 数据需求：用户登录信息
+- 数据结构：
+  ```
+  login {
+    username: string,          // 用户名
+    password: string,          // 密码
+    rememberMe: boolean        // 是否记住密码
+  }
+  ```
+
+### 2. Userinfo.vue (用户信息页面)
+- 数据需求：用户信息、订单状态数量
+- 数据结构：
+  ```
+  user {
+    id: number,                // 用户ID
+    username: string,          // 用户名
+    avatar: string,            // 头像URL
+    level: number,             // 用户等级
+    followCount: number,       // 关注数
+    fansCount: number,         // 粉丝数
+    collectionCount: number,   // 收藏数
+    couponCount: number,       // 红包数
+    discountCount: number,     // 优惠券数
+    taoCoin: number,           // 淘币数
+    points: number             // 积分
+  }
+  orderCounts {
+    pending_payment: number,   // 待付款
+    pending_shipment: number,  // 待发货
+    pending_receipt: number,   // 待收货
+    pending_review: number,    // 待评价
+    completed: number          // 已完成
+  }
+  ```
+
+### 3. productdetil.vue (商品详情页面)
+- 数据需求：商品信息、商品图片、商品型号、评论、推荐商品
+- 数据结构：
+  ```
+  product {
+    id: number,                // 商品ID
+    title: string,             // 商品标题
+    images: string[],          // 商品图片URL
+    price: number,             // 价格
+    originalPrice: number,     // 原价
+    models: [                  // 商品型号
+      {
+        id: string,
+        name: string,
+        price: string,
+        originalPrice: string,
+        img: string
+      }
+    ],
+    description: string,       // 商品描述
+    features: string[],        // 商品特点
+    specs: [                   // 商品参数
+      {
+        category: string,      // 参数类别
+        value: string          // 参数值
+      }
+    ],
+    reviews: [                 // 用户评论
+      {
+        id: number,
+        reviewerName: string,  // 评论者姓名
+        rating: number,        // 评分
+        time: string,          // 评论时间
+        content: string,       // 评论内容
+        images: string[]       // 评论图片
+      }
+    ],
+    recommendations: [         // 推荐商品
+      {
+        id: number,
+        name: string,          // 商品名称
+        price: number,         // 价格
+        rating: number,        // 评分
+        image: string          // 商品图片
+      }
+    ]
+  }
+  ```
+
+### 4. SettlementLite.vue (结算页面)
+- 数据需求：地址列表、默认地址、商品信息、价格计算
+- 数据结构：
+  ```
+  address {
+    id: number,                // 地址ID
+    name: string,              // 收货人姓名
+    phone: string,             // 联系电话
+    province: string,          // 省份
+    city: string,              // 城市
+    district: string,          // 区县
+    detail: string,            // 详细地址
+    isDefault: boolean         // 是否默认地址
+  }[]
+  order {
+    products: [                // 订单商品
+      {
+        id: number,            // 商品ID
+        name: string,          // 商品名称
+        price: number,         // 商品价格
+        quantity: number,      // 购买数量
+        image: string          // 商品图片
+      }
+    ],
+    totalPrice: number,        // 总价格
+    shippingFee: number,       // 运费
+    finalPrice: number         // 最终价格
+  }
+  ```
+
+### 5. User/UpdataAddress.vue (地址修改页面)
+- 数据需求：地址信息
+- 数据结构：
+  ```
+  address {
+    id: number,                // 地址ID
+    name: string,              // 收货人姓名
+    phone: string,             // 联系电话
+    province: string,          // 省份
+    city: string,              // 城市
+    district: string,          // 区县
+    detail: string,            // 详细地址
+    isDefault: boolean         // 是否默认地址
+  }
+  ```
+
+### 6. User/User.vue (用户中心页面)
+- 数据需求：用户信息、订单列表、地址列表、收藏列表
+- 数据结构：
+  ```
+  user {
+    id: number,                // 用户ID
+    username: string,          // 用户名
+    avatar: string             // 头像URL
+  }
+  orders {
+    id: number,                // 订单ID
+    status: string,            // 订单状态
+    totalPrice: number,        // 订单总价
+    createTime: string,        // 创建时间
+    products: [                // 订单商品
+      {
+        id: number,
+        name: string,
+        price: number,
+        quantity: number,
+        image: string
+      }
+    ]
+  }[]
+  addresses: address[]         // 地址列表，结构同SettlementLite.vue
+  collections: [               // 收藏列表
+    {
+      id: number,              // 收藏ID
+      productId: number,       // 商品ID
+      productName: string,     // 商品名称
+      productPrice: number,    // 商品价格
+      productImage: string     // 商品图片
+    }
+  ]
+  ```
+
+### 7. Cart.vue (购物车页面)
+- 数据需求：购物车商品列表
+- 数据结构：
+  ```
+  cart {
+    items: [                   // 购物车商品
+      {
+        id: number,            // 商品ID
+        name: string,          // 商品名称
+        price: number,         // 商品价格
+        quantity: number,      // 购买数量
+        image: string,         // 商品图片
+        selected: boolean      // 是否选中
+      }
+    ],
+    totalPrice: number,        // 总价格
+    selectedCount: number      // 选中数量
+  }
+  ```
+
+### 8. product/productList.vue (商品列表页面)
+- 数据需求：商品列表、分页信息
+- 数据结构：
+  ```
+  products {
+    items: [                   // 商品列表
+      {
+        id: number,            // 商品ID
+        name: string,          // 商品名称
+        price: number,         // 商品价格
+        originalPrice: number, // 原价
+        image: string,         // 商品图片
+        rating: number,        // 评分
+        sales: number          // 销量
+      }
+    ],
+    total: number,             // 总商品数
+    page: number,              // 当前页码
+    pageSize: number,          // 每页数量
+    totalPages: number         // 总页数
+  }
+  ```
+
+### 9. Home.vue (首页)
+- 数据需求：轮播图、推荐商品、分类信息
+- 数据结构：
+  ```
+  home {
+    banners: [                 // 轮播图
+      {
+        id: number,
+        image: string,         // 轮播图图片
+        link: string           // 跳转链接
+      }
+    ],
+    recommendedProducts: [     // 推荐商品
+      {
+        id: number,
+        name: string,
+        price: number,
+        image: string,
+        rating: number
+      }
+    ],
+    categories: [              // 商品分类
+      {
+        id: number,
+        name: string,          // 分类名称
+        icon: string           // 分类图标
+      }
+    ]
+  }
+  ```
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 543fa48..191f89a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,5 +8,6 @@
 import { RouterView } from "vue-router";
 import Herde from "@/Views/Herde.vue";
 import './Style/App.css'
+
 </script>
 
diff --git a/src/Component/business/SettlementLite.vue b/src/Component/business/SettlementLite.vue
new file mode 100644
index 0000000..8b42584
--- /dev/null
+++ b/src/Component/business/SettlementLite.vue
@@ -0,0 +1,927 @@
+<!-- 结算页  用于展示购物车中的商品信息  并确认结算 -->
+<template>
+    <a-modal v-model:visible="visible" width="800px" @ok="afterClose" @cancel="cancel" class="settlement-modal"
+        :footer-extra="null" :footer="null">
+        <!-- 结算界面 左右结构 -->
+        <div class="settlement-container">
+            <!-- 左侧 结算列表 -->
+            <div class="settlement-left">
+                <!-- 地址信息 -->
+                <div class="address-info">
+                    <div class="address-item" @click="showAddressModal = true">
+                        <div class="address-header">
+                            <span class="address-name">{{ selectedAddress.name }}</span>
+                            <span class="address-phone">{{ selectedAddress.phone }}</span>
+                            <span v-if="selectedAddress.isDefault" class="address-tag default">默认</span>
+                        </div>
+                        <div class="address-detail">
+                            {{ selectedAddress.province }}{{ selectedAddress.city }}{{ selectedAddress.district }}{{
+                                selectedAddress.detail }}
+                        </div>
+                    </div>
+                    <a-modal v-model:visible="showAddressModal" width="600px" @ok="afterCloseAddressModal"
+                        :after-close="afterCloseAddressModal" :footer-extra="null" :footer="null">
+                        <!-- 顶部导航 地址列表 添加地址 -->
+                        <div class="address-nav">
+                            <span class="nav-item" :class="{ active: activeAddressTab === 'list' }"
+                                @click="switchAddressTab('list')">
+                                地址列表
+                            </span>
+                            <span class="nav-item" :class="{ active: activeAddressTab === 'add' }"
+                                @click="switchAddressTab('add')">
+                                添加地址
+                            </span>
+                        </div>
+                        <div>
+                            <!-- 地址列表 -->
+                            <div class="address-list" v-if="activeAddressTab === 'list'">
+                                <div class="address-item" :class="{ active: selectedAddress.id === address.id }"
+                                    v-for="address in addresses" :key="address.id" @click="selectAddress(address)">
+                                    <div class="address-header">
+                                        <span class="address-name">{{ address.name }}</span>
+                                        <span class="address-phone">{{ address.phone }}</span>
+                                        <span v-if="address.isDefault" class="address-tag default">默认</span>
+                                    </div>
+                                    <div class="address-detail">
+                                        {{ address.province }}{{ address.city }}{{ address.district }}{{ address.detail
+                                        }}
+                                    </div>
+                                </div>
+                                <div v-if="addresses.length === 0" class="empty-address">
+                                    <p>暂无地址，请添加新地址</p>
+                                </div>
+                            </div>
+
+                            <!-- 添加地址表单 -->
+                            <div class="add-address-form" v-if="activeAddressTab === 'add'">
+                                <div class="form-item">
+                                    <label>收货人</label>
+                                    <input type="text" v-model="newAddressForm.name" placeholder="请输入收货人姓名">
+                                </div>
+
+                                <div class="form-item">
+                                    <label>手机号</label>
+                                    <input type="tel" v-model="newAddressForm.phone" placeholder="请输入手机号码">
+                                </div>
+
+                                <div class="form-item">
+                                    <label>所在地区</label>
+                                    <!-- 省份选择  -->
+                                    <input type="text" :readonly="true" @click="showAddressComponent = true"
+                                        v-model="address" placeholder="省市县">
+                                </div>
+                                <!-- 所在省份被选择后，显示城市选择器 -->
+                                <AddressComponent @address="handleAddressChange"
+                                    v-model:visible="showAddressComponent" />
+
+                                <div class="form-item">
+                                    <label>详细地址</label>
+                                    <textarea v-model="newAddressForm.detail" placeholder="请输入详细地址信息"
+                                        rows="3"></textarea>
+                                </div>
+
+                                <div class="form-item checkbox-item">
+                                    <label>
+                                        <input type="checkbox" v-model="newAddressForm.isDefault">
+                                        设为默认地址
+                                    </label>
+                                </div>
+
+                            </div>
+                        </div>
+                    </a-modal>
+                </div>
+                <!-- 商品信息 -->
+                <div class="settlement-section goods-section">
+                    <h3 class="section-title">商品信息</h3>
+                    <div class="goods-list">
+                        <div v-for="product in products" :key="product.id" class="goods-item">
+                            <div class="goods-image">
+                                <img :src="product.image" :alt="product.name">
+                            </div>
+                            <div class="goods-info">
+                                <h4 class="goods-name">{{ product.name }}</h4>
+                                <p class="goods-desc">{{ product.description }}</p>
+                                <div class="goods-price-quantity">
+                                    <span class="goods-price">¥{{ product.price.toFixed(2) }}</span>
+                                    <span class="goods-quantity">x{{ product.quantity }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 价格信息 -->
+                <div class="settlement-section price-section">
+                    <h3 class="section-title">价格明细</h3>
+                    <div class="price-details">
+                        <div class="price-item">
+                            <span class="price-label">商品总价</span>
+                            <span class="price-value">¥{{ totalPrice.toFixed(2) }}</span>
+                        </div>
+                        <div class="price-item">
+                            <span class="price-label">运费</span>
+                            <span class="price-value">¥{{ shippingFee.toFixed(2) }}</span>
+                        </div>
+                        <div class="price-item discount">
+                            <span class="price-label">优惠</span>
+                            <span class="price-value discount">-¥{{ discountAmount.toFixed(2) }}</span>
+                        </div>
+                        <div class="price-item total">
+                            <span class="price-label">实付金额</span>
+                            <span class="price-value total">¥{{ actualPrice.toFixed(2) }}</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 发票信息 -->
+                <div class="settlement-section invoice-section">
+                    <h3 class="section-title">发票信息</h3>
+                    <div class="invoice-info">
+                        <div class="invoice-type">
+                            <label>
+                                <input type="radio" v-model="invoiceType" value="personal"> 个人发票
+                            </label>
+                            <label>
+                                <input type="radio" v-model="invoiceType" value="company"> 企业发票
+                            </label>
+                        </div>
+                        <div v-if="invoiceType === 'company'" class="company-info">
+                            <input type="text" v-model="companyName" placeholder="请输入企业名称">
+                            <input type="text" v-model="taxNumber" placeholder="请输入税号">
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 右侧 结算信息 -->
+            <div class="settlement-right">
+                <div class="payment-section">
+                    <h3 class="section-title">支付方式</h3>
+                    <div class="payment-methods">
+                        <div class="payment-item" :class="{ active: selectedPayment === 'balance' }"
+                            @click="selectedPayment = 'balance'">
+                            <div class="payment-icon balance-icon"></div>
+                            <span>余额支付</span>
+                        </div>
+                        <div class="payment-item" :class="{ active: selectedPayment === 'bank' }"
+                            @click="selectedPayment = 'bank'">
+                            <div class="payment-icon bank-icon"></div>
+                            <span>银行卡</span>
+                        </div>
+                        <div class="payment-item" :class="{ active: selectedPayment === 'wechat' }"
+                            @click="selectedPayment = 'wechat'">
+                            <div class="payment-icon wechat-icon"></div>
+                            <span>微信支付</span>
+                        </div>
+                        <div class="payment-item" :class="{ active: selectedPayment === 'alipay' }"
+                            @click="selectedPayment = 'alipay'">
+                            <div class="payment-icon alipay-icon"></div>
+                            <span>支付宝</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 最终价格 -->
+                <div class="settlement-section final-price-section">
+                    <div class="settlement-footer">
+                        <div class="footer-price">
+                            <span class="footer-price-value">¥{{ actualPrice.toFixed(2) }}</span>
+                            <span class="footer-price-value discount">共减：¥{{ discountAmount.toFixed(2) }}</span>
+
+                        </div>
+                        <div class="footer-buttons">
+                            <a-button type="primary" @click="submit" class="submit-btn">确认订单并支付</a-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import type { Address, Product } from '@/Util/Type'
+import AddressComponent from '@/Component/common/Address.vue';
+
+// Props
+const props = defineProps({
+    products: {
+        type: Array as () => Product[],
+        default: () => []
+    }
+})
+
+const emit = defineEmits(['submit', 'update:visible'])
+
+// 响应式数据
+const visible = ref(false)
+const addresses = ref<Address[]>([
+    {
+        id: 1,
+        name: '张三',
+        phone: '138****8888',
+        province: '北京市',
+        city: '北京市',
+        district: '朝阳区',
+        detail: '三里屯SOHO A座 2001室',
+        isDefault: true
+    },
+    {
+
+        id: 1,
+        name: '张三',
+        phone: '138****8888',
+        province: '北京市',
+        city: '北京市',
+        district: '朝阳区',
+        detail: '三里屯SOHO A座 2001室',
+        isDefault: false
+    }
+
+])
+
+const invoiceType = ref('personal')
+const companyName = ref('')
+const taxNumber = ref('')
+const selectedPayment = ref('wechat')
+const orderRemark = ref('')
+// 地址弹窗显示状态
+const showAddressModal = ref(false)
+// 地址组件显示状态
+const showAddressComponent = ref(false)
+//省市区拼接
+const address = computed(() => {
+    if (newAddressForm.value.province && newAddressForm.value.city && newAddressForm.value.district) {
+        return newAddressForm.value.province + ' / ' + newAddressForm.value.city + ' / ' + newAddressForm.value.district
+    }
+    return ''
+})
+
+
+// 地址弹窗相关数据
+const activeAddressTab = ref('list') // 'list' 或 'add'
+const newAddressForm = ref({
+    name: '',
+    phone: '',
+    province: '',
+    city: '',
+    district: '',
+    detail: '',
+    isDefault: false
+})
+
+// 方法 选择isDefault为true的数据
+const selectedAddress = ref<Address>(addresses.value.find(addr => addr.isDefault) as Address)
+
+// 地址组件选择地址后，更新表单数据
+const handleAddressChange = (address: Address) => {
+    newAddressForm.value.province = address.province
+    newAddressForm.value.city = address.city
+    newAddressForm.value.district = address.district
+    console.log('选择的地址:', address)
+}
+
+const switchAddressTab = (tab: string) => {
+    activeAddressTab.value = tab
+    if (tab === 'add') {
+        // 重置表单
+        newAddressForm.value = {
+            name: '',
+            phone: '',
+            province: '',
+            city: '',
+            district: '',
+            detail: '',
+            isDefault: false
+        }
+    }
+}
+
+const selectAddress = (address: Address) => {
+    showAddressModal.value = false
+}
+
+
+const afterCloseAddressModal = () => {
+    // 重置状态
+    activeAddressTab.value = 'list'
+    newAddressForm.value = {
+        name: '',
+        phone: '',
+        province: '',
+        city: '',
+        district: '',
+        detail: '',
+        isDefault: false
+    }
+    
+}
+// 计算属性
+const totalPrice = computed(() => {
+    return props.products.reduce((sum, product) => sum + product.price * product.quantity, 0)
+})
+
+const shippingFee = computed(() => {
+    return totalPrice.value >= 99 ? 0 : 10
+})
+
+const discountAmount = computed(() => {
+    return Math.min(totalPrice.value * 0.1, 50)
+})
+
+const actualPrice = computed(() => {
+    return totalPrice.value + shippingFee.value - discountAmount.value
+})
+
+
+
+const submit = () => {
+    console.log('确认结算')
+    console.log('选中的地址:', addresses.value)
+    console.log('选中的支付方式:', selectedPayment.value)
+    console.log('订单备注:', orderRemark.value)
+    console.log('实付金额:', actualPrice.value)
+
+    // 发送结算事件
+    emit('submit', {
+        address: addresses.value,
+        payment: selectedPayment.value,
+        remark: orderRemark.value,
+        totalAmount: actualPrice.value
+    })
+
+    // 关闭弹窗
+    emit('update:visible', false)
+}
+
+const cancel = () => {
+    emit('update:visible', false)
+}
+
+const afterClose = () => {
+    // 重置表单
+    companyName.value = ''
+    taxNumber.value = ''
+    orderRemark.value = ''
+    console.log('afterClose')
+    console.log('visible.value:', visible.value)
+    emit('update:visible', false)
+}
+
+// 监听商品变化
+watch(() => props.products, (newProducts) => {
+    if (newProducts.length > 0) {
+        visible.value = true
+    }
+}, { deep: true })
+
+// 监听可见性变化
+watch(() => visible.value, (newVal) => {
+    visible.value = newVal
+})
+</script>
+
+<style scoped>
+.settlement-modal {
+    .ant-modal-content {
+        border-radius: var(--border-radius-md);
+    }
+
+    .ant-modal-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: var(--text-dark);
+    }
+}
+
+.settlement-container {
+    display: flex;
+    gap: var(--spacing-lg);
+    background-color: var(--bg-white);
+}
+
+/* 左侧结算列表 */
+.settlement-left {
+    flex: 1;
+    min-width: 0;
+    max-height: 550px;
+    overflow-y: auto;
+}
+
+/* 右侧结算信息 */
+.settlement-right {
+    width: 350px;
+    min-width: 300px;
+}
+
+/* 通用区块样式 */
+.settlement-section {
+    margin: var(--spacing-md) 0;
+    padding: var(--spacing-md);
+}
+
+.section-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-dark);
+    margin: 0 0 var(--spacing-md);
+    padding-bottom: var(--spacing-xs);
+    border-bottom: 1px solid var(--border-light);
+}
+
+/* 地址区块 */
+.address-item {
+    padding: var(--spacing-md);
+    border: 1px solid var(--border-light);
+    border-radius: var(--border-radius-sm);
+    margin-bottom: var(--spacing-sm);
+    cursor: pointer;
+    transition: all var(--transition-normal) ease;
+}
+
+.address-item:hover {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px var(--primary-light);
+}
+
+
+.address-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    margin-bottom: var(--spacing-xs);
+}
+
+.address-name {
+    font-weight: 600;
+    color: var(--text-dark);
+}
+
+.address-phone {
+    color: var(--text-secondary);
+}
+
+.address-tag {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--border-radius-full);
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.address-tag.default {
+    background-color: var(--primary-color);
+    color: var(--bg-white);
+}
+
+.address-detail {
+    color: var(--text-secondary);
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.add-address-btn {
+    padding: var(--spacing-md);
+    border: 1px dashed var(--border-light);
+    border-radius: var(--border-radius-sm);
+    text-align: center;
+    color: var(--primary-color);
+    cursor: pointer;
+    transition: all var(--transition-normal) ease;
+}
+
+.add-address-btn:hover {
+    border-color: var(--primary-color);
+    background-color: var(--primary-light);
+}
+
+/* 地址弹窗样式 */
+.address-nav {
+    display: flex;
+    margin-bottom: var(--spacing-md);
+    border-bottom: 1px solid var(--border-light);
+}
+
+.nav-item {
+    padding: var(--spacing-sm) var(--spacing-md);
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--text-secondary);
+    border-bottom: 2px solid transparent;
+    transition: all var(--transition-normal) ease;
+}
+
+.nav-item:hover {
+    color: var(--primary-color);
+}
+
+.nav-item.active {
+    color: var(--primary-color);
+    border-bottom-color: var(--primary-color);
+}
+
+.address-list {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.address-list .address-item {
+    margin-bottom: var(--spacing-sm);
+}
+
+.empty-address {
+    padding: var(--spacing-xl) 0;
+    text-align: center;
+    color: var(--text-tertiary);
+}
+
+/* 添加地址表单样式 */
+.add-address-form {
+    padding: var(--spacing-sm) 0;
+}
+
+.form-item {
+    margin-bottom: var(--spacing-md);
+}
+
+.form-item label {
+    display: block;
+    margin-bottom: var(--spacing-xs);
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-dark);
+}
+
+.form-item input[type="text"],
+.form-item input[type="tel"],
+.form-item select,
+.form-item textarea {
+    width: 100%;
+    padding: var(--spacing-sm);
+    border: 1px solid var(--border-light);
+    border-radius: var(--border-radius-sm);
+    font-size: 14px;
+    transition: all var(--transition-normal) ease;
+    background-color: var(--bg-white);
+}
+
+.form-item input[type="text"]:focus,
+.form-item input[type="tel"]:focus,
+.form-item select:focus,
+.form-item textarea:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px var(--primary-light);
+}
+
+
+
+.form-item.checkbox-item {
+    display: flex;
+    align-items: center;
+}
+
+.form-item.checkbox-item label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    cursor: pointer;
+    font-weight: 400;
+}
+
+.form-item.checkbox-item input[type="checkbox"] {
+    width: auto;
+}
+
+.form-actions {
+    display: flex;
+    gap: var(--spacing-sm);
+    justify-content: flex-end;
+    margin-top: var(--spacing-lg);
+    padding-top: var(--spacing-lg);
+    border-top: 1px solid var(--border-light);
+}
+
+.form-actions button {
+    padding: var(--spacing-sm) var(--spacing-md);
+    border: 1px solid var(--border-light);
+    border-radius: var(--border-radius-sm);
+    font-size: 14px;
+    cursor: pointer;
+    transition: all var(--transition-normal) ease;
+}
+
+.cancel-btn {
+    background-color: var(--bg-white);
+    color: var(--text-secondary);
+}
+
+.cancel-btn:hover {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.save-btn {
+    background-color: var(--primary-color);
+    color: var(--bg-white);
+    border-color: var(--primary-color);
+}
+
+.save-btn:hover {
+    background-color: var(--primary-hover);
+    border-color: var(--primary-hover);
+}
+
+/* 商品区块 */
+.goods-item {
+    display: flex;
+    gap: var(--spacing-md);
+    padding: var(--spacing-md);
+    border: 1px solid var(--border-light);
+    border-radius: var(--border-radius-sm);
+    margin-bottom: var(--spacing-sm);
+    transition: all var(--transition-normal) ease;
+}
+
+.goods-item:hover {
+    box-shadow: var(--shadow-sm);
+}
+
+.goods-image {
+    width: 80px;
+    height: 80px;
+    border-radius: var(--border-radius-sm);
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.goods-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.goods-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.goods-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-dark);
+    margin: 0 0 var(--spacing-xs);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.goods-desc {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin: 0 0 var(--spacing-xs);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.goods-price-quantity {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.goods-price {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--error-color);
+}
+
+.goods-quantity {
+    font-size: 14px;
+    color: var(--text-secondary);
+}
+
+/* 价格区块 */
+.price-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-xs);
+    font-size: 14px;
+}
+
+.price-label {
+    color: var(--text-secondary);
+}
+
+.price-value {
+    color: var(--text-dark);
+}
+
+.price-item.discount .price-value {
+    color: var(--success-color);
+}
+
+.price-item.total {
+    margin-top: var(--spacing-sm);
+    padding-top: var(--spacing-sm);
+    border-top: 1px solid var(--border-light);
+    font-weight: 600;
+}
+
+.price-item.total .price-value {
+    color: var(--error-color);
+    font-size: 16px;
+}
+
+/* 发票区块 */
+.invoice-type {
+    display: flex;
+    gap: var(--spacing-lg);
+    margin-bottom: var(--spacing-md);
+}
+
+.invoice-type label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    cursor: pointer;
+}
+
+.company-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.company-info input {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border: 1px solid var(--border-light);
+    border-radius: var(--border-radius-sm);
+    font-size: 14px;
+}
+
+.company-info input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px var(--primary-light);
+}
+
+/* 支付方式区块 */
+.payment-methods {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.payment-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md);
+    border: 1px solid var(--border-light);
+    border-radius: var(--border-radius-sm);
+    cursor: pointer;
+    transition: all var(--transition-normal) ease;
+}
+
+.payment-item:hover {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px var(--primary-light);
+}
+
+.payment-item.active {
+    border-color: var(--primary-color);
+    background-color: var(--primary-light);
+}
+
+.payment-icon {
+    width: 24px;
+    height: 24px;
+    border-radius: var(--border-radius-sm);
+    background-color: var(--bg-light);
+}
+
+.balance-icon {
+    background-color: var(--primary-color);
+}
+
+.bank-icon {
+    background-color: var(--info-color);
+}
+
+.wechat-icon {
+    background-color: var(--success-color);
+}
+
+.alipay-icon {
+    background-color: var(--warning-color);
+}
+
+/* 订单备注区块 */
+.remark-section textarea {
+    width: 100%;
+    padding: var(--spacing-sm);
+    border: 1px solid var(--border-light);
+    border-radius: var(--border-radius-sm);
+    font-size: 14px;
+    resize: vertical;
+}
+
+.remark-section textarea:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px var(--primary-light);
+}
+
+/* 最终价格区块 */
+.final-price {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacing-md);
+    background-color: var(--bg-light);
+    border-radius: var(--border-radius-sm);
+}
+
+.final-price-label {
+    font-weight: 600;
+    color: var(--text-dark);
+}
+
+.final-price-value {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--error-color);
+}
+/* 最终价格区块样式 */
+.settlement-section.final-price-section {
+    padding: 0;
+    margin: 8px 0;
+    position: absolute;
+    bottom: var(--spacing-md);
+}
+/* 底部区块 */
+.settlement-footer {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 0 25px;
+}
+
+.footer-price {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--spacing-xs);
+}
+
+.footer-price-value {
+    margin-left: 10px;
+    font-size: 34px;
+    font-weight: 700;
+    color: var(--error-color);
+}
+
+.footer-price-value.discount {
+    margin-left: 0;
+    font-size: 18px;
+    padding: var(--spacing-xs);
+    color: var(--success-color);
+}
+
+.footer-buttons {
+    display: flex;
+    gap: var(--spacing-sm);
+    width: 100%;
+}
+
+.submit-btn {
+    min-width: 300px;
+    height: 48px;
+    
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .settlement-container {
+        flex-direction: column;
+    }
+
+    .settlement-right {
+        width: 100%;
+        min-width: unset;
+    }
+
+    .settlement-footer {
+        flex-direction: column;
+        gap: var(--spacing-sm);
+        align-items: stretch;
+    }
+
+    .footer-buttons {
+        justify-content: center;
+    }
+}
+</style>
diff --git a/src/Component/common/Address.vue b/src/Component/common/Address.vue
new file mode 100644
index 0000000..347e34d
--- /dev/null
+++ b/src/Component/common/Address.vue
@@ -0,0 +1,379 @@
+<!-- 地址组件 当visible为true时 才会显示类似于弹窗 省>市>县 只有选择前一个后一个选项才会显示  -->
+<!-- 省市县选择器 返回选中的省市县信息 -->
+<template>
+    <a-modal :visible.sync="visible" title="选择地址" width="300px" :close-on-click-modal="false" :after-close="close" :footer-extra="null" :footer="null">
+        <div class="address-form-content">
+            <!-- 上下结构 -->
+            <div class="form-tab">
+                <!-- 选项卡  省>市>县只有选择前一个后一个选项才会显示 -->
+                <div class="tab-item" :class="{ active: activeTab === 'province' }">
+                    省份
+                </div>
+                <div class="tab-item" :class="{ active: activeTab === 'city', disabled: !selectedProvince }">
+                    城市
+                </div>
+                <div class="tab-item" :class="{ active: activeTab === 'district', disabled: !selectedCity }">
+                    区县
+                </div>
+            </div>
+
+            <div class="form-content">
+                <!-- 选项卡内容 根据选项卡显示不同的内容 -->
+                <div v-if="activeTab === 'province'" class="tab-content">
+                    <div class="region-item" v-for="province in provinces" :key="province.value"
+                        @click="selectProvince(province)">
+                        {{ province.label }}
+                    </div>
+                </div>
+
+                <div v-else-if="activeTab === 'city'" class="tab-content">
+                    <div class="region-item" v-for="city in cities" :key="city.value" @click="selectCity(city)">
+                        {{ city.label }}
+                    </div>
+                </div>
+
+                <div v-else-if="activeTab === 'district'" class="tab-content">
+                    <div class="region-item" v-for="district in districts" :key="district.value"
+                        @click="selectDistrict(district)">
+                        {{ district.label }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
+        default: false
+    }
+})
+const emit = defineEmits(['update:visible', 'address'])
+
+// 响应式数据
+const activeTab = ref('province')
+const selectedProvince = ref('')
+const selectedCity = ref('')
+const selectedDistrict = ref('')
+
+// 省份数据
+const provinces = ref([
+    { value: '北京市', label: '北京市' },
+    { value: '上海市', label: '上海市' },
+    { value: '广东省', label: '广东省' },
+    { value: '江苏省', label: '江苏省' },
+    { value: '浙江省', label: '浙江省' },
+    { value: '四川省', label: '四川省' },
+    { value: '湖北省', label: '湖北省' },
+    { value: '湖南省', label: '湖南省' },
+    { value: '山东省', label: '山东省' },
+    { value: '河南省', label: '河南省' }
+])
+
+// 城市数据（根据省份动态生成）
+const cities = computed(() => {
+    const cityMap: Record<string, Array<{ value: string; label: string }>> = {
+        '北京市': [{ value: '北京市', label: '北京市' }],
+        '上海市': [{ value: '上海市', label: '上海市' }],
+        '广东省': [
+            { value: '广州市', label: '广州市' },
+            { value: '深圳市', label: '深圳市' },
+            { value: '东莞市', label: '东莞市' },
+            { value: '佛山市', label: '佛山市' },
+            { value: '珠海市', label: '珠海市' }
+        ],
+        '江苏省': [
+            { value: '南京市', label: '南京市' },
+            { value: '苏州市', label: '苏州市' },
+            { value: '无锡市', label: '无锡市' },
+            { value: '常州市', label: '常州市' },
+            { value: '南通市', label: '南通市' }
+        ],
+        '浙江省': [
+            { value: '杭州市', label: '杭州市' },
+            { value: '宁波市', label: '宁波市' },
+            { value: '温州市', label: '温州市' },
+            { value: '嘉兴市', label: '嘉兴市' },
+            { value: '湖州市', label: '湖州市' }
+        ],
+        '四川省': [
+            { value: '成都市', label: '成都市' },
+            { value: '绵阳市', label: '绵阳市' },
+            { value: '德阳市', label: '德阳市' },
+            { value: '自贡市', label: '自贡市' },
+            { value: '泸州市', label: '泸州市' }
+        ],
+        '湖北省': [
+            { value: '武汉市', label: '武汉市' },
+            { value: '黄石市', label: '黄石市' },
+            { value: '十堰市', label: '十堰市' },
+            { value: '宜昌市', label: '宜昌市' },
+            { value: '襄阳市', label: '襄阳市' }
+        ],
+        '湖南省': [
+            { value: '长沙市', label: '长沙市' },
+            { value: '株洲市', label: '株洲市' },
+            { value: '湘潭市', label: '湘潭市' },
+            { value: '衡阳市', label: '衡阳市' },
+            { value: '邵阳市', label: '邵阳市' }
+        ],
+        '山东省': [
+            { value: '济南市', label: '济南市' },
+            { value: '青岛市', label: '青岛市' },
+            { value: '烟台市', label: '烟台市' },
+            { value: '潍坊市', label: '潍坊市' },
+            { value: '临沂市', label: '临沂市' }
+        ],
+        '河南省': [
+            { value: '郑州市', label: '郑州市' },
+            { value: '开封市', label: '开封市' },
+            { value: '洛阳市', label: '洛阳市' },
+            { value: '平顶山市', label: '平顶山市' },
+            { value: '安阳市', label: '安阳市' }
+        ]
+    }
+    return cityMap[selectedProvince.value] || []
+})
+
+// 区县数据（根据城市动态生成）
+const districts = computed(() => {
+    const districtMap: Record<string, Array<{ value: string; label: string }>> = {
+        '北京市': [
+            { value: '东城区', label: '东城区' },
+            { value: '西城区', label: '西城区' },
+            { value: '朝阳区', label: '朝阳区' },
+            { value: '海淀区', label: '海淀区' },
+            { value: '丰台区', label: '丰台区' }
+        ],
+        '上海市': [
+            { value: '黄浦区', label: '黄浦区' },
+            { value: '徐汇区', label: '徐汇区' },
+            { value: '长宁区', label: '长宁区' },
+            { value: '静安区', label: '静安区' },
+            { value: '普陀区', label: '普陀区' }
+        ],
+        '广州市': [
+            { value: '天河区', label: '天河区' },
+            { value: '越秀区', label: '越秀区' },
+            { value: '海珠区', label: '海珠区' },
+            { value: '荔湾区', label: '荔湾区' },
+            { value: '白云区', label: '白云区' }
+        ],
+        '深圳市': [
+            { value: '福田区', label: '福田区' },
+            { value: '罗湖区', label: '罗湖区' },
+            { value: '南山区', label: '南山区' },
+            { value: '宝安区', label: '宝安区' },
+            { value: '龙岗区', label: '龙岗区' }
+        ],
+        '南京市': [
+            { value: '玄武区', label: '玄武区' },
+            { value: '秦淮区', label: '秦淮区' },
+            { value: '建邺区', label: '建邺区' },
+            { value: '鼓楼区', label: '鼓楼区' },
+            { value: '浦口区', label: '浦口区' }
+        ],
+        '苏州市': [
+            { value: '姑苏区', label: '姑苏区' },
+            { value: '虎丘区', label: '虎丘区' },
+            { value: '吴中区', label: '吴中区' },
+            { value: '相城区', label: '相城区' },
+            { value: '吴江区', label: '吴江区' }
+        ],
+        '杭州市': [
+            { value: '上城区', label: '上城区' },
+            { value: '下城区', label: '下城区' },
+            { value: '江干区', label: '江干区' },
+            { value: '拱墅区', label: '拱墅区' },
+            { value: '西湖区', label: '西湖区' }
+        ],
+        '宁波市': [
+            { value: '海曙区', label: '海曙区' },
+            { value: '江北区', label: '江北区' },
+            { value: '北仑区', label: '北仑区' },
+            { value: '镇海区', label: '镇海区' },
+            { value: '鄞州区', label: '鄞州区' }
+        ],
+        '成都市': [
+            { value: '锦江区', label: '锦江区' },
+            { value: '青羊区', label: '青羊区' },
+            { value: '金牛区', label: '金牛区' },
+            { value: '武侯区', label: '武侯区' },
+            { value: '成华区', label: '成华区' }
+        ],
+        '武汉市': [
+            { value: '江岸区', label: '江岸区' },
+            { value: '江汉区', label: '江汉区' },
+            { value: '硚口区', label: '硚口区' },
+            { value: '汉阳区', label: '汉阳区' },
+            { value: '武昌区', label: '武昌区' }
+        ],
+        '长沙市': [
+            { value: '芙蓉区', label: '芙蓉区' },
+            { value: '天心区', label: '天心区' },
+            { value: '岳麓区', label: '岳麓区' },
+            { value: '开福区', label: '开福区' },
+            { value: '雨花区', label: '雨花区' }
+        ],
+        '济南市': [
+            { value: '历下区', label: '历下区' },
+            { value: '市中区', label: '市中区' },
+            { value: '槐荫区', label: '槐荫区' },
+            { value: '天桥区', label: '天桥区' },
+            { value: '历城区', label: '历城区' }
+        ],
+        '郑州市': [
+            { value: '中原区', label: '中原区' },
+            { value: '二七区', label: '二七区' },
+            { value: '管城回族区', label: '管城回族区' },
+            { value: '金水区', label: '金水区' },
+            { value: '上街区', label: '上街区' }
+        ]
+    }
+    return districtMap[selectedCity.value] || []
+})
+
+// 方法
+const selectProvince = (province: { value: string; label: string }) => {
+    selectedProvince.value = province.value
+    selectedCity.value = ''
+    selectedDistrict.value = ''
+    activeTab.value = 'city'
+}
+
+const selectCity = (city: { value: string; label: string }) => {
+    selectedCity.value = city.value
+    selectedDistrict.value = ''
+    activeTab.value = 'district'
+}
+
+const selectDistrict = (district: { value: string; label: string }) => {
+    selectedDistrict.value = district.value
+    // 完成选择，提交结果
+    emit('address', {
+        province: selectedProvince.value,
+        city: selectedCity.value,
+        district: selectedDistrict.value
+    })
+    close()
+}
+
+const close = () => {
+    // 重置状态
+    activeTab.value = 'province'
+    selectedProvince.value = ''
+    selectedCity.value = ''
+    selectedDistrict.value = ''
+    emit('update:visible', false)
+}
+
+</script>
+
+<style scoped>
+.address-form-content {
+    background-color: white;
+    border-radius: 16px 16px 0 0;
+    max-height: 80vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+    color: #999;
+    padding: 0;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.close-btn:hover {
+    color: #333;
+}
+
+.form-tab {
+    display: flex;
+    border-bottom: 1px solid #e8e8e8;
+}
+
+.tab-item {
+    flex: 1;
+    padding: 14px 0;
+    text-align: center;
+    font-size: 14px;
+    color: #666;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.tab-item.active {
+    color: #1890ff;
+    border-bottom-color: #1890ff;
+}
+
+.tab-item.disabled {
+    color: #ccc;
+    cursor: not-allowed;
+}
+
+.form-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+}
+
+.tab-content {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+}
+
+.region-item {
+    padding: 12px;
+    text-align: center;
+    border: 1px solid #e8e8e8;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.3s ease;
+}
+
+.region-item:hover {
+    border-color: #1890ff;
+    color: #1890ff;
+}
+
+
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .tab-content {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 480px) {
+    .tab-content {
+        grid-template-columns: 1fr;
+    }
+
+    .form-content {
+        padding: 12px;
+    }
+
+    .region-item {
+        padding: 10px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/Component/common/Search.vue b/src/Component/common/Search.vue
new file mode 100644
index 0000000..61699eb
--- /dev/null
+++ b/src/Component/common/Search.vue
@@ -0,0 +1,444 @@
+<!-- 搜索组件 -->
+<template>
+    <div class="search-component">
+        <!-- 搜索类型选择 -->
+        <div v-if="false" class="search-type-selector">
+            <ul>
+                <li class="search-type-item" :class="{ active: currentSearchType === '宝贝' }"
+                    @click="setSearchType('宝贝', $event)">
+                    宝贝
+                </li>
+                <li class="search-type-item" :class="{ active: currentSearchType === '店铺' }"
+                    @click="setSearchType('店铺', $event)">
+                    店铺
+                </li>
+            </ul>
+        </div>
+
+        <!-- 搜索输入区域 -->
+        <div class="search-input-wrapper">
+            <div class="search-input-prefix">
+                <i class="iconfont icon-sousuo prefix-icon"></i>
+            </div>
+            <Input v-model:value="searchValue" placeholder="商品昵称/商品编号/订单编号" style="width: 100%" @search="onSearch"
+                @focus="onInputFocus" @blur="onInputBlur" class="custom-search-input" />
+            <div class="search-input-suffix" v-if="searchValue">
+                <i class="iconfont icon-guanbi" @click="clearSearch"></i>
+            </div>
+        </div>
+
+        <!-- 搜索按钮 -->
+        <div class="search-button-container" @click="onSearch()">
+            <span class="search-button-text">搜索</span>
+            <div class="search-button-icon">
+                <i class="iconfont icon-sousuo"></i>
+            </div>
+        </div>
+
+        <!-- 搜索历史记录 -->
+        <div class="search-history-container" v-if="showHistory">
+            <div class="search-history-header">
+                <span class="history-title">搜索历史</span>
+                <a class="clear-history" @click="clearHistory" href="javascript:void(0)">
+                    清空历史
+                </a>
+            </div>
+            <div class="search-history-tags" v-if="historyList.length > 0">
+                <Tag v-for="(item, index) in historyList" :key="index" class="history-tag"
+                    @click="onClickHistory(item)">
+                    {{ item }}
+                </Tag>
+            </div>
+            <div class="no-history" v-else>
+                暂无搜索历史
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Input, Tag } from 'ant-design-vue'
+
+const router = useRouter()
+const emit = defineEmits(['search'])
+// 搜索关键词
+const searchValue = ref('')
+// 控制历史记录显示状态
+const showHistory = ref(false)
+// 标志：是否正在清空历史记录
+const isClearingHistory = ref(false)
+// 当前搜索类型
+const currentSearchType = ref('宝贝')
+// 搜索历史记录
+const historyList = ref(['手机', '电脑', '耳机', '键盘', '鼠标'])
+
+// 搜索事件
+const onSearch = (value?: string) => {
+    const keyword = value || searchValue.value
+    if (!keyword.trim()) return
+
+    console.log('搜索关键词:', keyword)
+    console.log('搜索类型:', currentSearchType.value)
+
+    // 添加到历史记录
+    // if (!historyList.value.includes(keyword)) {
+    //     historyList.value.unshift(keyword)
+    //     // 限制历史记录数量
+    //     if (historyList.value.length > 10) {
+    //         historyList.value.pop()
+    //     }
+    // }
+
+    // 跳转到搜索结果页面
+    // router.push({
+    //     name: 'search',
+    //     query: {
+    //         keyword: keyword,
+    //         type: currentSearchType.value
+    //     }
+    // })
+    emit('search', keyword)
+}
+
+// 搜索框获得焦点
+const onInputFocus = () => {
+    showHistory.value = true
+}
+
+// 搜索框失去焦点
+const onInputBlur = () => {
+    // 使用setTimeout确保点击历史记录的事件能先执行
+    setTimeout(() => {
+        // 如果正在清空历史记录，则不隐藏历史记录容器
+        if (!isClearingHistory.value) {
+            showHistory.value = false
+        }
+    }, 200)
+}
+
+// 设置搜索类型
+const setSearchType = (type: string, event: MouseEvent) => {
+    const typeItems = document.querySelectorAll('.search-type-item')
+    // 找到当前活跃的元素
+    const currentActiveItem = document.querySelector('.search-type-item.active')
+    // 保存点击的元素引用
+    const clickedTarget = event.currentTarget as HTMLElement
+
+    // 为当前活跃的元素添加消失动画
+    if (currentActiveItem && currentActiveItem !== clickedTarget) {
+        if (currentSearchType.value === '宝贝' && type === '店铺') {
+            // 宝贝 -> 店铺：宝贝元素从左往右消失
+            currentActiveItem.classList.add('animate-right-out')
+        } else if (currentSearchType.value === '店铺' && type === '宝贝') {
+            // 店铺 -> 宝贝：店铺元素从右往左消失
+            currentActiveItem.classList.add('animate-left-out')
+        }
+
+        // 等待消失动画完成后再继续
+        setTimeout(() => {
+            // 移除所有元素的类
+            typeItems.forEach(item => {
+                item.classList.remove('active', 'animate-left', 'animate-right', 'animate-left-out', 'animate-right-out')
+            })
+
+            // 添加active类到点击的元素
+            if (clickedTarget) {
+                // 判断切换方向
+                if (currentSearchType.value === '宝贝' && type === '店铺') {
+                    // 宝贝 -> 店铺：从左往右出现
+                    clickedTarget.classList.add('active', 'animate-right')
+                } else if (currentSearchType.value === '店铺' && type === '宝贝') {
+                    // 店铺 -> 宝贝：从右往左出现
+                    clickedTarget.classList.add('active', 'animate-left')
+                } else {
+                    // 默认动画
+                    clickedTarget.classList.add('active')
+                }
+                currentSearchType.value = type
+            }
+            console.log('搜索类型:', type)
+
+        }, 300)
+    } else {
+        // 如果点击的是当前活跃的元素，直接返回
+        return
+    }
+}
+
+// 清除搜索输入
+const clearSearch = () => {
+    searchValue.value = ''
+    console.log('已清除搜索输入')
+}
+
+// 点击历史记录
+const onClickHistory = (item: string) => {
+    searchValue.value = item
+    onSearch(item)
+}
+
+// 清空历史记录
+const clearHistory = () => {
+    isClearingHistory.value = true
+    historyList.value = []
+    // 300ms后重置标志，确保onInputBlur的200ms延迟执行完毕
+    setTimeout(() => {
+        isClearingHistory.value = false
+    }, 300)
+    console.log('已清空搜索历史')
+}
+</script>
+
+<style scoped>
+.search-component {
+    display: flex;
+    width: 100%;
+}
+
+/* 搜索类型选择 */
+.search-type-selector {
+    margin-bottom: 10px;
+}
+
+.search-type-selector ul {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.search-type-item {
+    padding: 8px 16px;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.3s ease;
+    border-radius: var(--border-radius-md);
+    margin-right: 10px;
+}
+
+.search-type-item:hover {
+    background-color: var(--bg-light);
+}
+
+.search-type-item.active {
+    color: var(--primary-color);
+    font-weight: 600;
+    background-color: var(--primary-light);
+}
+
+/* 动画效果 */
+.animate-left {
+    animation: slideInLeft 0.3s ease-in-out;
+}
+
+.animate-right {
+    animation: slideInRight 0.3s ease-in-out;
+}
+
+.animate-left-out {
+    animation: slideOutLeft 0.3s ease-in-out;
+}
+
+.animate-right-out {
+    animation: slideOutRight 0.3s ease-in-out;
+}
+
+@keyframes slideInLeft {
+    from {
+        transform: translateX(-20px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideInRight {
+    from {
+        transform: translateX(20px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOutLeft {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+
+    to {
+        transform: translateX(-20px);
+        opacity: 0;
+    }
+}
+
+@keyframes slideOutRight {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+
+    to {
+        transform: translateX(20px);
+        opacity: 0;
+    }
+}
+
+/* 搜索输入区域 */
+.search-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background-color: var(--bg-white);
+    border: 2px solid var(--border-light);
+    border-right: none;
+    border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
+    padding: 0 12px 0 5px;
+    transition: all 0.3s ease;
+}
+
+.search-input-wrapper:focus-within {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px var(--primary-light);
+}
+
+.search-input-prefix {
+    margin-right: 8px;
+    color: var(--text-secondary);
+}
+
+.prefix-icon {
+    font-size: 16px;
+}
+
+.custom-search-input {
+    border: none !important;
+    box-shadow: none !important;
+}
+
+.custom-search-input:focus {
+    border: none !important;
+    box-shadow: none !important;
+}
+
+.search-input-suffix {
+    margin-left: 8px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: color 0.3s ease;
+}
+
+.search-input-suffix:hover {
+    color: var(--primary-color);
+}
+
+/* 搜索按钮 */
+.search-button-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--primary-color);
+    color: var(--bg-white);
+    border: none;
+    border-radius:  0 var(--border-radius-md) var(--border-radius-md) 0;
+    padding: 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 500;
+}
+
+.search-button-container:hover {
+    color: white;
+}
+
+.search-button-text {
+}
+
+.search-button-icon {
+    font-size: 16px;
+}
+
+/* 搜索历史记录 */
+.search-history-container {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: var(--bg-white);
+    border: 1px solid var(--border-light);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow-md);
+    padding: 16px;
+    margin-top: 4px;
+    z-index: 100;
+}
+
+.search-history-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.history-title {
+    font-weight: 600;
+    color: var(--text-dark);
+}
+
+.clear-history {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-size: 14px;
+    transition: color 0.3s ease;
+}
+
+.clear-history:hover {
+    color: var(--primary-color);
+}
+
+.search-history-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.history-tag {
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.history-tag:hover {
+    background-color: var(--primary-light) !important;
+    color: var(--primary-color) !important;
+}
+
+.no-history {
+    text-align: center;
+    color: var(--text-secondary);
+    padding: 20px 0;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .search-type-selector {
+        flex-wrap: wrap;
+    }
+
+    .search-type-item {
+        margin-bottom: 8px;
+    }
+
+    .search-button-container {
+        width: 100%;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/Component/common/page.vue b/src/Component/common/page.vue
new file mode 100644
index 0000000..1c61db7
--- /dev/null
+++ b/src/Component/common/page.vue
@@ -0,0 +1,63 @@
+<!-- 分页组件 -->
+<template>
+  <div class="pagination">
+    <ul>
+      <li v-for="page in totalPages" :key="page">
+        <a href="#" @click="changePage(page)">{{ page }}</a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  totalPages: {
+    type: Number,
+    default: 1
+  }
+})
+
+const emit = defineEmits(['changePage'])
+
+const changePage = (page: number) => {
+  emit('changePage', page)
+}
+</script>
+
+<style scoped>
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: var(--spacing-md);
+}
+
+.pagination ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  list-style: none;
+}
+
+.pagination ul li {
+  margin: 0 var(--spacing-xs);
+}
+
+.pagination ul li a {
+  display: block;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: 1px solid var(--border-light);
+  border-radius: var(--border-radius);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--primary-color);
+  transition: all var(--transition-normal) ease;
+}
+
+.pagination ul li a:hover {
+  background-color: var(--primary-color);
+  color: var(--text-color);
+}
+</style>
diff --git a/src/Route/route.ts b/src/Route/route.ts
index 513b5a2..5bc6d46 100644
--- a/src/Route/route.ts
+++ b/src/Route/route.ts
@@ -6,7 +6,6 @@ import Login from '../Views/Login.vue'
 import Search from '../Views/Search.vue'
 import ProductDetail from '../Views/product/productdetil.vue'
 import Cart from '../Views/Cart.vue'
-import Order from '../Views/Order.vue'
 import User from '../Views/User/User.vue'
 import Chat from '../Views/Chat.vue'
 
@@ -38,11 +37,6 @@ const routes = [
     name: 'cart',
     component: Cart
   },
-  {
-    path: '/order',
-    name: 'order',
-    component: Order
-  },
   {
     path: '/user',
     name: 'user',
diff --git a/src/Util/Type.ts b/src/Util/Type.ts
index 0377ffe..6b5fa30 100644
--- a/src/Util/Type.ts
+++ b/src/Util/Type.ts
@@ -25,19 +25,31 @@ export type Cart = {
 // 商品类型
 export type Product = {
   id: string
-  name: string
-  price: string
-  img: string
-  model: string
+  name: string; // 商品名称
+  description: string; // 商品描述
+  price: number; // 商品价格
+  quantity: number; // 商品数量
+  image: string; // 商品图片
+  model: string; // 商品型号
 }
-
-// 订单详情类型
+// 订单商品类型
+export type OrderProduct = {
+  productId: string | number // 商品 ID
+  quantity: number // 商品数量
+  // 其他待补充字段，如型号、颜色等
+}
+// 订单类型
 export type OrderDetail = {
-  id: string
-  name: string
-  price: string
-  img: string
-  count: number
+  id: string // 订单 ID
+  shopName: string // 店铺名称
+  receiverName: string // 收货人
+  orderId: string // 订单 ID
+  createTime: string // 创建时间
+  status: string // 订单状态
+  statusText: string // 订单状态文本
+  totalAmount: number // 订单总金额
+  paymentMethod: string // 支付方式
+  goods: Product[] // 商品列表
 }
 // 注册类型
 export type Register = {
@@ -49,4 +61,16 @@ export type Register = {
 export type Login = {
   username: string
   password: string
+  rememberMe: boolean
+}
+// 地址类型
+export type Address = {
+  id: number;           // 修改时有 ID，新增时无
+  name: string;          // 收货人
+  phone: string;         // 手机号
+  province: string;      // 省
+  city: string;          // 市
+  district: string;      // 区
+  detail: string;        // 详细地址（街道、门牌号等）
+  isDefault: boolean;    // 是否默认地址
 }
\ No newline at end of file
diff --git a/src/Views/Cart.vue b/src/Views/Cart.vue
index f663363..0a69433 100644
--- a/src/Views/Cart.vue
+++ b/src/Views/Cart.vue
@@ -580,17 +580,17 @@ const removeItem = (id: number) => {
 }
 
 .cart-item-model {
-    font-size: 16px;
-    padding: 18px 32px;
-    color: #666;
-    border-radius: 18px;
+    font-size: var(--font-size-base);
+    padding: var(--spacing-lg) var(--spacing-xl);
+    color: var(--text-secondary);
+    border-radius: var(--border-radius-lg);
     cursor: pointer;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition: all var(--transition-transform);
     position: relative;
     overflow: hidden;
-    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
-    border: 2px solid #f0f0f0;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    background: linear-gradient(135deg, var(--bg-light) 0%, var(--card-bg) 100%);
+    border: 2px solid var(--border-color);
+    box-shadow: var(--shadow-md);
     font-weight: 500;
 }
 
@@ -601,8 +601,8 @@ const removeItem = (id: number) => {
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 80, 0, 0.15), transparent);
-    transition: left 0.6s ease;
+    background: linear-gradient(90deg, transparent, rgba(var(--primary-light-rgb), 0.15), transparent);
+    transition: left var(--transition-slow);
     z-index: 0;
 }
 
@@ -613,18 +613,18 @@ const removeItem = (id: number) => {
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(135deg, rgba(255, 80, 0, 0.08) 0%, rgba(255, 80, 0, 0.04) 100%);
+    background: linear-gradient(135deg, rgba(var(--primary-light-rgb), 0.08) 0%, rgba(var(--primary-light-rgb), 0.04) 100%);
     opacity: 0;
-    transition: opacity 0.4s ease;
+    transition: opacity var(--transition-transform);
     z-index: -1;
-    border-radius: 18px;
+    border-radius: var(--border-radius-lg);
 }
 
 .cart-item-model:hover {
-    border: 2px dashed #ff5000;
-    color: #ff5000;
+    border: 2px dashed var(--primary-color);
+    color: var(--primary-color);
     transform: translateY(-5px) scale(1.05);
-    box-shadow: 0 10px 24px rgba(255, 80, 0, 0.2);
+    box-shadow: 0 10px 24px rgba(var(--primary-light-rgb), 0.2);
 }
 
 .cart-item-model:hover::before {
@@ -659,13 +659,13 @@ const removeItem = (id: number) => {
     width: 200px;
     display: flex;
     flex-direction: column;
-    gap: 16px;
-    padding: 15px;
-    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
-    border-radius: 20px;
-    border: 2px solid #f0f0f0;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    gap: var(--spacing-md);
+    padding: var(--spacing-md);
+    background: linear-gradient(135deg, var(--bg-light) 0%, var(--card-bg) 100%);
+    border-radius: var(--border-radius-xl);
+    border: 2px solid var(--border-color);
+    transition: all var(--transition-transform);
+    box-shadow: var(--shadow-md);
     position: relative;
 }
 
@@ -676,16 +676,16 @@ const removeItem = (id: number) => {
     left: -2px;
     right: -2px;
     bottom: -2px;
-    border-radius: 20px;
-    background: linear-gradient(135deg, #ff5000, #ff8500, #ff5000);
+    border-radius: var(--border-radius-xl);
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover), var(--primary-color));
     z-index: -1;
     opacity: 0;
-    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition: opacity var(--transition-transform);
 }
 
 .cart-item:hover .cart-item-price {
-    border-color: #ff5000;
-    box-shadow: 0 10px 30px rgba(255, 80, 0, 0.2);
+    border-color: var(--primary-color);
+    box-shadow: 0 10px 30px rgba(var(--primary-light-rgb), 0.2);
     transform: translateY(-4px);
 }
 
@@ -718,25 +718,25 @@ const removeItem = (id: number) => {
 }
 
 .price-label {
-    font-size: 14px;
-    color: #666;
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
     font-weight: 600;
-    background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
-    padding: 8px 20px;
-    border-radius: 20px;
+    background: linear-gradient(135deg, var(--bg-primary-light) 0%, var(--bg-primary-lighter) 100%);
+    padding: var(--spacing-xs) var(--spacing-lg);
+    border-radius: var(--border-radius-xl);
     align-self: flex-start;
-    border: 1px solid #ffece5;
-    transition: all 0.3s ease;
-    box-shadow: 0 3px 12px rgba(255, 80, 0, 0.1);
+    border: 1px solid var(--border-color);
+    transition: all var(--transition-normal);
+    box-shadow: 0 3px 12px rgba(var(--primary-light-rgb), 0.1);
     position: relative;
     z-index: 1;
 }
 
 .cart-item:hover .price-label {
-    background: linear-gradient(135deg, #ff5000 0%, #ff6b00 100%);
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
     color: #ffffff;
-    border-color: #ff5000;
-    box-shadow: 0 6px 20px rgba(255, 80, 0, 0.35);
+    border-color: var(--primary-color);
+    box-shadow: 0 6px 20px rgba(var(--primary-light-rgb), 0.35);
     transform: scale(1.08);
     animation: label-pulse 0.6s ease;
 }
@@ -751,10 +751,10 @@ const removeItem = (id: number) => {
 }
 
 .price-symbol {
-    font-size: 16px;
-    color: #ff5000;
+    font-size: var(--font-size-base);
+    color: var(--primary-color);
     font-weight: 600;
-    transition: all 0.3s ease;
+    transition: all var(--transition-normal);
 }
 
 .cart-item:hover .price-symbol {
@@ -762,42 +762,42 @@ const removeItem = (id: number) => {
 }
 
 .price-value {
-    font-size: 26px;
-    color: #ff5000;
+    font-size: var(--font-size-2xl);
+    color: var(--primary-color);
     font-weight: 700;
     line-height: 1;
-    transition: all 0.3s ease;
+    transition: all var(--transition-normal);
     position: relative;
-    text-shadow: 0 2px 4px rgba(255, 80, 0, 0.2);
+    text-shadow: 0 2px 4px rgba(var(--primary-light-rgb), 0.2);
 }
 
 .cart-item:hover .price-value {
     transform: scale(1.05);
-    text-shadow: 0 4px 8px rgba(255, 80, 0, 0.35);
+    text-shadow: 0 4px 8px rgba(var(--primary-light-rgb), 0.35);
 }
 
 .original-price .price-symbol {
-    font-size: 13px;
-    color: #999;
+    font-size: var(--font-size-xs);
+    color: var(--text-tertiary);
 }
 
 .original-price .price-value {
-    font-size: 16px;
-    color: #999;
+    font-size: var(--font-size-base);
+    color: var(--text-tertiary);
     text-decoration: line-through;
     text-shadow: none;
 }
 
 .discount-badge {
-    background: linear-gradient(135deg, #ff5000 0%, #ff6b00 100%);
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
     color: #ffffff;
-    font-size: 11px;
+    font-size: var(--font-size-xs);
     font-weight: 600;
-    padding: 4px 12px;
-    border-radius: 12px;
-    margin-left: 6px;
-    box-shadow: 0 3px 6px rgba(255, 80, 0, 0.25);
-    transition: all 0.3s ease;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--border-radius-sm);
+    margin-left: var(--spacing-xs);
+    box-shadow: 0 3px 6px rgba(var(--primary-light-rgb), 0.25);
+    transition: all var(--transition-normal);
     position: relative;
     overflow: hidden;
 }
@@ -1006,12 +1006,12 @@ const removeItem = (id: number) => {
 .cart-item-quantity {
     display: flex;
     align-items: center;
-    gap: 12px;
-    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
-    padding: 10px 20px;
-    border-radius: 32px;
-    border: 2px solid #f0f0f0;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    gap: var(--spacing-sm);
+    background: linear-gradient(135deg, var(--bg-light) 0%, var(--card-bg) 100%);
+    padding: var(--spacing-sm) var(--spacing-lg);
+    border-radius: var(--border-radius-2xl);
+    border: 2px solid var(--border-color);
+    transition: all var(--transition-transform);
     position: relative;
     overflow: hidden;
 }
@@ -1023,13 +1023,13 @@ const removeItem = (id: number) => {
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 80, 0, 0.08), transparent);
-    transition: left 0.6s ease;
+    background: linear-gradient(90deg, transparent, rgba(var(--primary-light-rgb), 0.08), transparent);
+    transition: left var(--transition-slow);
 }
 
 .cart-item:hover .cart-item-quantity {
-    border-color: #ff5000;
-    box-shadow: 0 6px 16px rgba(255, 80, 0, 0.15);
+    border-color: var(--primary-color);
+    box-shadow: 0 6px 16px rgba(var(--primary-light-rgb), 0.15);
     transform: translateY(-2px);
 }
 
@@ -1040,14 +1040,14 @@ const removeItem = (id: number) => {
 .quantity-btn {
     width: 40px;
     height: 40px;
-    border: 2px solid #f0f0f0;
-    background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
-    border-radius: 50%;
+    border: 2px solid var(--border-color);
+    background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%);
+    border-radius: var(--border-radius-full);
     cursor: pointer;
     font-size: 22px;
     font-weight: 700;
-    color: #666;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    color: var(--text-secondary);
+    transition: all var(--transition-transform);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1063,9 +1063,9 @@ const removeItem = (id: number) => {
     left: 50%;
     width: 0;
     height: 0;
-    background: linear-gradient(135deg, #ff5000 0%, #ff7300 100%);
-    border-radius: 50%;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+    border-radius: var(--border-radius-full);
+    transition: all var(--transition-transform);
     transform: translate(-50%, -50%);
     z-index: 0;
 }
@@ -1076,10 +1076,10 @@ const removeItem = (id: number) => {
 }
 
 .quantity-btn:hover {
-    border-color: #ff5000;
+    border-color: var(--primary-color);
     color: #ffffff;
     transform: scale(1.15);
-    box-shadow: 0 6px 16px rgba(255, 80, 0, 0.35);
+    box-shadow: 0 6px 16px rgba(var(--primary-light-rgb), 0.35);
 }
 
 .quantity-btn:active {
@@ -1124,22 +1124,22 @@ const removeItem = (id: number) => {
     width: 80px;
     height: 40px;
     text-align: center;
-    border: 2px solid #f0f0f0;
-    border-radius: 12px;
-    font-size: 18px;
-    color: #333;
+    border: 2px solid var(--border-color);
+    border-radius: var(--border-radius-md);
+    font-size: var(--font-size-lg);
+    color: var(--text-primary);
     font-weight: 600;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
+    transition: all var(--transition-transform);
+    background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%);
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
 .quantity-input:focus {
     outline: none;
-    border-color: #ff5000;
-    box-shadow: 0 0 0 4px rgba(255, 80, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.08);
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 4px rgba(var(--primary-light-rgb), 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.08);
     transform: scale(1.1);
-    background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
+    background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-primary-light) 100%);
 }
 
 .quantity-input::-webkit-inner-spin-button,
@@ -1174,28 +1174,28 @@ const removeItem = (id: number) => {
     width: 160px;
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: var(--spacing-md);
     align-items: center;
-    padding: 10px 0;
+    padding: var(--spacing-sm) 0;
 }
 
 .cart-action-btn {
     display: flex;
     align-items: center;
-    gap: 10px;
-    padding: 12px 30px;
-    border-radius: 32px;
-    font-size: 15px;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-xl);
+    border-radius: var(--border-radius-2xl);
+    font-size: var(--font-size-base);
     font-weight: 600;
     cursor: pointer;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition: all var(--transition-transform);
     border: 2px solid transparent;
     position: relative;
     overflow: hidden;
     text-decoration: none;
     min-width: 120px;
     justify-content: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--shadow-sm);
 }
 
 .cart-action-btn::before {
@@ -1205,8 +1205,8 @@ const removeItem = (id: number) => {
     left: 50%;
     width: 0;
     height: 0;
-    border-radius: 50%;
-    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    border-radius: var(--border-radius-full);
+    transition: all var(--transition-slow);
     transform: translate(-50%, -50%);
     z-index: 0;
 }
@@ -1218,7 +1218,7 @@ const removeItem = (id: number) => {
 
 .cart-action-btn:hover {
     transform: translateY(-3px) scale(1.05);
-    box-shadow: 0 8px 24px rgba(255, 80, 0, 0.25);
+    box-shadow: 0 8px 24px rgba(var(--primary-light-rgb), 0.25);
 }
 
 .cart-action-btn:active {
@@ -1242,43 +1242,43 @@ const removeItem = (id: number) => {
 }
 
 .delete-btn {
-    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
-    border-color: #ff4d4f;
-    color: #ff4d4f;
+    background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%);
+    border-color: var(--error-color);
+    color: var(--error-color);
 }
 
 .delete-btn::before {
-    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
+    background: linear-gradient(135deg, var(--error-color) 0%, #ff7875 100%);
 }
 
 .delete-btn:hover {
     color: #ffffff;
-    border-color: #ff4d4f;
+    border-color: var(--error-color);
 }
 
 .favorite-btn {
-    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
-    border-color: #ff5000;
-    color: #ff5000;
+    background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
 }
 
 .favorite-btn::before {
-    background: linear-gradient(135deg, #ff5000 0%, #ff7300 100%);
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
 }
 
 .favorite-btn:hover {
     color: #ffffff;
-    border-color: #ff5000;
+    border-color: var(--primary-color);
 }
 
 .favorite-btn.favorited {
-    background: linear-gradient(135deg, #ff5000 0%, #ff7300 100%);
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
     color: #ffffff;
-    border-color: #ff5000;
+    border-color: var(--primary-color);
 }
 
 .favorite-btn.favorited:hover {
-    background: linear-gradient(135deg, #ff7300 0%, #ff5000 100%);
+    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-color) 100%);
 }
 
 .favorite-btn.favorited i::before {
@@ -1290,9 +1290,9 @@ const removeItem = (id: number) => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 25px 40px;
-    border-top: 2px solid #f0f0f0;
-    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
+    padding: var(--spacing-lg) var(--spacing-xxl);
+    border-top: 2px solid var(--border-color);
+    background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%);
     position: sticky;
     bottom: 0;
     z-index: 100;
@@ -1301,77 +1301,77 @@ const removeItem = (id: number) => {
 .footer-left {
     display: flex;
     align-items: center;
-    gap: 30px;
+    gap: var(--spacing-xl);
 }
 
 .select-all {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--spacing-xs);
     cursor: pointer;
-    font-size: 14px;
-    color: #666;
-    transition: all 0.3s ease;
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
+    transition: all var(--transition-normal);
 }
 
 .select-all:hover {
-    color: #ff5000;
+    color: var(--primary-color);
 }
 
 .selected-count {
-    font-size: 14px;
-    color: #666;
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
 }
 
 .count {
-    font-size: 18px;
+    font-size: var(--font-size-lg);
     font-weight: 700;
-    color: #ff5000;
+    color: var(--primary-color);
 }
 
 .footer-right {
     display: flex;
     align-items: center;
-    gap: 30px;
+    gap: var(--spacing-xl);
 }
 
 .total-price {
     display: flex;
     align-items: baseline;
-    gap: 5px;
+    gap: var(--spacing-xs);
 }
 
 .total-label {
-    font-size: 16px;
-    color: #666;
+    font-size: var(--font-size-base);
+    color: var(--text-secondary);
     font-weight: 500;
 }
 
 .total-symbol {
-    font-size: 20px;
-    color: #ff5000;
+    font-size: var(--font-size-lg);
+    color: var(--primary-color);
     font-weight: 600;
 }
 
 .total-value {
-    font-size: 32px;
-    color: #ff5000;
+    font-size: var(--font-size-3xl);
+    color: var(--primary-color);
     font-weight: 700;
 }
 
 .checkout-btn {
-    padding: 12px 40px;
-    font-size: 16px;
+    padding: var(--spacing-sm) var(--spacing-xxl);
+    font-size: var(--font-size-base);
     font-weight: 600;
-    border-radius: 24px;
-    background: linear-gradient(135deg, #ff5000 0%, #ff6b00 100%);
+    border-radius: var(--border-radius-xl);
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
     border: none;
-    box-shadow: 0 4px 12px rgba(255, 80, 0, 0.3);
-    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px rgba(var(--primary-light-rgb), 0.3);
+    transition: all var(--transition-normal);
 }
 
 .checkout-btn:hover {
     transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(255, 80, 0, 0.4);
+    box-shadow: 0 6px 20px rgba(var(--primary-light-rgb), 0.4);
 }
 </style>
\ No newline at end of file
diff --git a/src/Views/Chat.vue b/src/Views/Chat.vue
index 614d09c..90536d4 100644
--- a/src/Views/Chat.vue
+++ b/src/Views/Chat.vue
@@ -467,52 +467,52 @@ const sendMessage = () => {
     display: flex;
     align-items: center;
     width: 100%;
-    padding: 10px;
-    border-bottom: 1px solid #e0e0e0;
+    padding: var(--spacing-sm);
+    border-bottom: 1px solid var(--border-color);
 }
 
 .chat-user-info h3 {
     margin: 0 0 2px;
-    font-size: 16px;
+    font-size: var(--font-size-base);
     font-weight: 600;
-    color: #333333;
+    color: var(--text-primary);
 }
 
 .user-status {
-    font-size: 12px;
-    color: #4caf50;
+    font-size: var(--font-size-xs);
+    color: var(--success-color);
     margin: 0;
 }
 
 .chat-actions {
     display: flex;
-    gap: 10px;
+    gap: var(--spacing-sm);
 }
 
 .action-btn {
     width: 36px;
     height: 36px;
-    border-radius: 50%;
-    background-color: #f0f0f0;
+    border-radius: var(--border-radius-full);
+    background-color: var(--bg-light);
     border: none;
     cursor: pointer;
-    font-size: 16px;
+    font-size: var(--font-size-base);
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all 0.3s ease;
+    transition: all var(--transition-normal);
 }
 
 .action-btn:hover {
-    background-color: #e0e0e0;
+    background-color: var(--border-color);
 }
 
 /* 聊天历史 */
 .chat-history {
     flex: 1;
-    padding: 20px;
+    padding: var(--spacing-xl);
     overflow-y: auto;
-    background-color: #f5f5f5;
+    background-color: var(--bg-color);
     background-image: url('?prompt=chat%20background%20pattern%20subtle%20light&image_size=landscape_16_9');
     background-size: cover;
     background-position: center;
@@ -520,7 +520,7 @@ const sendMessage = () => {
 
 .chat-message {
     display: flex;
-    margin-bottom: 15px;
+    margin-bottom: var(--spacing-md);
     align-items: flex-end;
 }
 
@@ -530,7 +530,7 @@ const sendMessage = () => {
 
 .chat-message.sent .user-avatar {
     margin-right: 0;
-    margin-left: 10px;
+    margin-left: var(--spacing-sm);
 }
 
 .message-content {
@@ -544,55 +544,55 @@ const sendMessage = () => {
 }
 
 .message-text {
-    padding: 10px 15px;
-    border-radius: 18px;
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-radius: var(--message-radius);
     margin-bottom: 4px;
     line-height: 1.4;
 }
 
 .chat-message.received .message-text {
-    background-color: #ffffff;
+    background-color: var(--card-bg);
     border-bottom-left-radius: 4px;
 }
 
 .chat-message.sent .message-text {
-    background-color: #ff5000;
+    background-color: var(--primary-color);
     color: #ffffff;
     border-bottom-right-radius: 4px;
 }
 
 .message-time {
-    font-size: 11px;
-    color: #999999;
+    font-size: var(--font-size-xs);
+    color: var(--text-tertiary);
 }
 
 /* 消息输入区 */
 .chat-input-area {
-    background-color: #f5f5f5;
-    padding: 15px 20px;
-    border-top: 1px solid #e0e0e0;
-    border-radius: 0 0 10px 0;
+    background-color: var(--bg-color);
+    padding: var(--spacing-md) var(--spacing-xl);
+    border-top: 1px solid var(--border-color);
+    border-radius: 0 0 var(--border-radius-lg) 0;
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: var(--spacing-sm);
 }
 
 .input-container {
     flex: 1;
     display: flex;
     align-items: center;
-    background-color: #f0f0f0;
-    border-radius: 24px;
-    padding: 8px 15px;
-    gap: 10px;
+    background-color: var(--bg-light);
+    border-radius: var(--border-radius-xl);
+    padding: var(--spacing-xs) var(--spacing-md);
+    gap: var(--spacing-sm);
 }
 
 .input-btn {
     background: none;
     border: none;
-    font-size: 16px;
+    font-size: var(--font-size-base);
     cursor: pointer;
-    padding: 4px;
+    padding: var(--spacing-xs);
 }
 
 .message-input {
@@ -600,29 +600,29 @@ const sendMessage = () => {
     border: none;
     background: none;
     outline: none;
-    font-size: 14px;
-    color: #333333;
+    font-size: var(--font-size-sm);
+    color: var(--text-primary);
     min-width: 0;
 }
 
 .message-input::placeholder {
-    color: #999999;
+    color: var(--text-tertiary);
 }
 
 .send-btn {
-    padding: 8px 20px;
-    background-color: #ff5000;
+    padding: var(--spacing-xs) var(--spacing-xl);
+    background-color: var(--primary-color);
     color: #ffffff;
     border: none;
-    border-radius: 20px;
+    border-radius: var(--border-radius-xl);
     cursor: pointer;
-    font-size: 14px;
+    font-size: var(--font-size-sm);
     font-weight: 600;
-    transition: all 0.3s ease;
+    transition: all var(--transition-normal);
 }
 
 .send-btn:hover {
-    background-color: #ff6a00;
+    background-color: var(--primary-hover);
 }
 
 /* 空状态 */
@@ -632,29 +632,29 @@ const sendMessage = () => {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background-color: #f5f5f5;
-    padding: 40px;
+    background-color: var(--bg-color);
+    padding: var(--spacing-xxl);
     text-align: center;
 }
 
 .empty-state img {
     width: 120px;
     height: 120px;
-    margin-bottom: 20px;
+    margin-bottom: var(--spacing-xl);
     opacity: 0.6;
 }
 
 .empty-state h3 {
-    margin: 0 0 10px;
-    font-size: 18px;
+    margin: 0 0 var(--spacing-md);
+    font-size: var(--font-size-lg);
     font-weight: 600;
-    color: #333333;
+    color: var(--text-primary);
 }
 
 .empty-state p {
     margin: 0;
-    font-size: 14px;
-    color: #999999;
+    font-size: var(--font-size-sm);
+    color: var(--text-tertiary);
 }
 
 /* 响应式设计 */
diff --git a/src/Views/Login.vue b/src/Views/Login.vue
index 206a114..540af85 100644
--- a/src/Views/Login.vue
+++ b/src/Views/Login.vue
@@ -24,12 +24,20 @@
           <div v-if="errorMessage" class="error-message">
             {{ errorMessage }}
           </div>
+          <!-- 记住我 如果用户登录成功，记住用户信息，5天内无需重新登录 -->
+          <div class="form-group remember-me">
+            <label class="checkbox-label">
+              <input type="checkbox" v-model="loginform.rememberMe" class="checkbox-input">
+              <span class="checkbox-text">记住我</span>
+            </label>
+          </div>
 
+          <!-- 登录按钮 -->
           <button type="submit" class="login-button" :disabled="isLoading">
             <span v-if="isLoading" class="loading-spinner"></span>
             {{ isLoading ? '登录中...' : '登录' }}
           </button>
-
+          <!-- 注册链接 -->
           <div class="login-footer">
             <p class="register-link">
               还没有账号？ <a href="#" @click.prevent="router.push({ name: 'register' })">立即注册</a>
@@ -51,7 +59,8 @@ const router = useRouter()
 
 const loginform = ref<Login>({
   username: '',
-  password: ''
+  password: '',
+  rememberMe: false
 })
 
 const errorMessage = ref('')
@@ -140,6 +149,37 @@ const login = async () => {
   box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
 }
 
+/* 记住我复选框样式 */
+.remember-me {
+  display: flex;
+  align-items: center;
+  margin: 15px 0;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.checkbox-input {
+  margin-right: 8px;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.checkbox-text {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+}
+
+.checkbox-text:hover {
+  color: #fff;
+}
+
 /* 登录头部 */
 .login-header {
   text-align: center;
diff --git a/src/Views/User/UpdataAddress.vue b/src/Views/User/UpdataAddress.vue
new file mode 100644
index 0000000..d37467b
--- /dev/null
+++ b/src/Views/User/UpdataAddress.vue
@@ -0,0 +1,446 @@
+<!-- 更新地址弹窗 上下结构 上方有一个输入框可以识别地址更新到下方  下方有可以更新地址信息（省份、城市、区县、详细地址） -->
+<!-- 父组件会传递一个地址对象  子组件需要根据这个地址对象更新弹窗的地址信息 -->
+<template>
+    <a-modal :open="visible" title="更新地址" :footer="null" width="500px">
+        <div class="modal-content">
+            <!-- 地址识别输入框 -->
+            <div class="form-group">
+                <label for="address-input">地址识别</label>
+                <a-input v-model:value="addressInput" placeholder="请输入完整地址，系统会自动识别省份、城市、区县"
+                    @change="handleAddressRecognition" />
+                <div v-if="recognitionError" class="error-message">{{ recognitionError }}</div>
+            </div>
+
+            <!-- 地址信息表单 -->
+            <div class="form-group">
+                <label for="province">省份 <span class="required">*</span></label>
+                <a-select v-model:value="form.province" :options="provinceOptions" placeholder="请选择省份"
+                    @change="handleProvinceChange" />
+                <div v-if="errors.province" class="error-message">{{ errors.province }}</div>
+            </div>
+            <div class="form-group">
+                <label for="city">城市 <span class="required">*</span></label>
+                <a-select v-model:value="form.city" :options="cityOptions" placeholder="请选择城市"
+                    @change="handleCityChange" />
+                <div v-if="errors.city" class="error-message">{{ errors.city }}</div>
+            </div>
+            <div class="form-group">
+                <label for="district">区县 <span class="required">*</span></label>
+                <a-select v-model:value="form.district" :options="districtOptions" placeholder="请选择区县" />
+                <div v-if="errors.district" class="error-message">{{ errors.district }}</div>
+            </div>
+            <div class="form-group">
+                <label for="detailAddress">详细地址 <span class="required">*</span></label>
+                <a-input v-model:value="form.detail" placeholder="请输入详细地址（街道、楼栋、门牌号等）" :rows="3" type="textarea" />
+                <div v-if="errors.detail" class="error-message">{{ errors.detail }}</div>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <a-button @click="handleCancel">取消</a-button>
+            <a-button type="primary" @click="handleOk">确认更新</a-button>
+        </div>
+    </a-modal>
+</template>
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import type { Address } from '@/Util/Type'
+const props = defineProps({
+    // 设置弹窗显示状态控制
+    visible: {
+        type: Boolean,
+        default: false,
+    },
+    // 传递的地址对象
+    address: {
+        type: Object as () => Address,
+        default: () => ({
+            name: '',
+            phone: '',
+            province: '',
+            city: '',
+            district: '',
+            detail: '',
+            isDefault: false
+        }) as Address,
+    }
+})
+// 定义事件
+const emit = defineEmits(['update:visible', 'update:updateaddress'])
+// 弹窗显示状态控制
+const visible = ref(props.visible)
+// 表单数据
+const form = ref<Address>({
+    id:props.address.id ,
+    name: props.address.name,
+    phone: props.address.phone,
+    province: props.address.province,
+    city: props.address.city,
+    district: props.address.district,
+    detail: props.address.detail,
+    isDefault: props.address.isDefault
+})
+
+// 地址识别输入框
+const addressInput = ref('')
+const recognitionError = ref('')
+
+// 表单验证错误
+const errors = ref({
+    name: '',
+    phone: '',
+    province: '',
+    city: '',
+    district: '',
+    detail: '',
+    isDefault: ''
+})
+
+// 定义类型
+interface Data {
+    [key: string]: { label: string; value: string }[] | undefined;
+}
+// 城市选项（根据省份动态生成）
+const cityOptions = ref<any[]>([])
+
+// 区县选项（根据城市动态生成）
+const districtOptions = ref<any[]>([])
+
+// 省份选项
+const provinceOptions = ref([
+    { label: '北京市', value: '北京市' },
+    { label: '上海市', value: '上海市' },
+    { label: '广东省', value: '广东省' },
+    { label: '浙江省', value: '浙江省' },
+    { label: '江苏省', value: '江苏省' },
+    { label: '四川省', value: '四川省' },
+    { label: '湖北省', value: '湖北省' },
+    { label: '湖南省', value: '湖南省' },
+    { label: '山东省', value: '山东省' },
+    { label: '河南省', value: '河南省' }
+])
+
+// 城市数据
+const cityData: Data = {
+    '北京市': [{ label: '北京市', value: '北京市' }],
+    '上海市': [{ label: '上海市', value: '上海市' }],
+    '广东省': [
+        { label: '广州市', value: '广州市' },
+        { label: '深圳市', value: '深圳市' },
+        { label: '东莞市', value: '东莞市' },
+        { label: '佛山市', value: '佛山市' }
+    ],
+    '浙江省': [
+        { label: '杭州市', value: '杭州市' },
+        { label: '宁波市', value: '宁波市' },
+        { label: '温州市', value: '温州市' },
+        { label: '嘉兴市', value: '嘉兴市' }
+    ],
+    '江苏省': [
+        { label: '南京市', value: '南京市' },
+        { label: '苏州市', value: '苏州市' },
+        { label: '无锡市', value: '无锡市' },
+        { label: '常州市', value: '常州市' }
+    ]
+}
+
+// 区县数据
+const districtData: Data = {
+    '北京市-北京市': [
+        { label: '东城区', value: '东城区' },
+        { label: '西城区', value: '西城区' },
+        { label: '朝阳区', value: '朝阳区' },
+        { label: '海淀区', value: '海淀区' },
+        { label: '丰台区', value: '丰台区' },
+        { label: '石景山区', value: '石景山区' },
+        { label: '门头沟区', value: '门头沟区' },
+        { label: '房山区', value: '房山区' },
+        { label: '通州区', value: '通州区' },
+        { label: '顺义区', value: '顺义区' }
+    ],
+    '上海市-上海市': [
+        { label: '黄浦区', value: '黄浦区' },
+        { label: '徐汇区', value: '徐汇区' },
+        { label: '长宁区', value: '长宁区' },
+        { label: '静安区', value: '静安区' },
+        { label: '普陀区', value: '普陀区' },
+        { label: '虹口区', value: '虹口区' },
+        { label: '杨浦区', value: '杨浦区' },
+        { label: '浦东新区', value: '浦东新区' }
+    ],
+    '广东省-广州市': [
+        { label: '越秀区', value: '越秀区' },
+        { label: '海珠区', value: '海珠区' },
+        { label: '荔湾区', value: '荔湾区' },
+        { label: '天河区', value: '天河区' },
+        { label: '白云区', value: '白云区' },
+        { label: '黄埔区', value: '黄埔区' },
+        { label: '番禺区', value: '番禺区' },
+        { label: '花都区', value: '花都区' }
+    ],
+    '浙江省-杭州市': [
+        { label: '上城区', value: '上城区' },
+        { label: '下城区', value: '下城区' },
+        { label: '江干区', value: '江干区' },
+        { label: '拱墅区', value: '拱墅区' },
+        { label: '西湖区', value: '西湖区' },
+        { label: '滨江区', value: '滨江区' },
+        { label: '萧山区', value: '萧山区' },
+        { label: '余杭区', value: '余杭区' }
+    ]
+}
+
+// 监听 address 变化  用于更新弹窗的地址信息
+watch(() => props.address, (newVal) => {
+    if (newVal) {
+        form.value = { ...newVal }
+        // 更新城市和区县选项
+        handleProvinceChange(newVal.province)
+        if (newVal.city) {
+            handleCityChange(newVal.city)
+        }
+    }
+}, { deep: true })
+// 监听 visible 变化  用于更新弹窗的显示状态
+watch(() => props.visible, (newVal) => {
+    visible.value = newVal
+})
+// 监听弹窗关闭事件
+watch(() => props.visible, (newVal) => {
+    if (!newVal) {
+        // 重置表单
+        form.value = {
+            id:0,
+            name: '',
+            phone: '',
+            province: '',
+            city: '',
+            district: '',
+            detail: '',
+            isDefault: false
+        }
+        addressInput.value = ''
+        recognitionError.value = ''
+        errors.value = {
+            name: '',
+            phone: '',
+            province: '',
+            city: '',
+            district: '',
+            detail: '',
+            isDefault: ''
+        }
+        cityOptions.value = []
+        districtOptions.value = []
+    }
+})
+
+// 地址识别处理
+const handleAddressRecognition = () => {
+    if (!addressInput.value) {
+        recognitionError.value = ''
+        return
+    }
+
+    // 简单的地址识别逻辑（实际项目中可以使用更复杂的算法或API）
+    const address = addressInput.value
+    let province = ''
+    let city = ''
+    let district = ''
+    let detail = ''
+
+    // 识别省份
+    const provinces = provinceOptions.value.map(p => p.value)
+    for (const p of provinces) {
+        if (address.includes(p)) {
+            province = p
+            break
+        }
+    }
+
+    // 识别城市
+    // if (province && (cityData as Record<string, { label: string; value: string }[]>)[province]) {
+    //     const cities = cityData[province].map((c: { value: any }) => c.value)
+    //     for (const c of cities) {
+    //         if (address.includes(c)) {
+    //             city = c
+    //             break
+    //         }
+    //     }
+    // }
+
+    // 识别区县
+    // if (province && city && districtData[`${province}-${city}`]) {
+    //     const districts = districtData[`${province}-${city}`].map((d: { value: any }) => d.value)
+    //     for (const d of districts) {
+    //         if (address.includes(d)) {
+    //             district = d
+    //             break
+    //         }
+    //     }
+    // }
+
+    // 提取详细地址
+    if (province && city && district) {
+        detail = address.replace(province, '').replace(city, '').replace(district, '').trim()
+    } else if (province && city) {
+        detail = address.replace(province, '').replace(city, '').trim()
+    } else if (province) {
+        detail = address.replace(province, '').trim()
+    } else {
+        detail = address
+    }
+
+    // 更新表单
+    if (province) {
+        form.value.province = province
+        handleProvinceChange(province)
+        if (city) {
+            form.value.city = city
+            handleCityChange(city)
+            if (district) {
+                form.value.district = district
+            }
+        }
+        form.value.detail = detail
+        recognitionError.value = ''
+    } else {
+        recognitionError.value = '未能识别出省份，请手动选择'
+    }
+}
+
+// 省份变化处理
+const handleProvinceChange = (province: string) => {
+    form.value.province = province
+    form.value.city = ''
+    form.value.district = ''
+
+    // 更新城市选项
+    if (province && cityData[province]) {
+        cityOptions.value = cityData[province]
+    } else {
+        cityOptions.value = []
+    }
+    districtOptions.value = []
+
+    // 清除验证错误
+    errors.value.province = ''
+    errors.value.city = ''
+    errors.value.district = ''
+}
+
+// 城市变化处理
+const handleCityChange = (city: string) => {
+    form.value.city = city
+    form.value.district = ''
+
+    // 更新区县选项
+    if (form.value.province && city && districtData[`${form.value.province}-${city}`]) {
+        districtOptions.value = districtData[`${form.value.province}-${city}`] ?? []
+    } else {
+        districtOptions.value = []
+    }
+
+    // 清除验证错误
+    errors.value.city = ''
+    errors.value.district = ''
+}
+
+// 表单验证
+const validateForm = (): boolean => {
+    let isValid = true
+
+    // 重置错误信息
+    errors.value = {
+        name: '',
+        phone: '',
+        province: '',
+        city: '',
+        district: '',
+        detail: '',
+        isDefault: ''
+    }
+
+    // 验证省份
+    if (!form.value.province) {
+        errors.value.province = '请选择省份'
+        isValid = false
+    }
+
+    // 验证城市
+    if (!form.value.city) {
+        errors.value.city = '请选择城市'
+        isValid = false
+    }
+
+    // 验证区县
+    if (!form.value.district) {
+        errors.value.district = '请选择区县'
+        isValid = false
+    }
+
+    // 验证详细地址
+    if (!form.value.detail) {
+        errors.value.detail = '请输入详细地址'
+        isValid = false
+    } else if (form.value.detail.length < 5) {
+        errors.value.detail = '详细地址至少需要5个字符'
+        isValid = false
+    }
+
+    return isValid
+}
+
+// 点击确认按钮 触发事件  用于更新父组件的 address
+const handleOk = () => {
+    // 表单验证
+    if (!validateForm()) {
+        return
+    }
+    emit('update:updateaddress', form.value)
+    emit('update:visible', false)
+}
+
+// 点击取消按钮
+const handleCancel = () => {
+    emit('update:visible', false)
+}
+</script>
+<style scoped>
+.modal-content {
+    padding: var(--spacing-md);
+}
+
+.form-group {
+    margin-bottom: var(--spacing-md);
+}
+
+label {
+    display: block;
+    margin-bottom: var(--spacing-sm);
+    font-weight: 500;
+}
+
+.required {
+    color: var(--error-color, #ff4d4f);
+}
+
+.error-message {
+    color: var(--error-color, #ff4d4f);
+    font-size: 12px;
+    margin-top: 4px;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md);
+    border-top: 1px solid var(--border-light, #e8e8e8);
+    margin-top: var(--spacing-lg);
+}
+
+/* 为textarea添加最小高度 */
+:deep(.ant-input-textarea) {
+    min-height: 80px;
+}
+</style>
diff --git a/src/Views/User/User.vue b/src/Views/User/User.vue
index b30379c..3963565 100644
--- a/src/Views/User/User.vue
+++ b/src/Views/User/User.vue
@@ -5,10 +5,10 @@
     <div id="user-center-nav">
       <div class="nav-header">
         <div class="user-avatar">
-          <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=user%20avatar%20portrait%20friendly%20smile&image_size=square" alt="用户头像">
+          <img :src="user.avatar" alt="用户头像">
         </div>
         <div class="user-info">
-          <h3>用户名</h3>
+          <h3>{{ user.username }}</h3>
           <p class="user-level">普通会员</p>
         </div>
       </div>
@@ -29,6 +29,15 @@
           <i class="nav-icon favorite-icon"></i>
           <span>收藏</span>
         </li>
+        <li :class="{ active: activeNav === 'follow' }" @click="setActiveNav('follow')">
+          <i class="nav-icon follow-icon"></i>
+          <span>关注</span>
+        </li>
+        <!-- 优惠相关界面 -->
+        <li :class="{ active: activeNav === 'coupon' }" @click="setActiveNav('coupon')">
+          <i class="nav-icon coupon-icon"></i>
+          <span>我的卡卷包</span>
+        </li>
         <li :class="{ active: activeNav === 'customerService' }" @click="setActiveNav('customerService')">
           <i class="nav-icon service-icon"></i>
           <span>客服</span>
@@ -37,6 +46,7 @@
           <i class="nav-icon help-icon"></i>
           <span>帮助中心</span>
         </li>
+
       </ul>
     </div>
     <!-- 右边内容 -->
@@ -79,7 +89,7 @@
             </div>
           </div>
         </div>
-        
+
         <!-- 用户统计数据 -->
         <div class="user-stats">
           <div class="stat-item">
@@ -115,83 +125,275 @@
             <button class="modify-btn">修改</button>
           </div>
         </div>
-        
+
+        <!-- 订单状态卡片 -->
+        <div class="order-status-card">
+          <div class="card-header">
+            <h3 class="card-title">我的订单</h3>
+          </div>
+          <div class="order-status-grid">
+            <div class="status-item" @click="navigateToOrder('pending_payment')">
+              <div class="status-icon">
+                <CreditCardOutlined />
+              </div>
+              <div class="status-label">待付款</div>
+              <div class="status-badge" v-if="orderCounts.pending_payment > 0">{{ orderCounts.pending_payment }}</div>
+            </div>
+            <div class="status-item" @click="navigateToOrder('pending_shipment')">
+              <div class="status-icon">
+                <LoadingOutlined />
+              </div>
+              <div class="status-label">待发货</div>
+              <div class="status-badge" v-if="orderCounts.pending_shipment > 0">{{ orderCounts.pending_shipment }}</div>
+            </div>
+            <div class="status-item" @click="navigateToOrder('pending_receipt')">
+              <div class="status-icon">
+                <CarOutlined />
+              </div>
+              <div class="status-label">待收货</div>
+              <div class="status-badge" v-if="orderCounts.pending_receipt > 0">{{ orderCounts.pending_receipt }}</div>
+            </div>
+            <div class="status-item" @click="navigateToOrder('pending_review')">
+              <div class="status-icon">
+                <SolutionOutlined />
+              </div>
+              <div class="status-label">待评价</div>
+              <div class="status-badge" v-if="orderCounts.pending_review > 0">{{ orderCounts.pending_review }}</div>
+            </div>
+            <div class="status-item" @click="navigateToOrder('completed')">
+              <div class="status-icon">
+                <CheckOutlined />
+              </div>
+              <div class="status-label">已完成</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 功能菜单网格 -->
+        <div class="user-function-grid">
+          <!-- 购物相关 -->
+          <div class="function-card">
+            <div class="card-header">
+              <h3 class="card-title">购物相关</h3>
+            </div>
+            <div class="function-grid">
+              <div class="function-item" @click="navigateTo('/cart')">
+                <div class="function-icon">
+                  <ShoppingCartOutlined />
+                </div>
+                <div class="function-label">购物车</div>
+              </div>
+              <div class="function-item" @click="setActiveNav('favorite')">
+                <div class="function-icon">
+                  <HeartOutlined />
+                </div>
+                <div class="function-label">收藏夹</div>
+              </div>
+              <div class="function-item" @click="navigateTo('/user/history')">
+                <div class="function-icon">
+                  <HistoryOutlined />
+                </div>
+                <div class="function-label">浏览历史</div>
+              </div>
+              <div class="function-item" @click="navigateTo('/user/followed_shops')">
+                <div class="function-icon">
+                  <ShopOutlined />
+                </div>
+                <div class="function-label">关注店铺</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 优惠相关 -->
+          <div class="function-card">
+            <div class="card-header">
+              <h3 class="card-title">优惠相关</h3>
+            </div>
+            <div class="function-grid">
+              <div class="function-item" @click="navigateTo('/user/coupons')">
+                <div class="function-icon">
+                  <GiftOutlined />
+                </div>
+                <div class="function-label">红包</div>
+                <div class="function-badge" v-if="user.couponCount > 0">{{ user.couponCount }}</div>
+              </div>
+              <div class="function-item" @click="navigateTo('/user/discounts')">
+                <div class="function-icon">
+                  <TagOutlined />
+                </div>
+                <div class="function-label">优惠券</div>
+                <div class="function-badge" v-if="user.discountCount > 0">{{ user.discountCount }}</div>
+              </div>
+              <div class="function-item" @click="navigateTo('/user/tao_coin')">
+                <div class="function-icon">
+                  <GoldOutlined />
+                </div>
+                <div class="function-label">淘币</div>
+                <div class="function-value">{{ user.taoCoin }}</div>
+              </div>
+              <div class="function-item" @click="navigateTo('/user/points')">
+                <div class="function-icon">
+                  <TrophyOutlined />
+                </div>
+                <div class="function-label">积分</div>
+                <div class="function-value">{{ user.points }}</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 账户相关 -->
+          <div class="function-card">
+            <div class="card-header">
+              <h3 class="card-title">账户相关</h3>
+            </div>
+            <div class="function-grid">
+              <div class="function-item" @click="setActiveNav('userInfo')">
+                <div class="function-icon">
+                  <SettingOutlined />
+                </div>
+                <div class="function-label">账户设置</div>
+              </div>
+              <div class="function-item" @click="setActiveNav('address')">
+                <div class="function-icon">
+                  <EnvironmentOutlined />
+                </div>
+                <div class="function-label">收货地址</div>
+              </div>
+              <div class="function-item" @click="setActiveNav('customerService')">
+                <div class="function-icon">
+                  <CustomerServiceOutlined />
+                </div>
+                <div class="function-label">客服中心</div>
+              </div>
+              <div class="function-item" @click="setActiveNav('help')">
+                <div class="function-icon">
+                  <QuestionCircleOutlined />
+                </div>
+                <div class="function-label">帮助中心</div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      
+
       <!-- 地址管理 -->
       <div v-if="activeNav === 'address'" class="content-section">
         <div class="section-header">
           <h2>地址管理</h2>
-          <button class="add-btn">添加新地址</button>
+          <button class="add-btn" @click="addAddress">添加新地址</button>
         </div>
         <div class="address-list">
-          <div class="address-item">
+          <div v-for="addressItem in addresses" :key="addressItem.id" class="address-item">
             <div class="address-header">
-              <span class="address-name">张三</span>
-              <span class="address-phone">138****8888</span>
-              <span class="address-tag default">默认</span>
+              <span class="address-name">{{ addressItem.name }}</span>
+              <span class="address-phone">{{ addressItem.phone }}</span>
+              <span v-if="addressItem.isDefault" class="address-tag default">默认</span>
             </div>
             <div class="address-detail">
-              北京市朝阳区建国路88号SOHO现代城A座2801室
+              {{ addressItem.province }}{{ addressItem.city }}{{ addressItem.district }}{{ addressItem.detail }}
             </div>
             <div class="address-actions">
-              <button class="edit-address-btn">编辑</button>
-              <button class="delete-address-btn">删除</button>
+              <button class="edit-address-btn" @click="editAddress(addressItem.id ?? 0)">编辑</button>
+              <button class="delete-address-btn" @click="deleteAddress(addressItem.id ?? 0)">删除</button>
             </div>
           </div>
-          <div class="address-item">
-            <div class="address-header">
-              <span class="address-name">李四</span>
-              <span class="address-phone">139****9999</span>
-            </div>
-            <div class="address-detail">
-              上海市浦东新区陆家嘴环路1000号汇丰银行大厦35楼
-            </div>
-            <div class="address-actions">
-              <button class="edit-address-btn">编辑</button>
-              <button class="delete-address-btn">删除</button>
-            </div>
+          <UpdataAddress :address="addressprops" v-model:visible="visible" v-model:updateaddress="updateaddress" />
+          <div v-if="addresses.length === 0" class="empty-address">
+            <p>暂无地址，请添加新地址</p>
           </div>
         </div>
       </div>
-      
+
       <!-- 订单 -->
       <div v-if="activeNav === 'order'" class="content-section">
         <div class="section-header">
           <h2>我的订单</h2>
         </div>
         <div class="order-tabs">
-          <button :class="{ active: activeOrderTab === 'all' }" @click="activeOrderTab = 'all'">全部</button>
-          <button :class="{ active: activeOrderTab === 'pending' }" @click="activeOrderTab = 'pending'">待付款</button>
-          <button :class="{ active: activeOrderTab === 'shipping' }" @click="activeOrderTab = 'shipping'">待发货</button>
-          <button :class="{ active: activeOrderTab === 'received' }" @click="activeOrderTab = 'received'">待收货</button>
-          <button :class="{ active: activeOrderTab === 'completed' }" @click="activeOrderTab = 'completed'">已完成</button>
-          <button :class="{ active: activeOrderTab === 'reviewed' }" @click="activeOrderTab = 'reviewed'">待评价</button>
+          <div class="tab-container">
+            <button :class="{ active: activeOrderTab === 'all' }" @click="navigateToOrder('all')">全部</button>
+            <button :class="{ active: activeOrderTab === 'pending' }"
+              @click="navigateToOrder('pending_payment')">待付款</button>
+            <button :class="{ active: activeOrderTab === 'shipping' }"
+              @click="navigateToOrder('pending_shipment')">待发货</button>
+            <button :class="{ active: activeOrderTab === 'received' }"
+              @click="navigateToOrder('pending_receipt')">待收货</button>
+            <button :class="{ active: activeOrderTab === 'completed' }"
+              @click="navigateToOrder('completed')">已完成</button>
+            <button :class="{ active: activeOrderTab === 'reviewed' }"
+              @click="navigateToOrder('pending_review')">待评价</button>
+          </div>
+          <div class="search-box">
+            <!-- 根据 商品昵称/商品编号/订单编号 搜索  -->
+            <Search class="search-box-input"    @search="handleSearch" />
+          </div>
         </div>
         <div class="order-list">
-          <div class="order-item">
+          <div v-for="order in orders" :key="order.id" class="order-item">
+            <!-- 订单头部信息 -->
             <div class="order-header">
-              <span class="order-time">2024-01-01 10:00:00</span>
-              <span class="order-status">已完成</span>
+              <div class="order-header-left">
+                <span class="order-time">下单时间：{{ order.createTime }}</span>
+                <span class="order-id">订单编号：{{ order.orderId }}</span>
+                <a class="shop-name" @click="visitShop(order.shopId)">{{ order.shopName }}</a>
+              </div>
+              <span class="order-status">{{ order.statusText }}</span>
             </div>
+            <!-- 订单商品信息 -->
             <div class="order-goods">
               <div class="goods-item">
-                <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=product%20image%20electronics&image_size=square" alt="商品图片">
+                <div class="goods-image">
+                  <img :src="order.goods.image" :alt="order.goods.name">
+                </div>
                 <div class="goods-info">
-                  <h4>商品名称</h4>
-                  <p>商品描述</p>
-                  <div class="goods-price">¥99.99</div>
+                  <h4 class="goods-name">{{ order.goods.name }}</h4>
+                  <p class="goods-desc">{{ order.goods.description }}</p>
+                </div>
+                <div class="goods-quantity">x{{ order.goods.quantity }}</div>
+                <div class="goods-receiver">{{ order.receiverName }}</div>
+                <div class="goods-amount">
+                 
+                  ¥{{ order.totalAmount.toFixed(2) }}
+                  <!-- 显示支付方式线上还是到付 -->
+                   <div class="order-amount">{{ order.paymentMethod === 'online' ? '线上支付' : '到付' }}</div>
+                </div>
+                <div class="goods-status">{{ order.statusText }}</div>
+                <div class="goods-actions">
+                  <!-- 未完成状态操作按钮 -->
+                  <template v-if="order.status === 'pending_receipt' || order.status === 'pending_review'">
+                    <button class="order-action-btn" @click="applyAfterSale(order.id)">申请售后</button>
+                    <button class="order-action-btn" @click="viewInvoice(order.id)">查看发票</button>
+                    <button class="order-action-btn" @click="reviewOrder(order.id)">评价</button>
+                    <button class="order-action-btn primary" @click="buyAgain(order.id)">再来一份</button>
+                  </template>
+                  
+                  <!-- 配送中状态操作按钮 -->
+                  <template v-else-if="order.status === 'pending_shipping'">
+                    <button class="order-action-btn" @click="cancelOrder(order.id)">取消</button>
+                    <button class="order-action-btn" @click="viewInvoice(order.id)">查看发票</button>
+                    <button class="order-action-btn primary" @click="remindShipping(order.id)">催单</button>
+                  </template>
+                  
+                  <!-- 已完成状态操作按钮 -->
+                  <template v-else-if="order.status === 'completed'">
+                    <button class="order-action-btn" @click="viewInvoice(order.id)">查看发票</button>
+                    <button class="order-action-btn primary" @click="buyAgain(order.id)">再来一份</button>
+                  </template>
                 </div>
               </div>
             </div>
-            <div class="order-footer">
-              <span class="order-total">共1件商品 合计：¥99.99</span>
-              <button class="order-btn">再次购买</button>
-            </div>
+          </div>
+          <!-- 分页 -->
+          <div>
+             <a-pagination v-model:current="current" :hideOnSinglePage="true" :total="totalPages" show-less-items />
+          </div>
+          <!-- 空订单提示 -->
+          <div v-if="orders.length === 0" class="empty-order">
+            <p>暂无订单</p>
           </div>
         </div>
       </div>
-      
+
       <!-- 收藏 -->
       <div v-if="activeNav === 'favorite'" class="content-section">
         <div class="section-header">
@@ -203,7 +405,9 @@
         </div>
         <div class="favorite-list">
           <div class="favorite-item">
-            <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=product%20image%20fashion&image_size=square" alt="收藏商品">
+            <img
+              src="https://neeko-copilot.bytedance.net/api/text2image?prompt=product%20image%20fashion&image_size=square"
+              alt="收藏商品">
             <div class="favorite-info">
               <h4>商品名称</h4>
               <p>商品描述</p>
@@ -212,7 +416,9 @@
             <button class="unfavorite-btn">取消收藏</button>
           </div>
           <div class="favorite-item">
-            <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=product%20image%20electronics&image_size=square" alt="收藏商品">
+            <img
+              src="https://neeko-copilot.bytedance.net/api/text2image?prompt=product%20image%20electronics&image_size=square"
+              alt="收藏商品">
             <div class="favorite-info">
               <h4>商品名称</h4>
               <p>商品描述</p>
@@ -222,7 +428,40 @@
           </div>
         </div>
       </div>
-      
+      <!-- 关注 -->
+      <div v-if="activeNav === 'follow'" class="content-section">
+        <div class="section-header">
+          <h2>关注店铺</h2>
+          <div class="follow-tabs">
+            <button :class="{ active: activeFollowTab === 'all' }" @click="activeFollowTab = 'all'">全部</button>
+            <button :class="{ active: activeFollowTab === 'visited' }" @click="activeFollowTab = 'visited'">逛过</button>
+            <button :class="{ active: activeFollowTab === 'purchased' }"
+              @click="activeFollowTab = 'purchased'">买过</button>
+          </div>
+        </div>
+        <div class="follow-list">
+          <div v-for="shop in filteredFollowShops" :key="shop.id" class="follow-item">
+            <div class="shop-avatar">
+              <img :src="shop.avatar" :alt="shop.name">
+            </div>
+            <div class="follow-info">
+              <h4 class="shop-name">{{ shop.name }}</h4>
+              <p class="shop-desc">{{ shop.description }}</p>
+              <div class="shop-stats">
+                <span class="shop-stat">{{ shop.fansCount }}粉丝</span>
+                <span class="shop-stat">{{ shop.goodsCount }}商品</span>
+              </div>
+            </div>
+            <div class="follow-actions">
+              <button class="visit-shop-btn" @click="visitShop(shop.id)">进店逛逛</button>
+              <button class="unfollow-btn" @click="unfollowShop(shop.id)">取消关注</button>
+            </div>
+          </div>
+          <div v-if="filteredFollowShops.length === 0" class="empty-follow">
+            <p>暂无关注店铺</p>
+          </div>
+        </div>
+      </div>
       <!-- 客服 -->
       <div v-if="activeNav === 'customerService'" class="content-section">
         <div class="section-header">
@@ -255,7 +494,7 @@
           </div>
         </div>
       </div>
-      
+
       <!-- 帮助中心 -->
       <div v-if="activeNav === 'help'" class="content-section">
         <div class="section-header">
@@ -296,26 +535,56 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { ShoppingCartOutlined, HeartOutlined, HistoryOutlined, ShopOutlined, GiftOutlined, GoldOutlined, TrophyOutlined, SettingOutlined, EnvironmentOutlined, CustomerServiceOutlined, QuestionCircleOutlined, CreditCardOutlined, CarOutlined, LoadingOutlined, CheckOutlined, SolutionOutlined, TagOutlined } from '@ant-design/icons-vue'
-
+import UpdataAddress from '@/Views/User/UpdataAddress.vue'
+import Search from '@/Component/common/Search.vue'
+import type { Address } from '@/Util/Type'
 const router = useRouter()
 const route = useRoute()
 
 // 当前活跃的导航项
 const activeNav = ref('userInfo')
-
+// 关注标签
+const activeFollowTab = ref('all')
 // 订单标签
 const activeOrderTab = ref('all')
-
 // 收藏标签
 const activeFavoriteTab = ref('goods')
+// 分页
+const current = ref(1)
+// 总页数
+const totalPages = ref(10)
 
+// 传给UpdataAddress组件的地址
+const addressprops = ref<Address>({
+  id:0,
+  name: '',
+  phone: '',
+  province: '',
+  city: '',
+  district: '',
+  detail: '',
+  isDefault: false
+})
+// 接收修改后的地址
+const updateaddress = ref<Address>({
+  id:0,
+  name: '',
+  phone: '',
+  province: '',
+  city: '',
+  district: '',
+  detail: '',
+  isDefault: false
+})
+// UpdataAddress组件控制
+const visible = ref(false)
 // 用户信息
 const user = ref({
   username: '用户名',
-  avatar: 'https://neeko-copilot.bytedance.net/api/text2image?prompt=user%20avatar%20portrait%20friendly%20smile&image_size=square',
+  avatar: '',
   level: 3,
   followCount: 12,
   fansCount: 8,
@@ -335,15 +604,153 @@ const orderCounts = ref({
   completed: 0
 })
 
-// 初始化时检查URL参数，设置活跃导航项
-onMounted(() => {
+// 地址列表
+const addresses = ref<Address[]>([
+  {
+    id: 1,
+    name: '张三',
+    phone: '138****8888',
+    province: '北京市',
+    city: '北京市',
+    district: '朝阳区',
+    detail: '建国路88号SOHO现代城A座2801室',
+    isDefault: true
+  },
+  {
+    id: 2,
+    name: '李四',
+    phone: '139****9999',
+    province: '上海市',
+    city: '上海市',
+    district: '浦东新区',
+    detail: '陆家嘴环路1000号汇丰银行大厦35楼',
+    isDefault: false
+  }
+])
+
+// 关注店铺列表
+const followShops = ref([
+  {
+    id: 1,
+    name: '时尚服饰旗舰店',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=shop1',
+    description: '专注于时尚服饰的设计与销售',
+    fansCount: 12580,
+    goodsCount: 236,
+    visited: true,
+    purchased: true
+  },
+  {
+    id: 2,
+    name: '数码科技专卖店',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=shop2',
+    description: '提供最新的数码产品和科技配件',
+    fansCount: 8960,
+    goodsCount: 189,
+    visited: true,
+    purchased: false
+  },
+  {
+    id: 3,
+    name: '美食零食铺',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=shop3',
+    description: '精选各类美食和休闲零食',
+    fansCount: 15600,
+    goodsCount: 342,
+    visited: false,
+    purchased: true
+  }
+])
+
+// 过滤后的关注店铺列表
+const filteredFollowShops = ref(followShops.value)
+
+// 监听关注标签变化，更新过滤后的店铺列表
+watch(
+  activeFollowTab,
+  (newTab) => {
+    switch (newTab) {
+      case 'all':
+        filteredFollowShops.value = followShops.value
+        break
+      case 'visited':
+        filteredFollowShops.value = followShops.value.filter(shop => shop.visited)
+        break
+      case 'purchased':
+        filteredFollowShops.value = followShops.value.filter(shop => shop.purchased)
+        break
+      default:
+        filteredFollowShops.value = followShops.value
+    }
+  },
+  { immediate: true }
+)
+
+// 访问店铺
+const visitShop = (shopId: number) => {
+  console.log('访问店铺:', shopId)
+  // 实际项目中这里会跳转到店铺详情页
+  // router.push(`/shop/${shopId}`)
+  alert(`访问店铺: ${shopId}`)
+}
+
+// 取消关注店铺
+const unfollowShop = (shopId: number) => {
+  console.log('取消关注店铺:', shopId)
+  // 实际项目中这里会调用API取消关注
+  console.log('取消关注店铺:', shopId)
+}
+
+// 编辑地址
+const editAddress = (addressId: number) => {
+  const address = addresses.value.find(a => a.id === addressId)
+  if (!address) {
+    console.error('地址不存在:', addressId)
+    return
+  }
+  // 将地址赋值给props，用于UpdataAddress组件
+  addressprops.value = address
+  // 打开UpdataAddress组件
+  visible.value = true
+  // 实际项目中这里会跳转到编辑地址页面或打开编辑弹窗
+  console.log('编辑地址:', addressId)
+}
+
+// 删除地址
+const deleteAddress = (addressId: number) => {
+  console.log('删除地址:', addressId)
+  // 实际项目中这里会调用API删除地址
+  if (confirm('确定要删除这个地址吗？')) {
+    console.log('删除地址:', addressId)
+  }
+}
+
+// 添加新地址
+const addAddress = () => {
+  console.log('添加新地址')
+  // 实际项目中这里会跳转到添加地址页面或打开添加弹窗
+  alert('添加新地址')
+}
+// 处理搜索
+const handleSearch = (keyword: string) => {
+  console.log('搜索关键词:', keyword)
+  // 为当前页面url基础上添加搜索关键词参数
+    router.push({
+      query: {
+        ...route.query,
+        keyword: keyword,
+      }
+    })
+}
+// 更新活跃导航项和订单标签
+const updateActiveNav = () => {
   const navParam = route.query.nav as string
   if (navParam) {
     activeNav.value = navParam
   }
-  
   // 检查订单状态参数
   const statusParam = route.query.status as string
+  // console.log("statusParam:", statusParam)
   if (statusParam) {
     // 根据状态设置对应的订单标签
     switch (statusParam) {
@@ -366,28 +773,147 @@ onMounted(() => {
         activeOrderTab.value = 'all'
     }
   }
-})
-
+}
 // 设置活跃导航项
 const setActiveNav = (nav: string) => {
   activeNav.value = nav
+  // 更新URL参数，保持URL和当前导航状态的一致性
+  router.push({
+    path: '/user',
+    query: {
+      nav: nav
+    }
+  })
 }
 
 // 导航到指定页面
 const navigateTo = (path: string) => {
-  router.push(path)
+  if (path === '/cart') {
+    router.push(path)
+  } else if (path === '/user/history') {
+    // 导航到订单历史页面时，设置导航项为history
+    router.push({ path: '/user', query: { nav: 'history' } })
+  } else if (path === '/user/followed_shops') {
+    // 导航到关注的店铺页面时，设置导航项为followed_shops
+    router.push({ path: '/user', query: { nav: 'followed_shops' } })
+  }
 }
 
 // 导航到订单页面并带上状态参数
 const navigateToOrder = (status: string) => {
-  router.push({ 
+  // console.log("navigateToOrder:", status)
+  router.push({
     path: '/user',
-    query: { 
+    query: {
       nav: 'order',
       status: status
-    } 
+    }
   })
 }
+
+// 订单数据模型
+const orders = ref([
+  {
+    id: 1,
+    orderId: '20240101123456',
+    createTime: '2024-01-01 10:00:00',
+    shopId: 1,
+    shopName: 'Apple官方旗舰店',
+    receiverName: '张三',
+    status: 'completed',
+    statusText: '已完成',
+    totalAmount: 5999,
+    paymentMethod: 'online',
+    goods: {
+      image: 'https://neeko-copilot.bytedance.net/api/text2image?prompt=iPhone%2015%20pro%20product%20image&image_size=square',
+      name: 'iPhone 15 Pro 256GB 钛金属色',
+      description: 'A17 Pro芯片，钛金属机身，全天候显示屏',
+      quantity: 1
+    }
+  },
+  {
+    id: 2,
+    orderId: '20240102123456',
+    createTime: '2024-01-02 15:30:00',
+    shopId: 2,
+    shopName: '小米官方旗舰店',
+    receiverName: '李四',
+    status: 'pending_receipt',
+    statusText: '待收货',
+    totalAmount: 3999,
+    paymentMethod: 'online',
+    goods: {
+      image: 'https://neeko-copilot.bytedance.net/api/text2image?prompt=Xiaomi%2014%20ultra%20product%20image&image_size=square',
+      name: '小米14 Ultra 512GB 黑色',
+      description: '骁龙8 Gen 3，徕卡四摄，120W快充',
+      quantity: 1
+    }
+  },
+  {
+    id: 3,
+    orderId: '20240103123456',
+    createTime: '2024-01-03 09:15:00',
+    shopId: 3,
+    shopName: '华为官方旗舰店',
+    receiverName: '王五',
+    status: 'pending_shipping',
+    statusText: '待发货',
+    totalAmount: 4999,
+    paymentMethod: 'online',
+    goods: {
+      image: 'https://neeko-copilot.bytedance.net/api/text2image?prompt=Huawei%20Mate%2060%20pro%20product%20image&image_size=square',
+      name: '华为Mate 60 Pro 512GB 玄黑',
+      description: '麒麟9000S，超感知徕卡三摄，66W快充',
+      quantity: 1
+    }
+  }
+])
+
+
+// 申请售后
+const applyAfterSale = (orderId: number) => {
+  console.log('申请售后:', orderId)
+  // 这里可以添加申请售后的逻辑
+}
+
+// 查看发票
+const viewInvoice = (orderId: number) => {
+  console.log('查看发票:', orderId)
+  // 这里可以添加查看发票的逻辑
+}
+
+// 评价订单
+const reviewOrder = (orderId: number) => {
+  console.log('评价订单:', orderId)
+  // 这里可以添加评价订单的逻辑
+}
+
+// 再来一份
+const buyAgain = (orderId: number) => {
+  console.log('再来一份:', orderId)
+  // 这里可以添加再来一份的逻辑
+}
+
+// 取消订单
+const cancelOrder = (orderId: number) => {
+  console.log('取消订单:', orderId)
+  // 这里可以添加取消订单的逻辑
+}
+
+// 催单
+const remindShipping = (orderId: number) => {
+  console.log('催单:', orderId)
+  // 这里可以添加催单的逻辑
+}
+// 如果路由参数更改，更新活跃导航项和订单标签
+watch(() => route.query, (newQuery) => {
+  updateActiveNav()
+})
+
+// 初始化时检查URL参数，设置活跃导航项
+onMounted(() => {
+  updateActiveNav()
+})
 </script>
 
 <style scoped>
@@ -516,6 +1042,278 @@ const navigateToOrder = (status: string) => {
   min-height: 600px;
 }
 
+/* 订单列表样式 */
+.order-list {
+  margin-top: var(--spacing-lg);
+}
+
+.order-item {
+  background-color: var(--bg-white);
+  border: 1px solid var(--border-light);
+  border-radius: var(--border-radius-md);
+  margin-bottom: var(--spacing-lg);
+  box-shadow: var(--shadow-sm);
+  transition: all var(--transition-normal) ease;
+}
+
+.order-item:hover {
+  box-shadow: var(--shadow-md);
+}
+
+/* 订单头部样式 */
+.order-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-bottom: 1px solid var(--border-light);
+  background-color: var(--bg-light);
+}
+
+.order-header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+}
+
+.order-time,
+.order-id {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.shop-name {
+  font-size: 14px;
+  color: var(--primary-color);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.shop-name:hover {
+  text-decoration: underline;
+}
+
+.order-status {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+/* 订单商品样式 */
+.order-goods {
+  padding: var(--spacing-lg);
+}
+
+.goods-item {
+  display: grid;
+  grid-template-columns: 100px 2fr 100px 120px 120px 100px 1fr;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-lg);
+  border: 1px solid var(--border-light);
+  border-radius: var(--border-radius-md);
+  background-color: var(--bg-white);
+  transition: all var(--transition-normal) ease;
+}
+
+.goods-item:hover {
+  box-shadow: var(--shadow-sm);
+  border-color: var(--primary-light);
+}
+
+.goods-image {
+  width: 80px;
+  height: 80px;
+  border-radius: var(--border-radius-md);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-light);
+  transition: all var(--transition-normal) ease;
+}
+
+.goods-image:hover {
+  transform: scale(1.05);
+  box-shadow: var(--shadow-md);
+}
+
+.goods-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.goods-info {
+  flex: 1;
+  padding: var(--spacing-sm);
+  max-width: 300px;
+}
+
+.goods-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-dark);
+  margin: 0 0 var(--spacing-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color var(--transition-normal) ease;
+}
+
+.goods-name:hover {
+  color: var(--primary-color);
+  text-decoration: underline;
+}
+
+.goods-desc {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.4;
+}
+
+.goods-quantity {
+  font-size: 14px;
+  color: var(--text-secondary);
+  text-align: center;
+  font-weight: 500;
+}
+
+.goods-receiver {
+  font-size: 14px;
+  color: var(--text-secondary);
+  text-align: center;
+  font-weight: 500;
+}
+
+.goods-amount {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--error-color);
+  text-align: center;
+}
+
+.order-amount {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--error-color);
+  text-align: center;
+  border-top: 3px solid var(--border-light);
+  padding: var(--spacing-md) 0;
+  margin-top: var(--spacing-md);
+}
+
+.goods-status {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--primary-color);
+  text-align: center;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--border-radius-full);
+  background-color: var(--primary-light);
+  width: fit-content;
+  margin: 0 auto;
+}
+
+/* 操作按钮样式 */
+.goods-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  justify-content: flex-end;
+  padding: var(--spacing-sm);
+}
+
+.order-action-btn {
+  padding: var(--spacing-xs) var(--spacing-md);
+  font-size: 13px;
+  border: 1px solid var(--border-light);
+  border-radius: var(--border-radius-sm);
+  background-color: var(--bg-white);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-normal) ease;
+  font-weight: 500;
+  min-width: 80px;
+  text-align: center;
+}
+
+.order-action-btn:hover {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-sm);
+}
+
+.order-action-btn.primary {
+  background-color: var(--primary-color);
+  color: var(--bg-white);
+  border-color: var(--primary-color);
+}
+
+.order-action-btn.primary:hover {
+  background-color: var(--primary-dark);
+  border-color: var(--primary-dark);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+/* 空订单提示 */
+.empty-order {
+  text-align: center;
+  padding: var(--spacing-xl) 0;
+  color: var(--text-secondary);
+  background-color: var(--bg-light);
+  border-radius: var(--border-radius-md);
+  border: 1px dashed var(--border-light);
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .goods-item {
+    grid-template-columns: 80px 1fr 60px 80px 100px 60px 1fr;
+    gap: var(--spacing-sm);
+  }
+}
+
+@media (max-width: 768px) {
+  .order-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+  }
+  
+  .order-header-left {
+    flex-wrap: wrap;
+    gap: var(--spacing-sm);
+  }
+  
+  .goods-item {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-md);
+    text-align: left;
+  }
+  
+  .goods-image {
+    margin: 0 auto;
+  }
+  
+  .goods-quantity,
+  .goods-receiver,
+  .goods-amount,
+  .goods-status {
+    text-align: left;
+  }
+  
+  .goods-actions {
+    justify-content: center;
+  }
+}
+
 .section-header {
   display: flex;
   justify-content: space-between;
@@ -532,7 +1330,8 @@ const navigateToOrder = (status: string) => {
   color: var(--text-dark);
 }
 
-.edit-btn, .add-btn {
+.edit-btn,
+.add-btn {
   padding: var(--spacing-xs) var(--spacing-md);
   background-color: var(--primary-color);
   color: var(--bg-white);
@@ -543,7 +1342,8 @@ const navigateToOrder = (status: string) => {
   transition: all var(--transition-normal) ease;
 }
 
-.edit-btn:hover, .add-btn:hover {
+.edit-btn:hover,
+.add-btn:hover {
   background-color: var(--primary-dark);
 }
 
@@ -943,7 +1743,8 @@ const navigateToOrder = (status: string) => {
   justify-content: flex-end;
 }
 
-.edit-address-btn, .delete-address-btn {
+.edit-address-btn,
+.delete-address-btn {
   padding: 4px 12px;
   border-radius: 4px;
   cursor: pointer;
@@ -976,11 +1777,13 @@ const navigateToOrder = (status: string) => {
 /* 订单 */
 .order-tabs {
   display: flex;
+  /* 左右分布 */
+  justify-content: space-between;
   border-bottom: 1px solid #f0f0f0;
   margin-bottom: 20px;
 }
 
-.order-tabs button {
+.order-tabs .tab-container button {
   padding: 10px 20px;
   background: none;
   border: none;
@@ -991,15 +1794,17 @@ const navigateToOrder = (status: string) => {
   border-bottom: 2px solid transparent;
 }
 
-.order-tabs button:hover {
+.order-tabs .tab-container button:hover {
   color: #ff5000;
 }
 
-.order-tabs button.active {
+.order-tabs .tab-container button.active {
   color: #ff5000;
   border-bottom-color: #ff5000;
 }
-
+.search-box-input {
+  margin-bottom: 20px;
+}
 .order-list {
   margin-top: 20px;
 }
@@ -1192,6 +1997,165 @@ const navigateToOrder = (status: string) => {
   background-color: #fff2f0;
 }
 
+/* 关注 */
+.follow-tabs {
+  display: flex;
+  gap: var(--spacing-md);
+  margin-top: var(--spacing-md);
+  border-bottom: 1px solid var(--border-light);
+  padding-bottom: var(--spacing-sm);
+}
+
+.follow-tabs button {
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: none;
+  border: none;
+  font-size: 14px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border-bottom: 2px solid transparent;
+}
+
+.follow-tabs button:hover {
+  color: var(--primary-color);
+}
+
+.follow-tabs button.active {
+  color: var(--primary-color);
+  border-bottom-color: var(--primary-color);
+  font-weight: 600;
+}
+
+.follow-list {
+  margin-top: var(--spacing-lg);
+}
+
+.follow-item {
+  display: flex;
+  align-items: center;
+  background-color: var(--bg-white);
+  border-radius: var(--border-radius-lg);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-sm);
+  margin-bottom: var(--spacing-md);
+  transition: all 0.3s ease;
+  border: 1px solid var(--border-light);
+}
+
+.follow-item:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.shop-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: var(--border-radius-md);
+  overflow: hidden;
+  margin-right: var(--spacing-md);
+  flex-shrink: 0;
+  border: 1px solid var(--border-light);
+}
+
+.shop-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all 0.3s ease;
+}
+
+.shop-avatar img:hover {
+  transform: scale(1.05);
+}
+
+.follow-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.shop-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-dark);
+  margin: 0 0 var(--spacing-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.shop-desc {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0 0 var(--spacing-sm);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.shop-stats {
+  display: flex;
+  gap: var(--spacing-md);
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.shop-stat {
+  display: flex;
+  align-items: center;
+}
+
+.follow-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  margin-left: var(--spacing-md);
+}
+
+.visit-shop-btn {
+  padding: var(--spacing-xs) var(--spacing-md);
+  background-color: var(--bg-light);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.visit-shop-btn:hover {
+  background-color: var(--primary-light);
+  color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+.unfollow-btn {
+  padding: var(--spacing-xs) var(--spacing-md);
+  background-color: var(--bg-light);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.unfollow-btn:hover {
+  background-color: #fff2f0;
+  color: var(--error-color);
+  border-color: #ffccc7;
+}
+
+.empty-follow {
+  text-align: center;
+  padding: var(--spacing-xl) 0;
+  color: var(--text-secondary);
+  font-size: 14px;
+  background-color: var(--bg-white);
+  border-radius: var(--border-radius-lg);
+  border: 1px dashed var(--border-light);
+}
+
 /* 客服 */
 .service-content {
   margin-top: 20px;
@@ -1233,7 +2197,8 @@ const navigateToOrder = (status: string) => {
   background-color: #ff6a00;
 }
 
-.service-phone, .service-email {
+.service-phone,
+.service-email {
   color: #666666;
 }
 
@@ -1316,37 +2281,39 @@ const navigateToOrder = (status: string) => {
     flex-direction: column;
     padding: 10px;
   }
-  
+
   #user-center-nav {
     width: 100%;
     margin-right: 0;
     margin-bottom: 20px;
   }
-  
+
   #user-center-content {
     width: 100%;
   }
-  
+
   .user-profile {
     flex-direction: column;
     align-items: center;
     text-align: center;
   }
-  
+
   .profile-avatar {
     margin-right: 0;
     margin-bottom: 20px;
   }
-  
+
   .info-item {
     justify-content: center;
   }
-  
-  .order-tabs, .favorite-tabs {
+
+  .order-tabs,
+  .favorite-tabs {
     overflow-x: auto;
   }
-  
-  .order-tabs button, .favorite-tabs button {
+
+  .order-tabs button,
+  .favorite-tabs button {
     white-space: nowrap;
   }
 }
diff --git a/src/Views/User/Userinfo.vue b/src/Views/User/Userinfo.vue
index 11a7009..619044c 100644
--- a/src/Views/User/Userinfo.vue
+++ b/src/Views/User/Userinfo.vue
@@ -33,8 +33,8 @@
                     </div>
                 </div>
                 <div class="user-actions">
-                    <a href="/user/address" class="action-link">收货地址</a>
-                    <a href="/user/follow" class="action-link">关注店铺</a>
+                    <a href="/user?nav=address" class="action-link">收货地址</a>
+                    <a href="/user?nav=follow" class="action-link">关注店铺</a>
                 </div>
             </div>
         </div>
@@ -265,7 +265,7 @@ const navigateToOrder = (status: string) => {
     background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
     border-radius: 16px;
     padding: 10px;
-    margin-bottom: 30px;
+    margin-bottom: 10px;
     color: #ffffff;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
     position: relative;
@@ -429,7 +429,6 @@ const navigateToOrder = (status: string) => {
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
     transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     border: 1px solid rgba(0, 0, 0, 0.05);
-    margin-top: 45px;
 }
 
 .order-status-card:hover {
diff --git a/src/Views/footer.vue b/src/Views/footer.vue
index 2806889..a53e6ab 100644
--- a/src/Views/footer.vue
+++ b/src/Views/footer.vue
@@ -74,7 +74,7 @@ const productLists = ref([
   padding:  0 var(--spacing-md);
 }
 h1 {
-  color: #42b983;
+  color: var(--success-color);
 }
 
 #footer-contact {
@@ -116,31 +116,31 @@ h1 {
 }
 
 .copyright-links a:hover {
-  color: #ff5000;
+  color: var(--primary-color);
 }
 
 .copyright-separator {
-  color: #999;
-  margin: 0 4px;
+  color: var(--text-tertiary);
+  margin: 0 var(--spacing-xs);
 }
 
 .copyright-icp {
   margin: 0;
-  font-size: 12px;
-  color: #999;
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
 }
 
 /* 响应式调整 */
 @media (max-width: 768px) {
   .copyright-content {
-    padding: 0 20px;
+    padding: 0 var(--spacing-xl);
   }
   
   .copyright-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: 10px;
+    gap: var(--spacing-sm);
   }
   
   .copyright-links a {
diff --git a/src/Views/herde.vue b/src/Views/herde.vue
index 0c22e26..e99305b 100644
--- a/src/Views/herde.vue
+++ b/src/Views/herde.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="header">
+  <div id="header" v-if="booleanHeader">
     <div id="header-profile">
       <div id="header-profile-left">
         <!-- 用户信息悬浮菜单 -->
@@ -15,6 +15,19 @@
             </div>
             <span class="user-arrow">▼</span>
           </div>
+          <template #overlay>
+            <div class="user-info-menu">
+              <div class="user-info-menu-item">
+                <a href="javascript:;">1st menu item</a>
+              </div>
+              <div class="user-info-menu-item">
+                <a href="javascript:;">2nd menu item</a>
+              </div>
+              <div class="user-info-menu-item">
+                <a href="javascript:;">3rd menu item</a>
+              </div>
+            </div>
+          </template>
         </Dropdown>
       </div>
       <div id="header-profile-right">
@@ -93,9 +106,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { Button, Col, Row, Space, Dropdown, Avatar, Menu, Divider, Tag } from 'ant-design-vue';
+import Input from 'ant-design-vue/es/input';
 const router = useRouter()
 // 定义搜索框绑定的变量
 const searchValue = ref('')
@@ -105,19 +119,23 @@ const showHistory = ref(false)
 const isClearingHistory = ref(false)
 // 控制搜索框是否显示
 const booleanSearch = ref(true)
-// 路由事件 
-router.beforeEach((to, from, next) => {
-  if (to.name === 'search' && to.query.keyword) {
-    searchValue.value = to.query.keyword as string
+// 控制Header是否显示
+const booleanHeader = ref(true)
+// 监听路由变化 当路由变化时 更新搜索框的显示状态
+watch(() => router.currentRoute.value.name, (newName) => {
+  // 如果是搜索页面 则更新查询参数
+  if (newName === 'search') {
+    searchValue.value = router.currentRoute.value.query.keyword as string
   }
-  console.log(to.name)
-  // 如果在商品页面 隐藏搜索框
-  if (to.name === 'productDetail' || to.name === 'chat') {
-    booleanSearch.value = false
-  } else {
+  // 如果是商品页面 则显示搜索框
+  if (newName === 'productDetail' || newName === 'chat') {
     booleanSearch.value = true
   }
-  next()
+  // 如果在登录页面 则隐藏搜索框
+  if (newName === 'login') {
+    booleanHeader.value = false
+  }
+  console.log(newName)
 })
 // 定义搜索框的搜索事件
 const onSearch = (value: string) => {
@@ -186,7 +204,7 @@ const setSearchType = (type: string, event: MouseEvent) => {
   const currentActiveItem = document.querySelector('.search-type-item.active')
   // 保存点击的元素引用
   const clickedTarget = event.currentTarget as HTMLElement
-  
+
   // 为当前活跃的元素添加消失动画
   if (currentActiveItem && currentActiveItem !== clickedTarget) {
     if (currentSearchType.value === '宝贝' && type === '店铺') {
@@ -270,9 +288,7 @@ const rightMenu = [
 <style scoped>
 #header {
   width: 100%;
-  background-color: var(--card-bg);
   padding: var(--spacing-sm) var(--spacing-md);
-  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
   position: relative;
   z-index: 1000;
 }
@@ -310,8 +326,6 @@ const rightMenu = [
   border-radius: var(--border-radius-3xl);
   cursor: pointer;
   transition: all var(--transition-transform);
-  background-color: var(--card-bg);
-  box-shadow: var(--shadow-sm);
 }
 
 .user-info-container:hover {
@@ -399,6 +413,35 @@ const rightMenu = [
   transform: rotate(180deg) scale(1.1);
   color: var(--text-secondary);
 }
+/* 用户信息菜单样式 */
+.user-info-menu {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-md);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-lg);
+  width: 100%;
+  z-index: 1000;
+  transition: all var(--transition-transform);
+  background-color: var(--card-bg);
+}
+
+.user-info-menu-item {
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--border-radius-2xl);
+  transition: all var(--transition-transform);
+}
+
+.user-info-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.user-info-menu-item:hover {
+  background-color: var(--bg-color);
+  color: var(--text-primary);
+}
 
 /* 右侧功能菜单样式 */
 .header-more-btn {
@@ -715,6 +758,7 @@ const rightMenu = [
 .search-type-item.animate-left-out::after {
   animation: slideOutLeft 0.3s ease-out;
 }
+
 /* 搜索类型选择器从左往右动画 */
 @keyframes slideInRight {
   from {
@@ -727,6 +771,7 @@ const rightMenu = [
     left: -10%;
   }
 }
+
 /* 搜索类型选择器从右往左动画 */
 @keyframes slideInLeft {
   from {
@@ -750,20 +795,20 @@ const rightMenu = [
 
   to {
     width: 0;
-    left: 100%;
+    left: 200%;
   }
 }
 
 /* 从右往左消失动画 */
 @keyframes slideOutLeft {
   from {
-    width: 10%;
-    right: 0;
+    width: 100%;
+    right: -10%;
   }
 
   to {
     width: 0%;
-    right: 100%;
+    right: -200%;
   }
 }
 
diff --git a/src/Views/main.vue b/src/Views/main.vue
index 7cc0796..9e38453 100644
--- a/src/Views/main.vue
+++ b/src/Views/main.vue
@@ -87,7 +87,7 @@ const adList = [
 }
 
 h1 {
-  color: #42b983;
+  color: var(--success-color);
 }
 
 #main-header {
@@ -104,25 +104,25 @@ h1 {
 #main-header .ant-btn {
   width: 120px;
   height: 45px;
-  font-size: 14px;
+  font-size: var(--font-size-sm);
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: 0;
-  border-radius: 8px;
+  border-radius: var(--border-radius-md);
   font-weight: 500;
 }
 
 #main-header .ant-btn-primary {
-  background-color: #1890ff;
-  border-color: #1890ff;
-  transition: all 0.3s ease;
+  background-color: var(--secondary-color);
+  border-color: var(--secondary-color);
+  transition: all var(--transition-normal);
 }
 
 #main-header .ant-btn-primary:hover {
-  background-color: #40a9ff;
-  border-color: #40a9ff;
+  background-color: var(--secondary-hover);
+  border-color: var(--secondary-hover);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
 }
@@ -228,16 +228,16 @@ h1 {
 .category-detail-item {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 12px 0;
-  border-bottom: 1px solid #f5f5f5;
-  transition: all 0.2s ease;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) 0;
+  border-bottom: 1px solid var(--bg-light);
+  transition: all var(--transition-fast);
 }
 
 .category-detail-item:hover {
-  background-color: #f9f9f9;
-  padding-left: 8px;
-  border-radius: 4px;
+  background-color: var(--bg-light);
+  padding-left: var(--spacing-xs);
+  border-radius: var(--border-radius-sm);
 }
 
 .category-detail-item:last-child {
@@ -245,16 +245,16 @@ h1 {
 }
 
 .category-detail-item a {
-  color: #333;
+  color: var(--text-primary);
   text-decoration: none;
-  font-size: 14px;
+  font-size: var(--font-size-sm);
   font-weight: 500;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: all var(--transition-transform);
   position: relative;
 }
 
 .category-detail-item a:hover {
-  color: #ff5000;
+  color: var(--primary-color);
   transform: translateX(4px);
 }
 
@@ -265,8 +265,8 @@ h1 {
   left: 0;
   width: 0;
   height: 1px;
-  background-color: #ff5000;
-  transition: width 0.3s ease;
+  background-color: var(--primary-color);
+  transition: width var(--transition-normal);
 }
 
 .category-detail-item a:hover::after {
@@ -274,98 +274,98 @@ h1 {
 }
 
 .category-detail-item span {
-  color: #999;
-  font-size: 14px;
-  transition: color 0.3s ease;
+  color: var(--text-tertiary);
+  font-size: var(--font-size-sm);
+  transition: color var(--transition-normal);
 }
 
 .main-content-col-top .iconfont {
   font-size: 22px;
-  color: #ff5000;
+  color: var(--primary-color);
   flex-shrink: 0;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: all var(--transition-transform);
 }
 
 .main-content-col-top li:hover .iconfont {
   transform: scale(1.1) rotate(5deg);
-  color: #ff5000;
+  color: var(--primary-color);
 }
 
 .main-content-col-top a {
   text-decoration: none;
-  color: #333;
+  color: var(--text-primary);
   font-size: 15px;
   font-weight: 500;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: all var(--transition-transform);
   position: relative;
-  border-radius: 4px;
+  border-radius: var(--border-radius-sm);
 }
 
 .main-content-col-top a:hover {
-  color: #ff5000;
-  background-color: rgba(255, 80, 0, 0.1);
+  color: var(--primary-color);
+  background-color: var(--primary-light);
   transform: translateY(-1px);
 }
 
 .main-content-col-top span {
-  color: #999;
-  font-size: 14px;
-  transition: color 0.3s ease;
+  color: var(--text-tertiary);
+  font-size: var(--font-size-sm);
+  transition: color var(--transition-normal);
 }
 
 .main-content-col-top li:hover span {
-  color: #ff5000;
+  color: var(--primary-color);
   opacity: 0.8;
 }
 
 /* 主内容区域样式 */
 #main-content {
-  margin-top: 20px;
-  gap: 32px;
+  margin-top: var(--spacing-xl);
+  gap: var(--spacing-xl);
 }
 
 .main-content-col-center{
-  background-color: #ffffff;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background-color: var(--card-bg);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--shadow-md);
 }
 
 .main-content-col-center h2{
-  font-size: 18px;
+  font-size: var(--font-size-lg);
   font-weight: 600;
-  color: #333;
+  color: var(--text-primary);
   margin: 0;
-  padding: 16px;
-  background-color: #fafafa;
-  border-radius: 6px;
+  padding: var(--spacing-md);
+  background-color: var(--bg-light);
+  border-radius: var(--border-radius-sm);
   text-align: center;
 }
 
 #main-content-ad,
 #main-content-hot-goods {
-  padding: 0 20px;
-  margin-bottom: 16px;
+  padding: 0 var(--spacing-xl);
+  margin-bottom: var(--spacing-md);
 }
 
 #main-content-ad .ant-col,
 #main-content-hot-goods .ant-col {
-  background-color: #fafafa;
-  border-radius: 8px;
-  transition: all 0.3s ease;
+  background-color: var(--bg-light);
+  border-radius: var(--border-radius-md);
+  transition: all var(--transition-normal);
 }
 
 #main-content-ad .ant-col:hover,
 #main-content-hot-goods .ant-col:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-lg);
   transform: translateY(-2px);
 }
 /* 轮播广告样式 */
 #carousel-container {
   width: 100%;
   height: 100%;
-  border-radius: 8px;
+  border-radius: var(--border-radius-md);
   overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-md);
 }
 
 .carousel-item {
@@ -379,7 +379,7 @@ h1 {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform 0.5s ease;
+  transition: transform var(--transition-slow);
 }
 
 .carousel-item:hover .carousel-image {
@@ -391,22 +391,22 @@ h1 {
   bottom: 0;
   left: 0;
   width: 100%;
-  padding: 20px;
+  padding: var(--spacing-xl);
   background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
   color: #ffffff;
-  font-size: 24px;
+  font-size: var(--font-size-2xl);
   font-weight: 600;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .ant-carousel .slick-dots {
-  bottom: 20px;
+  bottom: var(--spacing-xl);
   z-index: 10;
 }
 
 .ant-carousel .slick-dots li button {
   background-color: rgba(255, 255, 255, 0.5);
-  border-radius: 50%;
+  border-radius: var(--border-radius-full);
   width: 12px;
   height: 12px;
 }
diff --git a/src/Views/product/productdetil.vue b/src/Views/product/productdetil.vue
index 5dec3e3..f1d40f6 100644
--- a/src/Views/product/productdetil.vue
+++ b/src/Views/product/productdetil.vue
@@ -40,7 +40,7 @@
         </div>
         <div class="tab-container">
           <div class="tab-header">
-            <a-anchor direction="horizontal" :items="tabs" class="tab-item" />
+            <a-anchor direction="horizontal" :bounds="150" :getCurrentAnchor="activeTab" :setAnchor="setActiveTab" :items="tabs" class="tab-item" />
           </div>
           <div class="tab-content">
             <!-- 评论 -->
@@ -52,7 +52,74 @@
               <div class="reviews-content">
                 <!-- 评论内容 -->
                 <h3>用户评论</h3>
-                <!-- 更多评论... -->
+                <!-- 评论统计 -->
+                <div class="reviews-stats">
+                  <div class="reviews-rating">
+                    <span class="rating-label">综合评分：</span>
+                    <span class="rating-value">4.8</span>
+                    <div class="rating-stars">
+                      <i class="iconfont icon-star"></i>
+                      <i class="iconfont icon-star"></i>
+                      <i class="iconfont icon-star"></i>
+                      <i class="iconfont icon-star"></i>
+                      <i class="iconfont icon-star-half"></i>
+                    </div>
+                  </div>
+                  <div class="reviews-count">共 128 条评论</div>
+                </div>
+                <!-- 评论列表 -->
+                <div class="reviews-list">
+                  <div class="review-item">
+                    <div class="review-header">
+                      <span class="reviewer-name">用户123</span>
+                      <div class="review-rating">
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                      </div>
+                      <span class="review-time">2026-01-15</span>
+                    </div>
+                    <div class="review-content">投影仪质量很好，画面清晰，操作简单，物流也很快，非常满意的一次购物！</div>
+                    <div class="review-images">
+                      <!-- <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=projector%20in%20office%20room&size=800x600" alt="评论图片" width="100">
+                      <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=projector%20screen%20display&size=800x600" alt="评论图片" width="100"> -->
+                    </div>
+                  </div>
+                  <div class="review-item">
+                    <div class="review-header">
+                      <span class="reviewer-name">科技达人</span>
+                      <div class="review-rating">
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                      </div>
+                      <span class="review-time">2026-01-10</span>
+                    </div>
+                    <div class="review-content">亮度很高，白天也能看清楚，音响效果也不错，接口丰富，值得购买。</div>
+                  </div>
+                  <div class="review-item">
+                    <div class="review-header">
+                      <span class="reviewer-name">办公室采购</span>
+                      <div class="review-rating">
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star-o"></i>
+                      </div>
+                      <span class="review-time">2026-01-05</span>
+                    </div>
+                    <div class="review-content">性价比很高，适合办公室使用，客服态度也很好，有问必答。</div>
+                  </div>
+                </div>
+                <!-- 查看更多评论 -->
+                <div class="reviews-more">
+                  <a href="#" class="btn btn-secondary">查看更多评论</a>
+                </div>
               </div>
             </div>
             <!-- 文图详情 -->
@@ -61,6 +128,30 @@
                 文图详情
                 <a href="#description"></a>
               </h2>
+              <div class="description-content">
+                <div class="product-intro">
+                  <h3>产品介绍</h3>
+                  <p>BenQ 明基投影仪采用先进的DLP投影技术，提供清晰锐利的画面效果。无论是商务会议、教育培训还是家庭娱乐，都能满足您的需求。</p>
+                </div>
+                <div class="product-features">
+                  <h3>产品特点</h3>
+                  <ul>
+                    <li>1080P全高清分辨率，画质清晰细腻</li>
+                    <li>3500ANSI流明高亮度，白天也能清晰观看</li>
+                    <li>智能系统，支持无线投屏</li>
+                    <li>多种接口，满足不同设备连接需求</li>
+                    <li>长寿命灯泡，节能环保</li>
+                  </ul>
+                </div>
+                <div class="product-images">
+                  <h3>产品展示</h3>
+                  <div class="image-gallery">
+                    <!-- <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=modern%20projector%20front%20view&size=1024x768" alt="投影仪正面" class="gallery-image">
+                    <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=projector%20rear%20view%20with%20ports&size=1024x768" alt="投影仪背面" class="gallery-image">
+                    <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=projector%20in%20meeting%20room&size=1024x768" alt="会议室使用场景" class="gallery-image"> -->
+                  </div>
+                </div>
+              </div>
             </div>
             <!-- 参数信息 -->
             <div id="specs">
@@ -68,6 +159,62 @@
                 参数信息
                 <a href="#specs"></a>
               </h2>
+              <div class="specs-content">
+                <table class="specs-table">
+                  <thead>
+                    <tr>
+                      <th>参数类别</th>
+                      <th>参数值</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>投影技术</td>
+                      <td>DLP</td>
+                    </tr>
+                    <tr>
+                      <td>分辨率</td>
+                      <td>1920 x 1080 (1080P)</td>
+                    </tr>
+                    <tr>
+                      <td>亮度</td>
+                      <td>3500 ANSI流明</td>
+                    </tr>
+                    <tr>
+                      <td>对比度</td>
+                      <td>15000:1</td>
+                    </tr>
+                    <tr>
+                      <td>投影尺寸</td>
+                      <td>30-300英寸</td>
+                    </tr>
+                    <tr>
+                      <td>投影距离</td>
+                      <td>1.0-10.0米</td>
+                    </tr>
+                    <tr>
+                      <td>灯泡寿命</td>
+                      <td>正常模式：4000小时，经济模式：6000小时</td>
+                    </tr>
+                    <tr>
+                      <td>接口</td>
+                      <td>HDMI x 2, VGA x 1, USB x 2, Audio x 1</td>
+                    </tr>
+                    <tr>
+                      <td>功耗</td>
+                      <td>正常模式：280W，经济模式：200W</td>
+                    </tr>
+                    <tr>
+                      <td>尺寸</td>
+                      <td>310 x 220 x 100 mm</td>
+                    </tr>
+                    <tr>
+                      <td>重量</td>
+                      <td>2.8 kg</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
             </div>
             <!-- 本店推荐 -->
             <div id="recommendations">
@@ -75,12 +222,84 @@
                 本店推荐
                 <a href="#recommendations"></a>
               </h2>
+              <div class="recommendations-content">
+                <div class="recommended-products">
+                  <div class="recommended-product">
+                    <div class="product-image">
+                      <!-- <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=mini%20portable%20projector&size=800x800" alt="迷你投影仪"> -->
+                    </div>
+                    <div class="product-info">
+                      <h4 class="product-name">BenQ 明基 迷你便携投影仪</h4>
+                      <div class="product-price">¥2999</div>
+                      <div class="product-rating">
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star-half"></i>
+                        <span>(45)</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="recommended-product">
+                    <div class="product-image">
+                      <!-- <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=4k%20ultra%20hd%20projector&size=800x800" alt="4K投影仪"> -->
+                    </div>
+                    <div class="product-info">
+                      <h4 class="product-name">BenQ 明基 4K超高清投影仪</h4>
+                      <div class="product-price">¥8999</div>
+                      <div class="product-rating">
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <span>(28)</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="recommended-product">
+                    <div class="product-image">
+                      <!-- <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=projector%20screen%20white&size=800x800" alt="投影幕布"> -->
+                    </div>
+                    <div class="product-info">
+                      <h4 class="product-name">100英寸投影幕布</h4>
+                      <div class="product-price">¥599</div>
+                      <div class="product-rating">
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star-o"></i>
+                        <span>(67)</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="recommended-product">
+                    <div class="product-image">
+                      <!-- <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=projector%20mount%20ceiling&size=800x800" alt="投影仪吊架"> -->
+                    </div>
+                    <div class="product-info">
+                      <h4 class="product-name">投影仪吊架</h4>
+                      <div class="product-price">¥199</div>
+                      <div class="product-rating">
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star"></i>
+                        <i class="iconfont icon-star-half"></i>
+                        <span>(32)</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-
-      <div class="right-panel">
+      <!-- 右侧内容 -->
+      <div class="right-panel" >
         <div class="product-info">
           <h1 class="product-title">BenQ 明基投影仪 商务办公会议培训用 1080P高清智能投影机</h1>
           <div class="price-section">
@@ -99,7 +318,7 @@
           <div class="model-selection">
             <div class="selection-container">
               <h3 class="selection-title">选择型号</h3>
-              <div class="view-switch" @click="toggleView"> 
+              <div class="view-switch" @click="toggleView">
                 <p>{{ isSmallView ? '切换为大视图' : '切换为小视图' }}</p>
               </div>
             </div>
@@ -107,14 +326,14 @@
             <div v-if="isSmallView" class="model-options-small">
               <div v-for="model in models" :key="model.id" class="model-option"
                 :class="{ active: selectedModel === model.id }" @click="selectModel(model.id)">
-                <div class="model-small-item"> 
+                <div class="model-small-item">
                   <img :src="model.img" alt="{{ model.name }}">
                   <span> {{ model.name }}</span>
                 </div>
               </div>
             </div>
             <!-- 图（大）文  图上文下-->
-             <div v-if="!isSmallView" class="model-options-big">
+            <div v-if="!isSmallView" class="model-options-big">
               <div v-for="model in models" :key="model.id" class="model-option"
                 :class="{ active: selectedModel === model.id }" @click="selectModel(model.id)">
                 <!-- 图片 -->
@@ -124,6 +343,13 @@
                 <div class="model-name">{{ model.name }}</div>
               </div>
             </div>
+            <!-- 数量 -->
+            <div class="quantity-selector">
+              <div class="quantity-label">数量</div>
+              <div class="quantity-input">
+                <a-input-number v-model:value="formOrderProduct.quantity" :min="1" :max="10" />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -139,13 +365,16 @@
       </div>
     </div>
   </div>
+  <SettlementLite ref="settlementLite" v-model:visible="visible" />
 </template>
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
-
+import SettlementLite from '../../Component/business/SettlementLite.vue'
+import type { OrderProduct } from '@/Util/Type';
 const router = useRouter()
 const productId = ref(router.currentRoute.value.params.productId)
+const visible = ref(false)
 
 const currentIndex = ref(0)
 const images = ref([
@@ -161,7 +390,11 @@ const currentImage = computed(() => images.value[currentIndex.value])
 const selectImage = (index: number) => {
   currentIndex.value = index
 }
-
+// 提交表单 商品基础信息 型号 数量 
+const formOrderProduct = ref<OrderProduct>({
+  productId:  0,
+  quantity: 1,
+})
 const selectedModel = ref('x500')
 const models = ref([
   { id: 'x500', name: 'X500', price: '999', originalPrice: '1999', img: '/0.png' },
@@ -175,6 +408,9 @@ const selectModel = (id: string) => {
 const selectedModelInfo = computed(() => models.value.find(model => model.id === selectedModel.value))
 
 const activeTab = ref('reviews')
+const setActiveTab = (tab: string) => {
+  activeTab.value = tab
+}
 const tabs = ref([
   {
     key: 'reviews',
@@ -209,24 +445,37 @@ const collectProduct = () => {
 }
 
 const addToCart = () => {
+  // visible.value = true
   console.log('加入购物车')
 }
 
 const buyProduct = () => {
+  visible.value = true
   console.log('领券购买')
 }
+// 屏幕滚动 超过300px  右侧内容根据屏幕固定位置
+window.addEventListener('scroll', () => {
+  const scrollTop = window.scrollY;
+  const rightPanel = document.querySelector('.right-panel') as HTMLElement;
+  console.log("scrollTop:", scrollTop)
+  console.log("rightPanel:", rightPanel)
+
+  if (scrollTop > 150) {
+    rightPanel.classList.add('fixed');
+  } else {
+    rightPanel.classList.remove('fixed');
+  }
+});
 </script>
 <style scoped>
 #product-detail {
   width: 100%;
   min-height: 100vh;
   background-color: #f5f5f5;
-  padding: 20px;
 }
 
 .product-detail-container {
   display: flex;
-  border-radius: 16px;
   margin-bottom: 20px;
   overflow: hidden;
   background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
@@ -235,7 +484,7 @@ const buyProduct = () => {
 }
 
 .left-panel {
-  width: 50%;
+  width: 761px;
   padding: 25px;
   border-right: 1px solid #f0f0f0;
   overflow-y: auto;
@@ -270,7 +519,7 @@ const buyProduct = () => {
 
 .shop-info-detail {
   position: absolute;
-  top: 100%;
+  top: 50px;
   left: 0;
   background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
   border: 1px solid #f0f0f0;
@@ -297,6 +546,7 @@ const buyProduct = () => {
   color: #333;
   font-weight: 600;
 }
+
 .shop-btn-group {
   display: flex;
   gap: 10px;
@@ -346,6 +596,7 @@ const buyProduct = () => {
   justify-content: center;
   align-items: center;
   transition: all 0.3s ease;
+  height: 500px;
   position: relative;
 }
 
@@ -354,7 +605,7 @@ const buyProduct = () => {
   flex-direction: column;
   gap: 10px;
   overflow-y: auto;
-  max-height: 400px;
+  max-height: 500px;
   padding: 5px;
 }
 
@@ -388,12 +639,15 @@ const buyProduct = () => {
 .right-panel {
   flex: 1;
   padding: 35px;
-  overflow-y: auto;
-  overflow-x: auto;
   background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
 }
-
+.right-panel.fixed {
+  position: fixed;
+  top: 0;
+  right: 24px;
+}
 .product-info {
+  width: 765px;
   display: flex;
   flex-direction: column;
   gap: 25px;
@@ -486,6 +740,7 @@ const buyProduct = () => {
 .selection-container {
   display: flex;
 }
+
 /* 切换视图 */
 .view-switch {
   /* 靠右对齐 */
@@ -500,7 +755,9 @@ const buyProduct = () => {
 .view-switch:hover {
   color: #ff5000;
 }
-.model-options-small, .model-options-big {
+
+.model-options-small,
+.model-options-big {
   display: flex;
   gap: 15px;
   flex-wrap: wrap;
@@ -530,21 +787,25 @@ const buyProduct = () => {
   box-shadow: 0 4px 16px rgba(255, 80, 0, 0.25);
   transform: translateY(-3px);
 }
+
 .model-image {
   border-radius: 8px;
   margin-bottom: 8px;
 }
+
 .model-image img {
   width: 100%;
   height: 100%;
   border-radius: 8px 8px 0 0;
 }
+
 .model-name {
   font-size: 16px;
   color: #333;
   font-weight: 600;
   margin-bottom: 5px;
 }
+
 .model-small-item {
   text-align: left;
   border-radius: 8px;
@@ -552,6 +813,7 @@ const buyProduct = () => {
   transition: all 0.3s ease;
   background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
 }
+
 .model-small-item img {
   margin: 5px;
   height: 30px;
@@ -578,48 +840,52 @@ const buyProduct = () => {
   transition: all 0.3s ease;
 }
 
-
 .action-buttons {
+  width: 400px;
+  height: 48px;
   display: flex;
-  gap: 2px;
+  overflow: hidden;
 }
 
 .btn-cart,
 .btn-buy {
   text-align: center;
-  width: 200px;
   line-height: 48px;
-  flex: 1;
   font-size: 16px;
   font-weight: 600;
   border: none;
   cursor: pointer;
   transition: all 0.3s ease;
-  border-radius: 24px; 
-   margin-right: 10px;
 }
 
 .btn-cart {
+  width: 100px;
+  border-radius: 24px 0 0 24px;
   background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
   color: #ff5000;
   border: 2px solid #ff5000;
 }
 
-.btn-cart:hover {
+.btn-buy {
+  width: 300px;
+  border-radius: 0 24px 24px 0;
   background: linear-gradient(135deg, #ff5000 0%, #ff6b00 100%);
   color: #ffffff;
-  transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(255, 80, 0, 0.3);
 }
 
-.btn-buy {
+.btn-cart:hover {
+  width: 300px;
   background: linear-gradient(135deg, #ff5000 0%, #ff6b00 100%);
   color: #ffffff;
   box-shadow: 0 4px 12px rgba(255, 80, 0, 0.3);
 }
 
+.btn-cart:hover .btn-buy {
+  width: 100px;
+}
+
 .btn-buy:hover {
-  transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(255, 80, 0, 0.4);
 }
 
@@ -671,38 +937,54 @@ const buyProduct = () => {
 .tab-header {
   display: flex;
   background: #ffffff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+.tab-header .ant-anchor-link-title a {
+  font-size: 30px;
 }
-
 .tab-item {
   padding: 18px 35px;
-  font-size: 16px;
+  font-size: 20px;
   color: #666;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   font-weight: 500;
-}
-
-.tab-item:hover {
-  color: #ff5000;
-  background-color: #fff5f5;
+  border-bottom: 3px solid transparent;
+  background-color: #ffffff;
 }
 
 .tab-item.active {
   color: #ff5000;
   font-weight: 600;
   background-color: #fff5f5;
+  box-shadow: 0 2px 12px rgba(255, 80, 0, 0.15);
 }
 
 .tab-item.active::after {
   content: '';
   position: absolute;
-  bottom: -2px;
-  left: 0;
-  right: 0;
+  bottom: 0;
+  left: 10%;
+  right: 10%;
   height: 3px;
   background: linear-gradient(90deg, #ff5000 0%, #ff6b00 100%);
-  box-shadow: 0 2px 8px rgba(255, 80, 0, 0.3);
+  box-shadow: 0 2px 12px rgba(255, 80, 0, 0.4);
+  border-radius: 3px 3px 0 0;
+  animation: tabSlideIn 0.3s ease-out;
+}
+
+@keyframes tabSlideIn {
+  from {
+    left: 50%;
+    right: 50%;
+    opacity: 0;
+  }
+  to {
+    left: 10%;
+    right: 10%;
+    opacity: 1;
+  }
 }
 
 .tab-content {
@@ -748,6 +1030,313 @@ const buyProduct = () => {
   margin: 0;
 }
 
+/* 评论部分样式 */
+.reviews-stats {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.reviews-rating {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.rating-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.rating-value {
+  font-size: 20px;
+  color: #ff5000;
+  font-weight: 600;
+}
+
+.rating-stars {
+  color: #ffc107;
+  font-size: 16px;
+}
+
+.reviews-count {
+  font-size: 14px;
+  color: #999;
+}
+
+.reviews-list {
+  margin-bottom: 20px;
+}
+
+.review-item {
+  padding: 20px;
+  border-bottom: 1px solid #f0f0f0;
+  transition: all 0.3s ease;
+}
+
+.review-item:hover {
+  background-color: #fafafa;
+  transform: translateX(5px);
+}
+
+.review-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.reviewer-name {
+  font-size: 14px;
+  color: #333;
+  font-weight: 600;
+}
+
+.review-time {
+  font-size: 12px;
+  color: #999;
+}
+
+.review-content {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.6;
+  margin-bottom: 10px;
+}
+
+.review-images {
+  display: flex;
+  gap: 10px;
+}
+
+.review-images img {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.review-images img:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.reviews-more {
+  text-align: center;
+  margin-top: 20px;
+}
+
+.btn-secondary {
+  display: inline-block;
+  padding: 10px 24px;
+  border: 1px solid #ff5000;
+  border-radius: 20px;
+  font-size: 14px;
+  color: #ff5000;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  background-color: #ffffff;
+}
+
+.btn-secondary:hover {
+  background: linear-gradient(135deg, #ff5000 0%, #ff6b00 100%);
+  color: #ffffff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(255, 80, 0, 0.3);
+}
+
+/* 文图详情部分样式 */
+.description-content {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.product-intro h3,
+.product-features h3,
+.product-images h3 {
+  font-size: 18px;
+  color: #333;
+  margin: 0 0 15px 0;
+  font-weight: 600;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #f0f0f0;
+}
+
+.product-intro p {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.product-features ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.product-features li {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.8;
+  position: relative;
+  padding-left: 20px;
+}
+
+.product-features li::before {
+  content: '•';
+  color: #ff5000;
+  font-size: 16px;
+  font-weight: bold;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.image-gallery {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.gallery-image {
+  width: 100%;
+  max-width: 600px;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.gallery-image:hover {
+  transform: scale(1.02);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+}
+
+/* 参数信息部分样式 */
+.specs-content {
+  overflow-x: auto;
+}
+
+.specs-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.specs-table th,
+.specs-table td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.specs-table th {
+  background-color: #fafafa;
+  font-weight: 600;
+  color: #333;
+  width: 30%;
+}
+
+.specs-table td {
+  color: #666;
+  width: 70%;
+}
+
+.specs-table tr:hover {
+  background-color: #f5f5f5;
+}
+
+/* 本店推荐部分样式 */
+.recommendations-content {
+  padding-top: 10px;
+}
+
+.recommended-products {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 20px;
+}
+
+.recommended-product {
+  background-color: #fafafa;
+  border-radius: 8px;
+  padding: 15px;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.recommended-product:hover {
+  background-color: #ffffff;
+  transform: translateY(-5px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.recommended-product .product-image {
+  width: 100%;
+  height: 150px;
+  overflow: hidden;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+.recommended-product .product-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all 0.3s ease;
+}
+
+.recommended-product:hover .product-image img {
+  transform: scale(1.1);
+}
+
+.recommended-product .product-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.recommended-product .product-name {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+  margin: 0;
+  line-height: 1.4;
+  height: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.recommended-product .product-price {
+  font-size: 16px;
+  color: #ff5000;
+  font-weight: 600;
+  margin: 0;
+}
+
+.recommended-product .product-rating {
+  font-size: 12px;
+  color: #ffc107;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.recommended-product .product-rating span {
+  color: #999;
+  font-size: 12px;
+  margin-left: 5px;
+}
+
 .params-table {
   width: 100%;
   border-collapse: collapse;
diff --git a/src/Views/product/productmodal.vue b/src/Views/product/productmodal.vue
index 35004a2..7daf9d3 100644
--- a/src/Views/product/productmodal.vue
+++ b/src/Views/product/productmodal.vue
@@ -5,7 +5,7 @@
             <div class="product-modal-container">
                 <div class="product-modal-right">
                     <div class="product-modal-img">
-                        <img :src="currentProduct.img" alt="产品图片" class="product-modal-image">
+                        <img :src="currentProduct.image" alt="产品图片" class="product-modal-image">
                     </div>
                 </div>
                 <div class="product-modal-left">
@@ -21,7 +21,7 @@
                             <div v-for="item in currentItems" :key="item.id" class="model-item"
                                 :class="{ active: currentProduct.id === item.id }" @click="selectProduct(item)">
                                 <div class="model-img">
-                                    <img :src="item.img" alt="型号图片" class="model-image">
+                                    <img :src="item.image" alt="型号图片" class="model-image">
                                 </div>
                                 <div class="model-name">{{ item.model }}</div>
                             </div>
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 913b8f2..ae9f269 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "../admin_frontend/src/shims-vue.d.ts"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",