From c287650fbb46d303211d49be3edb20231060b32e Mon Sep 17 00:00:00 2001
From: qingfeng1121 <lmg162543@163.com>
Date: Mon, 12 Jan 2026 13:56:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=B7=AF=E7=94=B1):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E5=92=8C=E8=81=8A=E5=A4=A9=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

style(页脚): 更新版权信息和样式，添加链接和响应式设计

style(全局样式): 引入CSS变量，统一设计系统

refactor(主页面): 使用CSS变量优化样式，提升可维护性

style(购物车): 应用CSS变量，优化交互效果和动画

feat(头部导航): 增强用户信息展示和搜索类型切换动画

feat(聊天页面): 新增聊天功能界面，支持用户列表和消息交互

feat(用户信息): 重构用户信息页面，添加订单状态和功能菜单
---
 src/Route/route.ts          |   13 +
 src/Style/App.css           |  107 ++-
 src/Views/Cart.vue          |  162 ++---
 src/Views/Chat.vue          |  703 ++++++++++++++++++
 src/Views/User/User.vue     | 1353 +++++++++++++++++++++++++++++++++++
 src/Views/User/Userinfo.vue |  904 ++++++++++++++++++++++-
 src/Views/footer.vue        |   86 ++-
 src/Views/herde.vue         |  502 +++++++++++--
 src/Views/main.vue          |   75 +-
 9 files changed, 3685 insertions(+), 220 deletions(-)
 create mode 100644 src/Views/Chat.vue
 create mode 100644 src/Views/User/User.vue

diff --git a/src/Route/route.ts b/src/Route/route.ts
index 800bad4..513b5a2 100644
--- a/src/Route/route.ts
+++ b/src/Route/route.ts
@@ -7,6 +7,8 @@ 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'
 
 
 
@@ -41,6 +43,17 @@ const routes = [
     name: 'order',
     component: Order
   },
+  {
+    path: '/user',
+    name: 'user',
+    component: User
+  },
+  {
+    path: '/chat',
+    name: 'chat',
+    component: Chat
+  },
+  
 ]
 
 const router = createRouter({
diff --git a/src/Style/App.css b/src/Style/App.css
index da10fdf..fb69a0e 100644
--- a/src/Style/App.css
+++ b/src/Style/App.css
@@ -1,13 +1,112 @@
 /* 全局样式 */
 body {
   height: 100%;
-  padding: 0 20px;
+  padding: 0 var(--spacing-lg);
+  background-color: var(--bg-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  color: var(--text-primary);
+  margin: 0;
 }
 
 a {
   text-decoration: none;
-  color: #000;
-  font-size: 16px;
+  color: var(--text-primary);
+  font-size: var(--font-size-base);
   font-weight: bold;
-  transition: all 0.3s ease-in-out;
+  transition: all var(--transition-normal);
+}
+
+a:hover {
+  color: var(--primary-color);
+}
+:root {
+  /* 主色调 */
+  --primary-color: #ff5000;
+  --primary-hover: #ff7a45;
+  --primary-active: #ff3a00;
+  --primary-light: rgba(255, 80, 0, 0.05);
+  --primary-light-rgb: 255, 80, 0;
+  
+  /* 辅助色 */
+  --secondary-color: #1890ff;
+  --secondary-hover: #40a9ff;
+  --success-color: #52c41a;
+  --success-light: #f6ffed;
+  --warning-color: #faad14;
+  --warning-light: #fff7e6;
+  --error-color: #ff4d4f;
+  --error-light: #fff2f0;
+  
+  /* 登录按钮渐变色 */
+  --login-gradient-start: #667eea;
+  --login-gradient-end: #764ba2;
+  
+  /* 中性色 */
+  --bg-color: #f5f5f5;
+  --bg-light: #fafafa;
+  --bg-primary-light: #fff5f5;
+  --bg-primary-lighter: #fff0f0;
+  --bg-primary-lightest: #fff0e8;
+  --card-bg: #ffffff;
+  --text-primary: #333333;
+  --text-dark: #2d3436;
+  --text-secondary: #666666;
+  --text-tertiary: #999999;
+  --border-color: #e0e0e0;
+  --border-light: #e8e8e8;
+  
+  /* 字体 */
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-size-xs: 12px;
+  --font-size-sm: 14px;
+  --font-size-base: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 24px;
+  --font-size-3xl: 32px;
+  --font-size-4xl: 36px;
+  
+  /* 间距 */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-xxl: 40px;
+  
+  /* 圆角 */
+  --border-radius-sm: 4px;
+  --border-radius-md: 8px;
+  --border-radius-lg: 12px;
+  --border-radius-xl: 16px;
+  --border-radius-2xl: 24px;
+  --border-radius-3xl: 28px;
+  --border-radius-full: 50%;
+  
+  /* 阴影 */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --shadow-xl: 0 6px 20px rgba(0, 0, 0, 0.15);
+  --shadow-2xl: 0 12px 32px rgba(0, 0, 0, 0.2);
+  
+  /* 过渡 */
+  --transition-fast: 0.2s ease;
+  --transition-normal: 0.3s ease;
+  --transition-slow: 0.5s ease;
+  --transition-transform: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  
+  /* 搜索框相关 */
+  --search-height: 52px;
+  --search-radius: 28px;
+  
+  /* 消息相关 */
+  --message-radius: 18px;
+  
+  /* 输入框相关 */
+  --input-bg: #f9fafb;
+  --input-error: #ef4444;
+  --error-bg: #fee2e2;
+  --error-text: #dc2626;
 }
diff --git a/src/Views/Cart.vue b/src/Views/Cart.vue
index 2e920ac..f663363 100644
--- a/src/Views/Cart.vue
+++ b/src/Views/Cart.vue
@@ -263,24 +263,24 @@ const removeItem = (id: number) => {
 #cart {
     width: 100%;
     min-height: 100vh;
-    background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
-    padding: 20px;
+    background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-light) 100%);
+    padding: var(--spacing-md);
 }
 
 .cart-container {
     max-width: 1400px;
     margin: 0 auto;
-    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
-    border-radius: 16px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%);
+    border-radius: var(--border-radius-xl);
+    box-shadow: var(--shadow-md);
     overflow: hidden;
-    border: 1px solid #f0f0f0;
+    border: 1px solid var(--border-color);
 }
 
 .cart-header {
-    padding: 20px 40px;
-    border-bottom: 3px solid #f0f0f0;
-    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    padding: var(--spacing-md) var(--spacing-xxl);
+    border-bottom: 3px solid var(--border-color);
+    background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%);
     display: block;
     align-items: center;
     position: relative;
@@ -294,7 +294,7 @@ const removeItem = (id: number) => {
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 80, 0, 0.05), transparent);
+    background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
     transition: left 0.6s ease;
 }
 
@@ -303,94 +303,94 @@ const removeItem = (id: number) => {
 }
 
 .cart-title {
-    font-size: 32px;
+    font-size: var(--font-size-3xl);
     font-weight: 800;
-    color: #2d3436;
+    color: var(--text-dark);
     margin: 0;
     display: flex;
     align-items: center;
-    gap: 15px;
+    gap: var(--spacing-md);
     position: relative;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition: all var(--transition-transform);
 }
 
 .cart-title:hover {
-    color: #ff5000;
-    transform: translateX(8px);
-    text-shadow: 0 4px 8px rgba(255, 80, 0, 0.2);
+    color: var(--primary-color);
+    transform: translateX(var(--spacing-sm));
+    text-shadow: 0 4px 8px rgba(var(--primary-light-rgb), 0.2);
 }
 
 .cart-title i {
-    font-size: 36px;
-    color: #ff5000;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    font-size: var(--font-size-4xl);
+    color: var(--primary-color);
+    transition: all var(--transition-transform);
 }
 
 .cart-title:hover i {
     transform: rotate(10deg) scale(1.2);
-    filter: drop-shadow(0 2px 6px rgba(255, 80, 0, 0.3));
+    filter: drop-shadow(0 2px 6px rgba(var(--primary-light-rgb), 0.3));
 }
 
 .filter-buttons {
-    margin-top: 20px;
+    margin-top: var(--spacing-md);
     display: flex;
-    gap: 20px;
+    gap: var(--spacing-md);
     position: relative;
 
 }
 
 .filter-btn {
-    padding: 12px 36px;
-    border-radius: 28px;
-    font-size: 15px;
+    padding: var(--spacing-sm) var(--spacing-xxl);
+    border-radius: var(--border-radius-3xl);
+    font-size: var(--font-size-sm);
     font-weight: 600;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    border: 2px solid #e0e0e0;
-    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    transition: all var(--transition-transform);
+    border: 2px solid var(--border-color);
+    background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%);
+    box-shadow: var(--shadow-md);
     letter-spacing: 0.5px;
 }
 
 .filter-btn.active {
-    background: linear-gradient(135deg, #ff5000 0%, #ff6b00 100%);
-    border-color: #ff5000;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+    border-color: var(--primary-color);
     color: #ffffff;
-    box-shadow: 0 6px 20px rgba(255, 80, 0, 0.35);
+    box-shadow: 0 6px 20px rgba(var(--primary-light-rgb), 0.35);
     transform: translateY(-2px);
 }
 
 .filter-btn:not(.active):hover {
-    border-color: #ff5000;
-    color: #ff5000;
-    background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
-    box-shadow: 0 4px 16px rgba(255, 80, 0, 0.15);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+    background: linear-gradient(135deg, var(--bg-primary-light) 0%, var(--bg-primary-lighter) 100%);
+    box-shadow: 0 4px 16px rgba(var(--primary-light-rgb), 0.15);
     transform: translateY(-2px);
 }
 
 .filter-btn:active {
     transform: translateY(0);
-    box-shadow: 0 2px 8px rgba(255, 80, 0, 0.2);
+    box-shadow: 0 2px 8px rgba(var(--primary-light-rgb), 0.2);
 }
 
 .cart-list {
-    padding: 20px 40px;
+    padding: var(--spacing-md) var(--spacing-xxl);
     min-height: 400px;
 }
 
 .cart-item {
     display: flex;
     align-items: center;
-    padding: 15px;
-    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
-    border-radius: 24px;
-    margin-bottom: 30px;
-    border: 2px solid #f5f5f5;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+    padding: var(--spacing-md);
+    background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%);
+    border-radius: var(--border-radius-2xl);
+    margin-bottom: var(--spacing-xl);
+    border: 2px solid var(--border-color);
+    transition: all var(--transition-transform);
+    box-shadow: var(--shadow-md);
     position: relative;
     overflow: hidden;
-    gap: 30px;
+    gap: var(--spacing-xl);
     animation: float 6s ease-in-out infinite;
 }
 
@@ -406,55 +406,55 @@ const removeItem = (id: number) => {
     width: 26px;
     height: 26px;
     cursor: pointer;
-    accent-color: #ff5000;
-    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    accent-color: var(--primary-color);
+    transition: all var(--transition-transform);
     position: relative;
-    border-radius: 6px;
-    background-color: #ffffff;
-    border: 2px solid #e0e0e0;
+    border-radius: var(--border-radius-md);
+    background-color: var(--card-bg);
+    border: 2px solid var(--border-color);
 }
 
 .checkbox-input:hover {
     transform: scale(1.2);
-    box-shadow: 0 0 0 10px rgba(255, 80, 0, 0.12);
-    border-color: #ff5000;
+    box-shadow: 0 0 0 10px rgba(var(--primary-light-rgb), 0.12);
+    border-color: var(--primary-color);
 }
 
 .checkbox-input:checked {
-    box-shadow: 0 0 0 8px rgba(255, 80, 0, 0.25);
-    border-color: #ff5000;
+    box-shadow: 0 0 0 8px rgba(var(--primary-light-rgb), 0.25);
+    border-color: var(--primary-color);
     animation: checkbox-pulse 0.4s ease;
 }
 
 .checkbox-input:focus {
     outline: none;
-    box-shadow: 0 0 0 6px rgba(255, 80, 0, 0.2);
-    border-color: #ff5000;
+    box-shadow: 0 0 0 6px rgba(var(--primary-light-rgb), 0.2);
+    border-color: var(--primary-color);
 }
 
 @keyframes checkbox-pulse {
     0% {
-        box-shadow: 0 0 0 4px rgba(255, 80, 0, 0.2);
+        box-shadow: 0 0 0 4px rgba(var(--primary-light-rgb), 0.2);
     }
     50% {
-        box-shadow: 0 0 0 12px rgba(255, 80, 0, 0.1);
+        box-shadow: 0 0 0 12px rgba(var(--primary-light-rgb), 0.1);
     }
     100% {
-        box-shadow: 0 0 0 8px rgba(255, 80, 0, 0.25);
+        box-shadow: 0 0 0 8px rgba(var(--primary-light-rgb), 0.25);
     }
 }
 
 .cart-item-img-container {
     width: 150px;
     height: 150px;
-    border-radius: 20px;
+    border-radius: var(--border-radius-xl);
     overflow: hidden;
-    border: 3px solid #f0f0f0;
+    border: 3px solid var(--border-color);
     flex-shrink: 0;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition: all var(--transition-transform);
     position: relative;
-    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+    background: linear-gradient(135deg, var(--bg-light) 0%, var(--card-bg) 100%);
+    box-shadow: var(--shadow-lg);
 }
 
 .cart-item-img-container::after {
@@ -464,10 +464,10 @@ const removeItem = (id: number) => {
     left: 0;
     right: 0;
     bottom: 0;
-    border-radius: 20px;
+    border-radius: var(--border-radius-xl);
     border: 3px solid transparent;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    background: linear-gradient(135deg, rgba(255, 80, 0, 0.08) 0%, rgba(255, 80, 0, 0.03) 100%);
+    transition: all var(--transition-transform);
+    background: linear-gradient(135deg, rgba(var(--primary-light-rgb), 0.08) 0%, rgba(var(--primary-light-rgb), 0.03) 100%);
     opacity: 0;
 }
 
@@ -478,21 +478,21 @@ const removeItem = (id: number) => {
     left: -50%;
     width: 200%;
     height: 200%;
-    background: linear-gradient(45deg, transparent, rgba(255, 80, 0, 0.1), transparent);
+    background: linear-gradient(45deg, transparent, rgba(var(--primary-light-rgb), 0.1), transparent);
     transform: rotate(45deg);
-    transition: all 0.6s ease;
+    transition: all var(--transition-slow);
     opacity: 0;
 }
 
 .cart-item:hover .cart-item-img-container {
-    border-color: #ff5000;
+    border-color: var(--primary-color);
     transform: scale(1.1) translateY(-4px);
-    box-shadow: 0 12px 32px rgba(255, 80, 0, 0.2);
+    box-shadow: 0 12px 32px rgba(var(--primary-light-rgb), 0.2);
 }
 
 .cart-item:hover .cart-item-img-container::after {
-    border-color: #ff5000;
-    box-shadow: 0 0 0 8px rgba(255, 80, 0, 0.2);
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 8px rgba(var(--primary-light-rgb), 0.2);
     opacity: 1;
 }
 
@@ -524,9 +524,9 @@ const removeItem = (id: number) => {
 }
 
 .cart-item-name {
-    font-size: 18px;
+    font-size: var(--font-size-lg);
     font-weight: 700;
-    color: #333;
+    color: var(--text-primary);
     margin: 0;
     overflow: hidden;
     /* 限制显示两行 */
@@ -535,15 +535,15 @@ const removeItem = (id: number) => {
     -webkit-line-clamp: 5;
     -webkit-box-orient: vertical;
     line-height: 1.5;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition: all var(--transition-transform);
     position: relative;
     letter-spacing: 0.5px;
 }
 
 .cart-item:hover .cart-item-name {
-    color: #ff5000;
-    transform: translateX(8px);
-    text-shadow: 0 2px 6px rgba(255, 80, 0, 0.2);
+    color: var(--primary-color);
+    transform: translateX(var(--spacing-sm));
+    text-shadow: 0 2px 6px rgba(var(--primary-light-rgb), 0.2);
 }
 
 .cart-item-name::after {
diff --git a/src/Views/Chat.vue b/src/Views/Chat.vue
new file mode 100644
index 0000000..614d09c
--- /dev/null
+++ b/src/Views/Chat.vue
@@ -0,0 +1,703 @@
+<!-- 聊天界面 -->
+<template>
+    <div>
+        <div id="chat">
+            <!-- 左右结构 左边聊天导航栏（用户1 用户2 用户3 等 从上到下分布 一个用户一个li标签） 右边聊天内容（根据导航栏切换） -->
+            <div id="chat-nav">
+                <div class="nav-header">
+                    <h2>消息</h2>
+                    <!-- 搜索框 -->
+                    <div class="search-container">
+                        <input type="text" placeholder="搜索用户" v-model="searchTerm" class="search-input">
+                        <i class="fas fa-search search-icon"></i>
+                    </div>
+                </div>
+                <div class="user-list-container">
+                    <ul class="user-list">
+                        <li v-for="user in chatUsers" :key="user.id" :class="{ active: activeUserId === user.id }"
+                            @click="selectUser(user.id)">
+                            <div class="user-avatar">
+                                <img :src="user.avatar" :alt="user.name">
+                            </div>
+                            <div class="user-info">
+                                <div class="user-header">
+                                    <span class="user-name">{{ user.name }}</span>
+                                    <span class="message-time">{{ user.lastMessageTime }}</span>
+                                </div>
+                                <div class="user-last-message">
+                                    {{ user.lastMessage }}
+                                </div>
+                            </div>
+                            <div v-if="user.unreadCount > 0" class="unread-badge">
+                                {{ user.unreadCount }}
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <!-- 右边聊天内容 -->
+            <div id="chat-content">
+                <!-- 聊天头部 -->
+                <div v-if="activeUser" class="chat-header">
+                    <div class="chat-user-info">
+                        <div>
+                            <h3>{{ activeUser.name }}</h3>
+                            <p class="user-status">在线</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- 聊天历史 -->
+                <div v-if="activeUser" class="chat-history">
+                    <div v-for="(message, index) in messages" :key="index"
+                        :class="{ 'chat-message': true, 'sent': message.sender === 'me', 'received': message.sender !== 'me' }">
+                        <div v-if="message.sender !== 'me'" class="user-avatar small">
+                            <img :src="activeUser.avatar" :alt="activeUser.name">
+                        </div>
+                        <div class="message-content">
+                            <div class="message-text">{{ message.text }}</div>
+                            <div class="message-time">{{ message.time }}</div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 消息输入区 -->
+                <div v-if="activeUser" class="chat-input-area">
+                    <div class="input-container">
+                        <button class="input-btn">😊</button>
+                        <button class="input-btn">📎</button>
+                        <input type="text" v-model="newMessage" placeholder="输入消息..." class="message-input"
+                            @keyup.enter="sendMessage">
+                        <button class="input-btn">🎤</button>
+                    </div>
+                    <button class="send-btn" @click="sendMessage">发送</button>
+                </div>
+                <!-- 空状态 -->
+                <div v-else class="empty-state">
+                    <img src="#" alt="选择聊天">
+                    <h3>选择一个聊天</h3>
+                    <p>开始与您的联系人聊天</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// 搜索用户的关键词
+const searchTerm = ref('')
+
+// 聊天用户数据
+const chatUsers = ref([
+    {
+        id: 1,
+        name: '用户1',
+        avatar: '?prompt=user%20avatar%20friendly%20smile&image_size=square',
+        lastMessage: '你好，我想购买商品1',
+        lastMessageTime: '10:00',
+        unreadCount: 2
+    },
+    {
+        id: 2,
+        name: '用户2',
+        avatar: '?prompt=user%20avatar%20professional%20business&image_size=square',
+        lastMessage: '订单什么时候发货？',
+        lastMessageTime: '09:30',
+        unreadCount: 0
+    },
+    {
+        id: 3,
+        name: '用户3',
+        avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
+        lastMessage: '商品质量怎么样？',
+        lastMessageTime: '昨天',
+        unreadCount: 1
+    },
+    {
+        id: 3,
+        name: '用户3',
+        avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
+        lastMessage: '商品质量怎么样？',
+        lastMessageTime: '昨天',
+        unreadCount: 1
+    },
+    {
+        id: 3,
+        name: '用户3',
+        avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
+        lastMessage: '商品质量怎么样？',
+        lastMessageTime: '昨天',
+        unreadCount: 1
+    },
+    {
+        id: 3,
+        name: '用户3',
+        avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
+        lastMessage: '商品质量怎么样？',
+        lastMessageTime: '昨天',
+        unreadCount: 1
+    },
+    {
+        id: 3,
+        name: '用户3',
+        avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
+        lastMessage: '商品质量怎么样？',
+        lastMessageTime: '昨天',
+        unreadCount: 1
+    },
+    {
+        id: 3,
+        name: '用户3',
+        avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
+        lastMessage: '商品质量怎么样？',
+        lastMessageTime: '昨天',
+        unreadCount: 1
+    },
+    {
+        id: 3,
+        name: '用户3',
+        avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
+        lastMessage: '商品质量怎么样？',
+        lastMessageTime: '昨天',
+        unreadCount: 1
+    },
+    {
+        id: 3,
+        name: '用户3',
+        avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
+        lastMessage: '商品质量怎么样？',
+        lastMessageTime: '昨天',
+        unreadCount: 1
+    },
+    {
+        id: 3,
+        name: '用户3',
+        avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
+        lastMessage: '商品质量怎么样？',
+        lastMessageTime: '昨天',
+        unreadCount: 1
+    },
+    {
+        id: 3,
+        name: '用户3',
+        avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
+        lastMessage: '商品质量怎么样？',
+        lastMessageTime: '昨天',
+        unreadCount: 1
+    },
+    {
+        id: 3,
+        name: '用户3',
+        avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
+        lastMessage: '商品质量怎么样？',
+        lastMessageTime: '昨天',
+        unreadCount: 1
+    },
+    {
+        id: 3,
+        name: '用户3',
+        avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
+        lastMessage: '商品质量怎么样？',
+        lastMessageTime: '昨天',
+        unreadCount: 1
+    }
+])
+
+// 消息数据
+const messages = ref([
+    {
+        sender: 'user1',
+        text: '你好，我想购买商品1',
+        time: '10:00'
+    },
+    {
+        sender: 'me',
+        text: '您好，欢迎咨询，请问有什么可以帮助您的？',
+        time: '10:01'
+    },
+    {
+        sender: 'user1',
+        text: '商品1有货吗？',
+        time: '10:02'
+    }
+])
+
+// 当前活跃用户ID
+const activeUserId = ref(1)
+
+// 新消息
+const newMessage = ref('')
+
+// 计算当前活跃用户
+const activeUser = computed(() => {
+    return chatUsers.value.find(user => user.id === activeUserId.value)
+})
+
+// 选择用户
+const selectUser = (userId: number) => {
+    activeUserId.value = userId
+    // 清除未读消息数
+    const user = chatUsers.value.find(user => user.id === userId)
+    if (user) {
+        user.unreadCount = 0
+    }
+}
+
+// 发送消息
+const sendMessage = () => {
+    if (newMessage.value.trim()) {
+        messages.value.push({
+            sender: 'me',
+            text: newMessage.value,
+            time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+        })
+        // 更新最后一条消息
+        if (activeUser.value) {
+            activeUser.value.lastMessage = newMessage.value
+            activeUser.value.lastMessageTime = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+        }
+        // 清空输入框
+        newMessage.value = ''
+    }
+}
+</script>
+
+<style scoped>
+#chat {
+    background-color: var(--bg-color);
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box;
+    border-radius: var(--border-radius-lg);
+    padding: var(--spacing-xl) 150px 0 150px;
+}
+
+/* 左侧聊天导航栏 */
+#chat-nav {
+    width: 320px;
+    background-color: var(--bg-color);
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
+    padding: var(--spacing-sm) 0 0 var(--spacing-sm);
+    border: 1px solid var(--border-color);
+    border-right: none;
+}
+
+.nav-header {
+    padding: var(--spacing-md);
+    align-items: center;
+}
+
+.nav-header h2 {
+    margin: 0;
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.search-container {
+    margin-top: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
+    display: flex;
+    align-items: center;
+    border-radius: var(--border-radius-xl);
+    border: 1px solid var(--border-color);
+}
+
+.search-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: var(--font-size-sm);
+    color: var(--text-primary);
+}
+
+.search-icon {
+    font-size: var(--font-size-base);
+    color: var(--text-tertiary);
+    margin-left: var(--spacing-sm);
+}
+
+
+
+.user-list-container {
+    background-color: var(--card-bg);
+    overflow-x: auto;
+    max-height: 50vh;
+}
+
+.new-chat-btn {
+    width: 32px;
+    height: 32px;
+    border-radius: var(--border-radius-full);
+    background-color: var(--primary-color);
+    color: #ffffff;
+    border: none;
+    font-size: var(--font-size-lg);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-normal);
+}
+
+.new-chat-btn:hover {
+    background-color: var(--primary-hover);
+    transform: scale(1.1);
+}
+
+#chat-nav .user-list-container ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    flex: 1;
+    overflow-y: auto;
+}
+
+#chat-nav .user-list-container li {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-md) var(--spacing-md);
+    cursor: pointer;
+    transition: all var(--transition-normal);
+}
+
+#chat-nav .user-list-container li:hover {
+    background-color: var(--bg-color);
+    border-radius: var(--border-radius-sm);
+}
+
+#chat-nav .user-list-container li.active {
+    background-color: var(--bg-primary-lightest);
+    border-radius: var(--border-radius-sm);
+}
+
+.user-avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: var(--border-radius-full);
+    overflow: hidden;
+    margin-right: var(--spacing-md);
+    flex-shrink: 0;
+    border-radius: var(--border-radius-lg);
+}
+
+.user-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.user-avatar.small {
+    width: 36px;
+    height: 36px;
+    margin-right: var(--spacing-sm);
+}
+
+.user-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.user-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-xs);
+}
+
+.user-name {
+    font-weight: 600;
+    color: var(--text-primary);
+    font-size: var(--font-size-sm);
+}
+
+.message-time {
+    font-size: var(--font-size-xs);
+    color: var(--text-tertiary);
+}
+
+.user-last-message {
+    font-size: var(--font-size-xs);
+    color: var(--text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.unread-badge {
+    background-color: var(--primary-color);
+    color: #ffffff;
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: var(--border-radius-xl);
+    min-width: 20px;
+    text-align: center;
+    margin-left: var(--spacing-sm);
+}
+
+/* 右侧聊天内容 */
+#chat-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--bg-color);
+    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+    border: 1px solid var(--border-color);
+    border-left: none;
+
+}
+
+/* 聊天头部 */
+.chat-header {
+    background-color: var(--bg-color);
+    padding: var(--spacing-md) var(--spacing-md);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 0 var(--border-radius-lg) 0 0;
+
+}
+
+.chat-user-info {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 10px;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.chat-user-info h3 {
+    margin: 0 0 2px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333333;
+}
+
+.user-status {
+    font-size: 12px;
+    color: #4caf50;
+    margin: 0;
+}
+
+.chat-actions {
+    display: flex;
+    gap: 10px;
+}
+
+.action-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: #f0f0f0;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.action-btn:hover {
+    background-color: #e0e0e0;
+}
+
+/* 聊天历史 */
+.chat-history {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+    background-color: #f5f5f5;
+    background-image: url('?prompt=chat%20background%20pattern%20subtle%20light&image_size=landscape_16_9');
+    background-size: cover;
+    background-position: center;
+}
+
+.chat-message {
+    display: flex;
+    margin-bottom: 15px;
+    align-items: flex-end;
+}
+
+.chat-message.sent {
+    flex-direction: row-reverse;
+}
+
+.chat-message.sent .user-avatar {
+    margin-right: 0;
+    margin-left: 10px;
+}
+
+.message-content {
+    max-width: 70%;
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-message.sent .message-content {
+    align-items: flex-end;
+}
+
+.message-text {
+    padding: 10px 15px;
+    border-radius: 18px;
+    margin-bottom: 4px;
+    line-height: 1.4;
+}
+
+.chat-message.received .message-text {
+    background-color: #ffffff;
+    border-bottom-left-radius: 4px;
+}
+
+.chat-message.sent .message-text {
+    background-color: #ff5000;
+    color: #ffffff;
+    border-bottom-right-radius: 4px;
+}
+
+.message-time {
+    font-size: 11px;
+    color: #999999;
+}
+
+/* 消息输入区 */
+.chat-input-area {
+    background-color: #f5f5f5;
+    padding: 15px 20px;
+    border-top: 1px solid #e0e0e0;
+    border-radius: 0 0 10px 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.input-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    background-color: #f0f0f0;
+    border-radius: 24px;
+    padding: 8px 15px;
+    gap: 10px;
+}
+
+.input-btn {
+    background: none;
+    border: none;
+    font-size: 16px;
+    cursor: pointer;
+    padding: 4px;
+}
+
+.message-input {
+    flex: 1;
+    border: none;
+    background: none;
+    outline: none;
+    font-size: 14px;
+    color: #333333;
+    min-width: 0;
+}
+
+.message-input::placeholder {
+    color: #999999;
+}
+
+.send-btn {
+    padding: 8px 20px;
+    background-color: #ff5000;
+    color: #ffffff;
+    border: none;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.send-btn:hover {
+    background-color: #ff6a00;
+}
+
+/* 空状态 */
+.empty-state {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #f5f5f5;
+    padding: 40px;
+    text-align: center;
+}
+
+.empty-state img {
+    width: 120px;
+    height: 120px;
+    margin-bottom: 20px;
+    opacity: 0.6;
+}
+
+.empty-state h3 {
+    margin: 0 0 10px;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333333;
+}
+
+.empty-state p {
+    margin: 0;
+    font-size: 14px;
+    color: #999999;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    #chat-nav {
+        width: 280px;
+    }
+
+    .chat-history {
+        padding: 15px;
+    }
+
+    .message-content {
+        max-width: 80%;
+    }
+}
+
+@media (max-width: 480px) {
+    #chat-nav {
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        z-index: 100;
+        transform: translateX(-100%);
+        transition: transform 0.3s ease;
+    }
+
+    #chat-nav.active {
+        transform: translateX(0);
+    }
+
+    #chat-content {
+        width: 100%;
+    }
+
+    .chat-header {
+        padding: 15px;
+    }
+
+    .chat-input-area {
+        padding: 10px 15px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/Views/User/User.vue b/src/Views/User/User.vue
new file mode 100644
index 0000000..b30379c
--- /dev/null
+++ b/src/Views/User/User.vue
@@ -0,0 +1,1353 @@
+<!-- 用户中心 -->
+<template>
+  <div id="user-center">
+    <!-- 左右结构 左边导航栏（用户信息 地址管理、客服、帮助中心 ） 右边内容（根据导航栏切换） -->
+    <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="用户头像">
+        </div>
+        <div class="user-info">
+          <h3>用户名</h3>
+          <p class="user-level">普通会员</p>
+        </div>
+      </div>
+      <ul>
+        <li :class="{ active: activeNav === 'userInfo' }" @click="setActiveNav('userInfo')">
+          <i class="nav-icon user-icon"></i>
+          <span>用户信息</span>
+        </li>
+        <li :class="{ active: activeNav === 'address' }" @click="setActiveNav('address')">
+          <i class="nav-icon address-icon"></i>
+          <span>地址管理</span>
+        </li>
+        <li :class="{ active: activeNav === 'order' }" @click="setActiveNav('order')">
+          <i class="nav-icon order-icon"></i>
+          <span>订单</span>
+        </li>
+        <li :class="{ active: activeNav === 'favorite' }" @click="setActiveNav('favorite')">
+          <i class="nav-icon favorite-icon"></i>
+          <span>收藏</span>
+        </li>
+        <li :class="{ active: activeNav === 'customerService' }" @click="setActiveNav('customerService')">
+          <i class="nav-icon service-icon"></i>
+          <span>客服</span>
+        </li>
+        <li :class="{ active: activeNav === 'help' }" @click="setActiveNav('help')">
+          <i class="nav-icon help-icon"></i>
+          <span>帮助中心</span>
+        </li>
+      </ul>
+    </div>
+    <!-- 右边内容 -->
+    <div id="user-center-content">
+      <!-- 用户信息 -->
+      <div v-if="activeNav === 'userInfo'" class="content-section">
+        <div class="section-header">
+          <h2>用户信息</h2>
+          <button class="edit-btn">编辑资料</button>
+        </div>
+        <div class="user-profile">
+          <div class="profile-avatar">
+            <img :src="user.avatar" alt="用户头像">
+            <button class="change-avatar-btn">更换头像</button>
+          </div>
+          <div class="profile-info">
+            <div class="info-item">
+              <label>用户名：</label>
+              <span>{{ user.username }}</span>
+            </div>
+            <div class="info-item">
+              <label>昵称：</label>
+              <span>我的昵称</span>
+            </div>
+            <div class="info-item">
+              <label>性别：</label>
+              <span>男</span>
+            </div>
+            <div class="info-item">
+              <label>生日：</label>
+              <span>1990-01-01</span>
+            </div>
+            <div class="info-item">
+              <label>邮箱：</label>
+              <span>user@example.com</span>
+            </div>
+            <div class="info-item">
+              <label>手机号：</label>
+              <span>138****8888</span>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 用户统计数据 -->
+        <div class="user-stats">
+          <div class="stat-item">
+            <span class="stat-value">{{ user.followCount }}</span>
+            <span class="stat-label">关注</span>
+          </div>
+          <div class="stat-divider"></div>
+          <div class="stat-item">
+            <span class="stat-value">{{ user.fansCount }}</span>
+            <span class="stat-label">粉丝</span>
+          </div>
+          <div class="stat-divider"></div>
+          <div class="stat-item">
+            <span class="stat-value">{{ user.collectionCount }}</span>
+            <span class="stat-label">收藏</span>
+          </div>
+        </div>
+        <div class="security-section">
+          <h3>账号安全</h3>
+          <div class="security-item">
+            <span>密码</span>
+            <span class="security-status">已设置</span>
+            <button class="modify-btn">修改</button>
+          </div>
+          <div class="security-item">
+            <span>邮箱</span>
+            <span class="security-status">已验证</span>
+            <button class="modify-btn">修改</button>
+          </div>
+          <div class="security-item">
+            <span>手机</span>
+            <span class="security-status">已验证</span>
+            <button class="modify-btn">修改</button>
+          </div>
+        </div>
+        
+      </div>
+      
+      <!-- 地址管理 -->
+      <div v-if="activeNav === 'address'" class="content-section">
+        <div class="section-header">
+          <h2>地址管理</h2>
+          <button class="add-btn">添加新地址</button>
+        </div>
+        <div class="address-list">
+          <div 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>
+            </div>
+            <div class="address-detail">
+              北京市朝阳区建国路88号SOHO现代城A座2801室
+            </div>
+            <div class="address-actions">
+              <button class="edit-address-btn">编辑</button>
+              <button class="delete-address-btn">删除</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>
+          </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>
+        <div class="order-list">
+          <div class="order-item">
+            <div class="order-header">
+              <span class="order-time">2024-01-01 10:00:00</span>
+              <span class="order-status">已完成</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-info">
+                  <h4>商品名称</h4>
+                  <p>商品描述</p>
+                  <div class="goods-price">¥99.99</div>
+                </div>
+              </div>
+            </div>
+            <div class="order-footer">
+              <span class="order-total">共1件商品 合计：¥99.99</span>
+              <button class="order-btn">再次购买</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 收藏 -->
+      <div v-if="activeNav === 'favorite'" class="content-section">
+        <div class="section-header">
+          <h2>我的收藏</h2>
+        </div>
+        <div class="favorite-tabs">
+          <button :class="{ active: activeFavoriteTab === 'goods' }" @click="activeFavoriteTab = 'goods'">商品</button>
+          <button :class="{ active: activeFavoriteTab === 'shop' }" @click="activeFavoriteTab = 'shop'">店铺</button>
+        </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="收藏商品">
+            <div class="favorite-info">
+              <h4>商品名称</h4>
+              <p>商品描述</p>
+              <div class="favorite-price">¥199.99</div>
+            </div>
+            <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="收藏商品">
+            <div class="favorite-info">
+              <h4>商品名称</h4>
+              <p>商品描述</p>
+              <div class="favorite-price">¥299.99</div>
+            </div>
+            <button class="unfavorite-btn">取消收藏</button>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 客服 -->
+      <div v-if="activeNav === 'customerService'" class="content-section">
+        <div class="section-header">
+          <h2>客服中心</h2>
+        </div>
+        <div class="service-content">
+          <div class="service-channel">
+            <h3>联系客服</h3>
+            <div class="channel-item">
+              <span>在线客服</span>
+              <button class="service-btn">立即咨询</button>
+            </div>
+            <div class="channel-item">
+              <span>电话客服</span>
+              <span class="service-phone">400-123-4567</span>
+            </div>
+            <div class="channel-item">
+              <span>邮箱客服</span>
+              <span class="service-email">service@example.com</span>
+            </div>
+          </div>
+          <div class="service-faq">
+            <h3>常见问题</h3>
+            <ul class="faq-list">
+              <li><a href="#">如何修改密码？</a></li>
+              <li><a href="#">如何退换货？</a></li>
+              <li><a href="#">如何查询订单？</a></li>
+              <li><a href="#">如何使用优惠券？</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 帮助中心 -->
+      <div v-if="activeNav === 'help'" class="content-section">
+        <div class="section-header">
+          <h2>帮助中心</h2>
+        </div>
+        <div class="help-content">
+          <div class="help-category">
+            <h3>账号相关</h3>
+            <ul class="help-list">
+              <li><a href="#">如何注册账号？</a></li>
+              <li><a href="#">如何找回密码？</a></li>
+              <li><a href="#">如何修改个人信息？</a></li>
+              <li><a href="#">如何绑定手机/邮箱？</a></li>
+            </ul>
+          </div>
+          <div class="help-category">
+            <h3>订单相关</h3>
+            <ul class="help-list">
+              <li><a href="#">如何下单？</a></li>
+              <li><a href="#">如何查询订单状态？</a></li>
+              <li><a href="#">如何取消订单？</a></li>
+              <li><a href="#">如何申请退换货？</a></li>
+            </ul>
+          </div>
+          <div class="help-category">
+            <h3>支付相关</h3>
+            <ul class="help-list">
+              <li><a href="#">支持哪些支付方式？</a></li>
+              <li><a href="#">支付失败怎么办？</a></li>
+              <li><a href="#">如何申请退款？</a></li>
+              <li><a href="#">退款到账时间？</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } 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'
+
+const router = useRouter()
+const route = useRoute()
+
+// 当前活跃的导航项
+const activeNav = ref('userInfo')
+
+// 订单标签
+const activeOrderTab = ref('all')
+
+// 收藏标签
+const activeFavoriteTab = ref('goods')
+
+// 用户信息
+const user = ref({
+  username: '用户名',
+  avatar: 'https://neeko-copilot.bytedance.net/api/text2image?prompt=user%20avatar%20portrait%20friendly%20smile&image_size=square',
+  level: 3,
+  followCount: 12,
+  fansCount: 8,
+  collectionCount: 25,
+  couponCount: 3,
+  discountCount: 5,
+  taoCoin: 1280,
+  points: 560
+})
+
+// 订单状态数量
+const orderCounts = ref({
+  pending_payment: 2,
+  pending_shipment: 1,
+  pending_receipt: 3,
+  pending_review: 0,
+  completed: 0
+})
+
+// 初始化时检查URL参数，设置活跃导航项
+onMounted(() => {
+  const navParam = route.query.nav as string
+  if (navParam) {
+    activeNav.value = navParam
+  }
+  
+  // 检查订单状态参数
+  const statusParam = route.query.status as string
+  if (statusParam) {
+    // 根据状态设置对应的订单标签
+    switch (statusParam) {
+      case 'pending_payment':
+        activeOrderTab.value = 'pending'
+        break
+      case 'pending_shipment':
+        activeOrderTab.value = 'shipping'
+        break
+      case 'pending_receipt':
+        activeOrderTab.value = 'received'
+        break
+      case 'pending_review':
+        activeOrderTab.value = 'reviewed'
+        break
+      case 'completed':
+        activeOrderTab.value = 'completed'
+        break
+      default:
+        activeOrderTab.value = 'all'
+    }
+  }
+})
+
+// 设置活跃导航项
+const setActiveNav = (nav: string) => {
+  activeNav.value = nav
+}
+
+// 导航到指定页面
+const navigateTo = (path: string) => {
+  router.push(path)
+}
+
+// 导航到订单页面并带上状态参数
+const navigateToOrder = (status: string) => {
+  router.push({ 
+    path: '/user',
+    query: { 
+      nav: 'order',
+      status: status
+    } 
+  })
+}
+</script>
+
+<style scoped>
+#user-center {
+  width: 100%;
+  min-height: 100vh;
+  background-color: var(--bg-light);
+  display: flex;
+  padding: var(--spacing-lg);
+  box-sizing: border-box;
+}
+
+/* 左侧导航栏 */
+#user-center-nav {
+  width: 240px;
+  background-color: var(--bg-white);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-md);
+  margin-right: var(--spacing-lg);
+  padding: var(--spacing-lg) 0;
+  flex-shrink: 0;
+}
+
+.nav-header {
+  padding: 0 var(--spacing-lg) var(--spacing-lg);
+  border-bottom: 1px solid var(--border-light);
+  text-align: center;
+}
+
+.user-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin: 0 auto var(--spacing-sm);
+  border: 2px solid var(--border-light);
+}
+
+.user-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.user-info h3 {
+  margin: 0 0 var(--spacing-xs);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-dark);
+}
+
+.user-level {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+#user-center-nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+#user-center-nav li {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-md) var(--spacing-lg);
+  cursor: pointer;
+  transition: all var(--transition-normal) ease;
+  color: var(--text-secondary);
+}
+
+#user-center-nav li:hover {
+  background-color: var(--bg-light);
+  color: var(--primary-color);
+}
+
+#user-center-nav li.active {
+  background-color: var(--primary-light);
+  color: var(--primary-color);
+  border-left: 3px solid var(--primary-color);
+}
+
+.nav-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: var(--spacing-sm);
+  background-color: var(--bg-light);
+  border-radius: var(--border-radius-sm);
+}
+
+.user-icon {
+  background-color: var(--primary-color);
+}
+
+.address-icon {
+  background-color: var(--success-color);
+}
+
+.order-icon {
+  background-color: var(--info-color);
+}
+
+.favorite-icon {
+  background-color: var(--error-color);
+}
+
+.service-icon {
+  background-color: var(--warning-color);
+}
+
+.help-icon {
+  background-color: var(--warning-color);
+}
+
+/* 右侧内容 */
+#user-center-content {
+  flex: 1;
+  background-color: var(--bg-white);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: var(--spacing-lg);
+}
+
+.content-section {
+  min-height: 600px;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-md);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.section-header h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-dark);
+}
+
+.edit-btn, .add-btn {
+  padding: var(--spacing-xs) var(--spacing-md);
+  background-color: var(--primary-color);
+  color: var(--bg-white);
+  border: none;
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  font-size: 14px;
+  transition: all var(--transition-normal) ease;
+}
+
+.edit-btn:hover, .add-btn:hover {
+  background-color: var(--primary-dark);
+}
+
+/* 用户信息 */
+.user-profile {
+  display: flex;
+  margin-bottom: var(--spacing-xl);
+  padding: var(--spacing-lg);
+  background-color: var(--bg-light);
+  border-radius: var(--border-radius-lg);
+}
+
+.profile-avatar {
+  margin-right: var(--spacing-xl);
+  text-align: center;
+}
+
+.profile-avatar img {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid var(--bg-white);
+  box-shadow: var(--shadow-md);
+}
+
+.change-avatar-btn {
+  margin-top: var(--spacing-sm);
+  padding: var(--spacing-xs) var(--spacing-md);
+  background-color: var(--bg-white);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  font-size: 12px;
+  transition: all var(--transition-normal) ease;
+}
+
+.change-avatar-btn:hover {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.profile-info {
+  flex: 1;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--spacing-md);
+  font-size: 14px;
+}
+
+.info-item label {
+  width: 100px;
+  color: var(--text-secondary);
+}
+
+.info-item span {
+  color: var(--text-dark);
+}
+
+.security-section {
+  margin-top: var(--spacing-xl);
+}
+
+.security-section h3 {
+  margin: 0 0 var(--spacing-lg);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-dark);
+}
+
+.security-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-md) 0;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.security-status {
+  color: var(--success-color);
+  font-size: 14px;
+}
+
+.modify-btn {
+  padding: var(--spacing-xs) var(--spacing-md);
+  background-color: var(--bg-white);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  font-size: 12px;
+  transition: all var(--transition-normal) ease;
+}
+
+.modify-btn:hover {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+/* 用户统计数据 */
+.user-stats {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px 0;
+  padding: 20px;
+  background-color: var(--bg-light);
+  border-radius: var(--border-radius-lg);
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 20px;
+}
+
+.stat-value {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-dark);
+  margin-bottom: 4px;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.stat-divider {
+  width: 1px;
+  height: 30px;
+  background-color: var(--border-light);
+  margin: 0 10px;
+}
+
+/* 订单状态卡片 */
+.order-status-card {
+  background-color: var(--bg-white);
+  border-radius: var(--border-radius-lg);
+  padding: 20px;
+  box-shadow: var(--shadow-md);
+  margin: 20px 0;
+  border: 1px solid var(--border-light);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-dark);
+  margin: 0;
+}
+
+.card-more {
+  font-size: 14px;
+  color: var(--text-secondary);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: all 0.3s ease;
+}
+
+.card-more:hover {
+  color: var(--primary-color);
+}
+
+.order-status-grid {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.status-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  padding: 16px;
+  border-radius: var(--border-radius-md);
+  position: relative;
+  margin: 10px;
+  flex: 1;
+  min-width: 80px;
+}
+
+.status-item:hover {
+  background-color: var(--bg-light);
+  transform: translateY(-2px);
+}
+
+.status-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: var(--bg-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+  font-size: 24px;
+  color: var(--text-secondary);
+  transition: all 0.3s ease;
+}
+
+.status-item:hover .status-icon {
+  background-color: var(--primary-light);
+  color: var(--primary-color);
+  transform: scale(1.1);
+  box-shadow: var(--shadow-sm);
+}
+
+.status-label {
+  font-size: 14px;
+  color: var(--text-dark);
+  margin-bottom: 4px;
+  transition: all 0.3s ease;
+}
+
+.status-item:hover .status-label {
+  color: var(--primary-color);
+}
+
+.status-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background-color: var(--error-color);
+  color: var(--bg-white);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  min-width: 20px;
+  text-align: center;
+}
+
+/* 功能菜单网格 */
+.user-function-grid {
+  margin: 20px 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.function-card {
+  background-color: var(--bg-white);
+  border-radius: var(--border-radius-lg);
+  padding: 20px;
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--border-light);
+  transition: all 0.3s ease;
+}
+
+.function-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+.function-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.function-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  padding: 16px;
+  border-radius: var(--border-radius-md);
+  position: relative;
+}
+
+.function-item:hover {
+  background-color: var(--bg-light);
+  transform: translateY(-2px);
+}
+
+.function-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: var(--bg-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+  font-size: 24px;
+  color: var(--text-secondary);
+  transition: all 0.3s ease;
+}
+
+.function-item:hover .function-icon {
+  background-color: var(--primary-light);
+  color: var(--primary-color);
+  transform: scale(1.1);
+  box-shadow: var(--shadow-sm);
+}
+
+.function-label {
+  font-size: 14px;
+  color: var(--text-dark);
+  margin-bottom: 4px;
+}
+
+.function-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background-color: var(--error-color);
+  color: var(--bg-white);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  min-width: 20px;
+  text-align: center;
+}
+
+.function-value {
+  font-size: 12px;
+  color: var(--primary-color);
+  font-weight: 600;
+}
+
+/* 地址管理 */
+.address-list {
+  margin-top: 20px;
+}
+
+.address-item {
+  padding: 20px;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  margin-bottom: 15px;
+  transition: all 0.3s ease;
+}
+
+.address-item:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.address-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.address-name {
+  font-weight: 600;
+  margin-right: 15px;
+  color: #333333;
+}
+
+.address-phone {
+  color: #666666;
+  margin-right: 15px;
+}
+
+.address-tag {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.address-tag.default {
+  background-color: #ff5000;
+  color: #ffffff;
+}
+
+.address-detail {
+  color: #666666;
+  line-height: 1.4;
+  margin-bottom: 15px;
+}
+
+.address-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.edit-address-btn, .delete-address-btn {
+  padding: 4px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.3s ease;
+  margin-left: 10px;
+}
+
+.edit-address-btn {
+  background-color: #ffffff;
+  color: #666666;
+  border: 1px solid #ddd;
+}
+
+.edit-address-btn:hover {
+  border-color: #ff5000;
+  color: #ff5000;
+}
+
+.delete-address-btn {
+  background-color: #ffffff;
+  color: #ff4d4f;
+  border: 1px solid #ffccc7;
+}
+
+.delete-address-btn:hover {
+  background-color: #fff2f0;
+}
+
+/* 订单 */
+.order-tabs {
+  display: flex;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 20px;
+}
+
+.order-tabs button {
+  padding: 10px 20px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  color: #666666;
+  transition: all 0.3s ease;
+  border-bottom: 2px solid transparent;
+}
+
+.order-tabs button:hover {
+  color: #ff5000;
+}
+
+.order-tabs button.active {
+  color: #ff5000;
+  border-bottom-color: #ff5000;
+}
+
+.order-list {
+  margin-top: 20px;
+}
+
+.order-item {
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  overflow: hidden;
+}
+
+.order-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+  background-color: #fafafa;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.order-time {
+  color: #999999;
+  font-size: 14px;
+}
+
+.order-status {
+  color: #ff5000;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.order-goods {
+  padding: 20px;
+}
+
+.goods-item {
+  display: flex;
+  align-items: center;
+}
+
+.goods-item img {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-right: 15px;
+}
+
+.goods-info {
+  flex: 1;
+}
+
+.goods-info h4 {
+  margin: 0 0 5px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333333;
+}
+
+.goods-info p {
+  margin: 0 0 10px;
+  font-size: 12px;
+  color: #999999;
+}
+
+.goods-price {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333333;
+}
+
+.order-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+  background-color: #fafafa;
+  border-top: 1px solid #f0f0f0;
+}
+
+.order-total {
+  font-size: 14px;
+  color: #333333;
+}
+
+.order-btn {
+  padding: 6px 16px;
+  background-color: #ffffff;
+  color: #ff5000;
+  border: 1px solid #ff5000;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.3s ease;
+}
+
+.order-btn:hover {
+  background-color: #ff5000;
+  color: #ffffff;
+}
+
+/* 收藏 */
+.favorite-tabs {
+  display: flex;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 20px;
+}
+
+.favorite-tabs button {
+  padding: 10px 20px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  color: #666666;
+  transition: all 0.3s ease;
+  border-bottom: 2px solid transparent;
+}
+
+.favorite-tabs button:hover {
+  color: #ff5000;
+}
+
+.favorite-tabs button.active {
+  color: #ff5000;
+  border-bottom-color: #ff5000;
+}
+
+.favorite-list {
+  margin-top: 20px;
+}
+
+.favorite-item {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  margin-bottom: 15px;
+  transition: all 0.3s ease;
+}
+
+.favorite-item:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.favorite-item img {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-right: 20px;
+}
+
+.favorite-info {
+  flex: 1;
+}
+
+.favorite-info h4 {
+  margin: 0 0 5px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333333;
+}
+
+.favorite-info p {
+  margin: 0 0 10px;
+  font-size: 12px;
+  color: #999999;
+}
+
+.favorite-price {
+  font-size: 16px;
+  font-weight: 600;
+  color: #ff5000;
+}
+
+.unfavorite-btn {
+  padding: 6px 16px;
+  background-color: #ffffff;
+  color: #ff4d4f;
+  border: 1px solid #ffccc7;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.3s ease;
+}
+
+.unfavorite-btn:hover {
+  background-color: #fff2f0;
+}
+
+/* 客服 */
+.service-content {
+  margin-top: 20px;
+}
+
+.service-channel {
+  padding: 20px;
+  background-color: #fafafa;
+  border-radius: 8px;
+  margin-bottom: 30px;
+}
+
+.service-channel h3 {
+  margin: 0 0 20px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333333;
+}
+
+.channel-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.service-btn {
+  padding: 6px 16px;
+  background-color: #ff5000;
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.3s ease;
+}
+
+.service-btn:hover {
+  background-color: #ff6a00;
+}
+
+.service-phone, .service-email {
+  color: #666666;
+}
+
+.service-faq {
+  margin-top: 30px;
+}
+
+.service-faq h3 {
+  margin: 0 0 20px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333333;
+}
+
+.faq-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.faq-list li {
+  margin-bottom: 10px;
+}
+
+.faq-list a {
+  color: #666666;
+  text-decoration: none;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.faq-list a:hover {
+  color: #ff5000;
+  text-decoration: underline;
+}
+
+/* 帮助中心 */
+.help-content {
+  margin-top: 20px;
+}
+
+.help-category {
+  margin-bottom: 30px;
+}
+
+.help-category h3 {
+  margin: 0 0 15px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333333;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.help-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.help-list li {
+  margin-bottom: 10px;
+}
+
+.help-list a {
+  color: #666666;
+  text-decoration: none;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.help-list a:hover {
+  color: #ff5000;
+  text-decoration: underline;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  #user-center {
+    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 {
+    overflow-x: auto;
+  }
+  
+  .order-tabs button, .favorite-tabs button {
+    white-space: nowrap;
+  }
+}
+</style>
diff --git a/src/Views/User/Userinfo.vue b/src/Views/User/Userinfo.vue
index 05ec47c..11a7009 100644
--- a/src/Views/User/Userinfo.vue
+++ b/src/Views/User/Userinfo.vue
@@ -2,28 +2,902 @@
 <!-- 布局 从上到下  user信息：用户头像 用户名 -->
 <template>
     <div class="user-info">
+        <!-- 用户信息头部 -->
         <div class="user-info-top">
-            <div class="user-avatar">
-                <!-- <img :src="user.avatar" alt="用户头像"> -->
+            <div class="user-avatar-wrapper">
+                <div class="user-avatar">
+                    <img :src="user.avatar" alt="用户头像" class="avatar-img">
+                    <span class="avatar-edit-badge">编辑</span>
+                </div>
+                <!-- <span class="user-online-indicator"></span> -->
+                <div class="user-name">
+                    <span class="name-text">{{ user.username }}</span>
+                    <span class="user-level">Lv.{{ user.level }}</span>
+                </div>
             </div>
-            <div class="user-name">
-                <div>用户名：</div>
-                <div>关注店铺 收货地址</div>
+            <div class="user-name-section">
+                <div class="user-stats">
+                    <div class="stat-item">
+                        <span class="stat-value">{{ user.followCount }}</span>
+                        <span class="stat-label">关注</span>
+                    </div>
+                    <div class="stat-divider"></div>
+                    <div class="stat-item">
+                        <span class="stat-value">{{ user.fansCount }}</span>
+                        <span class="stat-label">粉丝</span>
+                    </div>
+                    <div class="stat-divider"></div>
+                    <div class="stat-item">
+                        <span class="stat-value">{{ user.collectionCount }}</span>
+                        <span class="stat-label">收藏</span>
+                    </div>
+                </div>
+                <div class="user-actions">
+                    <a href="/user/address" class="action-link">收货地址</a>
+                    <a href="/user/follow" class="action-link">关注店铺</a>
+                </div>
             </div>
         </div>
-        <div class="user-info-main">
-            <div>
-                购物信息 ：购物车 待收货 代发货 待付款
+
+        <!-- 订单状态卡片 -->
+        <div class="order-status-card">
+            <div class="card-header">
+                <h3 class="card-title">我的订单</h3>
+                <!-- <a href="/user/orders" class="card-more">查看全部 <SettingOutlined style="transform: rotate(90deg);" /></a> -->
             </div>
-            <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>
+
+        <!-- 功能菜单网格 -->
+        <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="navigateTo('/user/wishlist')">
+                        <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>
-                足迹信息 ： 已买完 收藏夹 购买过的店 足迹信息
+
+            <!-- 优惠相关 -->
+            <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="navigateTo('/user/profile')">
+                        <div class="function-icon">
+                            <SettingOutlined />
+                        </div>
+                        <div class="function-label">账户设置</div>
+                    </div>
+                    <div class="function-item" @click="navigateTo('/user/address')">
+                        <div class="function-icon">
+                            <EnvironmentOutlined />
+                        </div>
+                        <div class="function-label">收货地址</div>
+                    </div>
+                    <div class="function-item" @click="navigateTo('/user/customer_service')">
+                        <div class="function-icon">
+                            <CustomerServiceOutlined />
+                        </div>
+                        <div class="function-label">客服中心</div>
+                    </div>
+                    <div class="function-item" @click="navigateTo('/user/help')">
+                        <div class="function-icon">
+                            <QuestionCircleOutlined />
+                        </div>
+                        <div class="function-label">帮助中心</div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } 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'
+
+const router = useRouter()
+
+// 用户信息
+const user = ref({
+    username: '用户名',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=user123',
+    level: 3,
+    followCount: 12,
+    fansCount: 8,
+    collectionCount: 25,
+    couponCount: 3,
+    discountCount: 5,
+    taoCoin: 1280,
+    points: 560
+})
+
+// 订单状态数量
+const orderCounts = ref({
+    pending_payment: 2,
+    pending_shipment: 1,
+    pending_receipt: 3,
+    pending_review: 0,
+    completed: 0
+})
+
+// 导航到指定页面
+const navigateTo = (path: string) => {
+    // 根据路径跳转到User.vue中对应的导航项
+    if (path === '/user/address') {
+        router.push({ path: '/user', query: { nav: 'address' } })
+    } else if (path === '/user/wishlist' || path === '/user/favorite') {
+        router.push({ path: '/user', query: { nav: 'favorite' } })
+    } else if (path === '/user/customer_service') {
+        router.push({ path: '/user', query: { nav: 'customerService' } })
+    } else if (path === '/user/help') {
+        router.push({ path: '/user', query: { nav: 'help' } })
+    } else if (path === '/user/profile' || path === '/user/settings') {
+        router.push({ path: '/user', query: { nav: 'userInfo' } })
+    } else {
+        // 其他路径保持不变
+        router.push(path)
+    }
+}
+
+// 导航到订单页面并带上状态参数
+const navigateToOrder = (status: string) => {
+    router.push({ 
+        path: '/user',
+        query: { 
+            nav: 'order',
+            status: status
+        } 
+    })
+}
+</script>
+
+<style scoped>
+.user-info {
+    margin: 0 auto;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    position: relative;
+}
+
+/* 用户信息头部 */
+.user-info-top {
+    align-items: center;
+    background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
+    border-radius: 16px;
+    padding: 10px;
+    margin-bottom: 30px;
+    color: #ffffff;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+    position: relative;
+    overflow: hidden;
+}
+
+.user-info-top::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
+    pointer-events: none;
+}
+
+.user-avatar-wrapper {
+    display: flex;
+    position: relative;
+}
+
+.user-avatar {
+    position: relative;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    margin-right: 12px;
+}
+
+.user-avatar:hover {
+    transform: scale(1.1) rotate(360deg);
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.8);
+}
+
+.avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.avatar-edit-badge {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: #ffffff;
+    font-size: 6px;
+    padding: 4px 0;
+    text-align: center;
+    transition: all 0.3s ease;
+}
+
+.user-online-indicator {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 14px;
+    height: 14px;
+    background-color: #52c41a;
+    border: 3px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    box-shadow: 0 2px 8px rgba(82, 196, 26, 0.4);
+    animation: pulse 2s infinite;
+}
+
+.user-name-section {
+    padding: 0 12px;
+    flex: 1;
+}
+
+.user-name {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    border-radius: 16px;
+    backdrop-filter: blur(10px);
+}
+
+.name-text {
+    font-size: 12px;
+    font-weight: 700;
+    margin-right: 12px;
+}
+
+.user-level {
+    font-size: 14px;
+    font-weight: 600;
+    background-color: rgba(255, 255, 255, 0.2);
+    padding: 4px 12px;
+    border-radius: 16px;
+    backdrop-filter: blur(10px);
+}
+
+.user-stats {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 16px;
+}
+
+.stat-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-right: 24px;
+}
+
+.stat-value {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 4px;
+}
+
+.stat-label {
+    font-size: 12px;
+    opacity: 0.9;
+}
+
+.stat-divider {
+    width: 1px;
+    height: 30px;
+    background-color: rgba(255, 255, 255, 0.3);
+    margin: 0 16px;
+}
+
+.user-actions {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+}
+
+.action-link {
+    color: #ffffff;
+    text-decoration: none;
+    font-size: 14px;
+    padding: 6px 16px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 20px;
+    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    backdrop-filter: blur(10px);
+}
+
+.action-link:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+    transform: translateY(-2px) scale(1.05);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(15px);
+}
+
+/* 订单状态卡片 */
+.order-status-card {
+    background-color: #ffffff;
+    border-radius: 12px;
+    padding: 10px;
+    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 {
+    transform: translateY(-2px);
+    border-color: rgba(255, 107, 107, 0.2);
+}
+
+.order-status-card .card-header {
+    background: linear-gradient(90deg, #ff9ff3 0%, #feca57 100%);
+    color: white;
+    padding: 12px 16px;
+    border-radius: 8px 8px 0 0;
+    margin: -10px -10px 5px -10px;
+}
+
+.order-status-card .card-title {
+    color: white;
+}
+
+.order-status-card .card-more {
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.order-status-card .card-more:hover {
+    color: white;
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.card-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333333;
+    margin: 0;
+}
+
+.card-more {
+    font-size: 14px;
+    color: #666666;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    transition: all 0.3s ease;
+}
+
+.card-more:hover {
+    color: #ff5000;
+}
+
+.order-status-grid {
+    display: flex;
+    justify-content: center;
+}
+
+.status-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    padding: 16px 4px;
+    border-radius: 8px;
+    position: relative;
+}
+
+.status-item:hover {
+    background-color: #f8f9fa;
+    transform: translateY(-2px);
+}
+
+.status-icon {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background-color: #f0f2f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 8px;
+    font-size: 24px;
+    color: #666666;
+    transition: all 0.3s ease;
+}
+
+.status-item:hover .status-icon {
+    background-color: rgba(255, 107, 107, 0.1);
+    color: #ff6b6b;
+    transform: scale(1.1) rotate(5deg);
+    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
+}
+
+.status-label {
+    font-size: 8px;
+    color: #333333;
+    margin-bottom: 4px;
+    transition: all 0.3s ease;
+}
+
+.status-item:hover .status-label {
+    color: #ff6b6b;
+    transform: translateY(-2px);
+}
+
+.status-badge {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background-color: #ff4d4f;
+    color: #ffffff;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 10px;
+    min-width: 20px;
+    text-align: center;
+}
+
+/* 功能菜单网格 */
+.user-function-grid {
+    position: absolute;
+    left: -300%;
+    top: 0;
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    background-color: #ffffff;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    z-index: 10;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 1s ease;
+}
+
+.user-info:hover .user-function-grid {
+    opacity: 1;
+    visibility: visible;
+    left: -215%;
+}
+
+.function-card {
+    background-color: #ffffff;
+    border-radius: 12px;
+    padding: 16px;
+    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);
+    width: 160px;
+    flex-shrink: 0;
+}
+
+/* 调整user-info的宽度，确保左侧有足够空间显示功能菜单 */
+.user-info {
+    width: 100%;
+    min-width: 200px;
+}
+
+/* 调整功能网格布局，使其在窄列中更紧凑 */
+.function-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+}
+
+.function-card:hover {
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    transform: translateY(-2px);
+    border-color: rgba(255, 107, 107, 0.2);
+}
+
+/* 功能卡片头部公共样式 */
+.function-card .card-header {
+    color: white;
+    padding: 12px 16px;
+    border-radius: 8px 8px 0 0;
+    margin: -16px -16px 16px -16px;
+}
+
+.function-card .card-title {
+    color: white;
+}
+
+/* 购物相关卡片 */
+.function-card:nth-child(1) .card-header {
+    background: linear-gradient(90deg, #ff6b6b 0%, #ff8e53 100%);
+}
+
+/* 优惠相关卡片 */
+.function-card:nth-child(2) .card-header {
+    background: linear-gradient(90deg, #4ecdc4 0%, #45b7d1 100%);
+}
+
+/* 账户相关卡片 */
+.function-card:nth-child(3) .card-header {
+    background: linear-gradient(90deg, #96ceb4 0%, #feca57 100%);
+}
+
+.function-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    padding: 12px 4px;
+    border-radius: 8px;
+    position: relative;
+}
+
+.function-item:hover {
+    background-color: #f8f9fa;
+    transform: translateY(-2px);
+}
+
+.function-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #f0f2f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 6px;
+    font-size: 20px;
+    color: #666666;
+    transition: all 0.3s ease;
+}
+
+.function-item:hover .function-icon {
+    background-color: rgba(78, 205, 196, 0.1);
+    color: #4ecdc4;
+    transform: scale(1.1) rotate(5deg);
+    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
+}
+
+.function-label {
+    font-size: 12px;
+    color: #333333;
+    margin-bottom: 2px;
+    transition: all 0.3s ease;
+}
+
+.function-item:hover .function-label {
+    color: #4ecdc4;
+    transform: translateY(-2px);
+}
+
+.function-badge {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background-color: #ff4d4f;
+    color: #ffffff;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 10px;
+    min-width: 20px;
+    text-align: center;
+}
+
+.function-value {
+    font-size: 12px;
+    color: #ff5000;
+    font-weight: 600;
+}
+
+/* 动画效果 */
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(82, 196, 26, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(82, 196, 26, 0);
+    }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .user-info {
+        padding: 12px;
+    }
+
+    .user-info-top {
+        flex-direction: column;
+        text-align: center;
+        padding: 20px;
+    }
+
+    .user-avatar-wrapper {
+        margin-right: 0;
+        margin-bottom: 20px;
+    }
+
+    .user-stats {
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .stat-item {
+        margin-right: 16px;
+    }
+
+    .user-actions {
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .order-status-grid {
+        grid-template-columns: repeat(5, 1fr);
+        gap: 8px;
+    }
+
+    .status-item {
+        padding: 12px 4px;
+    }
+
+    .status-icon {
+        width: 40px;
+        height: 40px;
+        font-size: 20px;
+    }
+
+    .status-label {
+        font-size: 12px;
+    }
+
+    .user-function-grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+
+    .function-grid {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 8px;
+    }
+
+    .function-item {
+        padding: 12px 4px;
+    }
+
+    .function-icon {
+        width: 40px;
+        height: 40px;
+        font-size: 20px;
+    }
+
+    .function-label {
+        font-size: 12px;
+    }
+
+    /* 调整卡片头部样式 */
+    .function-card .card-header {
+        padding: 10px 12px;
+        margin: -16px -16px 16px -16px;
+    }
+
+    .function-card {
+        padding: 16px;
+    }
+
+    .order-status-card {
+        padding: 16px;
+    }
+
+    .order-status-card .card-header {
+        padding: 10px 12px;
+        margin: -16px -16px 16px -16px;
+    }
+}
+
+@media (max-width: 576px) {
+    .user-info-top {
+        padding: 16px;
+    }
+
+    .user-avatar {
+        width: 80px;
+        height: 80px;
+    }
+
+    .name-text {
+        font-size: 20px;
+    }
+
+    .user-stats {
+        gap: 12px;
+    }
+
+    .stat-item {
+        margin-right: 12px;
+    }
+
+    .order-status-grid {
+        grid-template-columns: repeat(5, 1fr);
+        gap: 4px;
+    }
+
+    .status-item {
+        padding: 8px 2px;
+    }
+
+    .status-icon {
+        width: 32px;
+        height: 32px;
+        font-size: 16px;
+    }
+
+    .status-label {
+        font-size: 10px;
+    }
+
+    .function-grid {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 4px;
+    }
+
+    .function-item {
+        padding: 8px 2px;
+    }
+
+    .function-icon {
+        width: 32px;
+        height: 32px;
+        font-size: 16px;
+    }
+
+    .function-label {
+        font-size: 10px;
+    }
+}
+
+@media (max-width: 375px) {
+    .order-status-grid {
+        grid-template-columns: repeat(5, 1fr);
+    }
+
+    .status-item {
+        padding: 6px 2px;
+    }
+
+    .status-icon {
+        width: 28px;
+        height: 28px;
+        font-size: 14px;
+    }
+
+    .function-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    .function-item {
+        padding: 6px 2px;
+    }
+
+    .function-icon {
+        width: 28px;
+        height: 28px;
+        font-size: 14px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/Views/footer.vue b/src/Views/footer.vue
index 6cc4d20..2806889 100644
--- a/src/Views/footer.vue
+++ b/src/Views/footer.vue
@@ -6,7 +6,19 @@
     </div>
     <div id="footer-copyright">
       <!-- 版权信息 -->
-        <h2>Copyright @ 2023 淘淘王</h2>
+      <div class="copyright-content">
+        <p class="copyright-text">© 2026 TaoTaoWang. 保留所有权利</p>
+        <div class="copyright-links">
+          <a href="/about">关于我们</a>
+          <span class="copyright-separator">|</span>
+          <a href="/privacy">隐私政策</a>
+          <span class="copyright-separator">|</span>
+          <a href="/terms">服务条款</a>
+          <span class="copyright-separator">|</span>
+          <a href="/contact">联系我们</a>
+        </div>
+        <p class="copyright-icp">京ICP备12345678号-1 | 京公网安备11010502030123号</p>
+      </div>
     </div>
   </div>
 </template>
@@ -59,7 +71,7 @@ const productLists = ref([
 <style scoped>
 #footer {
   width: 100%;
-  padding:  0 20px;
+  padding:  0 var(--spacing-md);
 }
 h1 {
   color: #42b983;
@@ -69,4 +81,74 @@ h1 {
   /* 高度根据内容自适应 */
   height: initial;
 }
+
+/* 版权信息样式 */
+#footer-copyright {
+  background-color: var(--bg-light);
+  padding: var(--spacing-md) 0;
+  border-top: 1px solid var(--border-light);
+  margin-top: var(--spacing-xl);
+}
+
+.copyright-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.copyright-text {
+  margin: 0 0 var(--spacing-sm) 0;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.copyright-links {
+  margin: 0 0 var(--spacing-sm) 0;
+}
+
+.copyright-links a {
+  color: var(--text-secondary);
+  text-decoration: none;
+  margin: 0 var(--spacing-sm);
+  transition: color var(--transition-normal);
+}
+
+.copyright-links a:hover {
+  color: #ff5000;
+}
+
+.copyright-separator {
+  color: #999;
+  margin: 0 4px;
+}
+
+.copyright-icp {
+  margin: 0;
+  font-size: 12px;
+  color: #999;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .copyright-content {
+    padding: 0 20px;
+  }
+  
+  .copyright-links {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+  }
+  
+  .copyright-links a {
+    margin: 0;
+  }
+  
+  .copyright-separator {
+    display: none;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/Views/herde.vue b/src/Views/herde.vue
index 48d09ca..0c22e26 100644
--- a/src/Views/herde.vue
+++ b/src/Views/herde.vue
@@ -5,8 +5,14 @@
         <!-- 用户信息悬浮菜单 -->
         <Dropdown :menu="{ items: userMenu }" trigger="hover">
           <div class="user-info-container">
-            <Avatar size="large" src="https://api.dicebear.com/7.x/avataaars/svg?seed=user123" />
-            <span class="user-name">用户名</span>
+            <div class="user-avatar-wrapper">
+              <Avatar size="large" src="https://api.dicebear.com/7.x/avataaars/svg?seed=user123" class="user-avatar" />
+              <span class="user-online-indicator"></span>
+            </div>
+            <div class="user-info-text">
+              <span class="user-name">用户名</span>
+              <span class="user-level">Lv.3</span>
+            </div>
             <span class="user-arrow">▼</span>
           </div>
         </Dropdown>
@@ -14,11 +20,15 @@
       <div id="header-profile-right">
         <!-- 右侧功能菜单 -->
         <Dropdown :menu="{ items: rightMenu }" trigger="hover">
-          <Button type="text">更多</Button>
+          <Button type="text" class="header-more-btn">更多 <i class="iconfont icon-zhankaishouqi"></i></Button>
         </Dropdown>
-        <a href="/">首页</a>
-        <Button type="primary" @click="router.push('/cart')">购物车</Button>
-        <Button type="primary" @click="router.push('/order')">订单</Button>
+        <a href="/" class="header-nav-link">首页</a>
+        <Button type="primary" @click="router.push('/cart')" class="header-cart-btn">
+          <i class="iconfont icon-gouwuche"></i> 购物车
+        </Button>
+        <Button type="primary" @click="router.push('/order')" class="header-order-btn">
+          <i class="iconfont icon-dingdan"></i> 订单
+        </Button>
       </div>
     </div>
     <Row id="header-nav-row" v-if="booleanSearch">
@@ -31,30 +41,23 @@
             <!-- 搜索类型选择 -->
             <div class="search-type-selector">
               <ul>
-                <li class="search-type-item active" @click="setSearchType('宝贝')">宝贝</li>
-                <li class="search-type-item" @click="setSearchType('店铺')">店铺</li>
+                <li class="search-type-item active" @click="setSearchType('宝贝', $event)">宝贝</li>
+                <li class="search-type-item" @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"
-              />
+              <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" @onclick="onSearch">
               <span class="search-button-text">搜索</span>
@@ -100,7 +103,7 @@ const searchValue = ref('')
 const showHistory = ref(false)
 // 标志：是否正在清空历史记录
 const isClearingHistory = ref(false)
-// 标志：是否在搜索界面
+// 控制搜索框是否显示
 const booleanSearch = ref(true)
 // 路由事件 
 router.beforeEach((to, from, next) => {
@@ -109,7 +112,7 @@ router.beforeEach((to, from, next) => {
   }
   console.log(to.name)
   // 如果在商品页面 隐藏搜索框
-  if (to.name === 'productDetail') {
+  if (to.name === 'productDetail' || to.name === 'chat') {
     booleanSearch.value = false
   } else {
     booleanSearch.value = true
@@ -173,15 +176,56 @@ const onInputBlur = () => {
   }, 200)
 }
 
+// 当前搜索类型
+const currentSearchType = ref('宝贝')
+
 // 设置搜索类型
-const setSearchType = (type: string) => {
+const setSearchType = (type: string, event: MouseEvent) => {
   const typeItems = document.querySelectorAll('.search-type-item')
-  typeItems.forEach(item => {
-    item.classList.remove('active')
-  })
-  // 添加active类到点击的元素
-  // event?.currentTarget?.classList.add('active')
-  console.log('搜索类型:', type)
+  // 找到当前活跃的元素
+  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
+  }
 }
 
 // 清除搜索输入
@@ -226,8 +270,8 @@ const rightMenu = [
 <style scoped>
 #header {
   width: 100%;
-  background-color: #ffffff;
-  padding: 10px 20px;
+  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;
@@ -242,7 +286,6 @@ const rightMenu = [
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 0;
 }
 
 #header-profile-left {
@@ -255,38 +298,290 @@ const rightMenu = [
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  gap: 10px;
+  gap: var(--spacing-md);
 }
 
 /* 用户信息容器样式 */
 .user-info-container {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: 20px;
+  gap: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--border-radius-3xl);
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all var(--transition-transform);
+  background-color: var(--card-bg);
+  box-shadow: var(--shadow-sm);
 }
 
 .user-info-container:hover {
-  background-color: #f0f2f5;
+  background-color: var(--bg-light);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+/* 用户头像区域 */
+.user-avatar-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.user-avatar {
+  border: 2px solid #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.user-info-container:hover .user-avatar {
+  transform: scale(1.05);
+}
+
+.user-online-indicator {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 10px;
+  height: 10px;
+  background-color: var(--success-color);
+  border: 2px solid var(--card-bg);
+  border-radius: var(--border-radius-full);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.7);
+  }
+
+  70% {
+    box-shadow: 0 0 0 10px rgba(82, 196, 26, 0);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 rgba(82, 196, 26, 0);
+  }
+}
+
+/* 用户信息文本区域 */
+.user-info-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
 
 .user-name {
-  font-size: 14px;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+
+.user-level {
+  font-size: var(--font-size-xs);
   font-weight: 500;
-  color: #333;
+  color: var(--warning-color);
+  background-color: #fff7e6;
+  padding: 1px 6px;
+  border-radius: var(--border-radius-xl);
+  align-self: flex-start;
 }
 
 .user-arrow {
-  font-size: 12px;
-  color: #999;
-  transition: transform 0.3s ease;
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+  transition: transform var(--transition-transform);
 }
 
 .user-info-container:hover .user-arrow {
-  transform: rotate(180deg);
+  transform: rotate(180deg) scale(1.1);
+  color: var(--text-secondary);
+}
+
+/* 右侧功能菜单样式 */
+.header-more-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-md);
+  border-radius: var(--border-radius-2xl);
+  transition: all var(--transition-transform);
+  font-size: var(--font-size-sm);
+}
+
+.header-more-btn:hover {
+  background-color: var(--bg-color);
+  color: var(--text-primary);
+}
+
+.header-nav-link {
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-decoration: none;
+  padding: var(--spacing-xs) var(--spacing-md);
+  border-radius: var(--border-radius-2xl);
+  transition: all var(--transition-transform);
+  position: relative;
+}
+
+.header-nav-link:hover {
+  color: var(--primary-color);
+  background-color: var(--bg-primary-lightest);
+}
+
+.header-nav-link::after {
+  content: '';
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  width: 0;
+  height: 2px;
+  background-color: var(--primary-color);
+  border-radius: 1px;
+  transition: all var(--transition-transform);
+}
+
+.header-nav-link:hover::after {
+  width: 80%;
+  left: 10%;
+}
+
+/* 购物车和订单按钮样式 */
+.header-cart-btn,
+.header-order-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--border-radius-3xl);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  transition: all var(--transition-transform);
+  position: relative;
+  overflow: hidden;
+}
+
+.header-cart-btn {
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+  border: none;
+}
+
+.header-order-btn {
+  background: linear-gradient(135deg, var(--secondary-color), var(--secondary-hover));
+  border: none;
+}
+
+.header-cart-btn:hover,
+.header-order-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+}
+
+.header-cart-btn:active,
+.header-order-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.header-cart-btn::before,
+.header-order-btn::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transform: rotate(45deg);
+  animation: shine 3s ease-in-out infinite;
+}
+
+@keyframes shine {
+  0% {
+    transform: rotate(45deg) translateX(-100%) translateY(-100%);
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0.8;
+  }
+
+  100% {
+    transform: rotate(45deg) translateX(100%) translateY(100%);
+    opacity: 0;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  #header-profile {
+    padding: 8px 0;
+  }
+
+  .user-info-container {
+    gap: 8px;
+    padding: 8px 12px;
+  }
+
+  .user-name {
+    font-size: 13px;
+  }
+
+  .user-level {
+    font-size: 11px;
+    padding: 1px 4px;
+  }
+
+  #header-profile-right {
+    gap: 8px;
+  }
+
+  .header-nav-link {
+    font-size: 13px;
+    padding: 4px 8px;
+  }
+
+  .header-cart-btn,
+  .header-order-btn {
+    padding: 6px 12px;
+    font-size: 13px;
+  }
+
+  .header-cart-btn i,
+  .header-order-btn i,
+  .header-more-btn i {
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 576px) {
+  .user-info-text {
+    display: none;
+  }
+
+  .user-info-container {
+    padding: 6px;
+    border-radius: 50%;
+  }
+
+  .header-nav-link {
+    font-size: 12px;
+  }
+
+  .header-cart-btn span,
+  .header-order-btn span {
+    display: none;
+  }
+
+  .header-cart-btn,
+  .header-order-btn {
+    padding: 8px;
+    border-radius: 50%;
+    min-width: unset;
+  }
 }
 
 /* Logo样式 */
@@ -311,7 +606,7 @@ const rightMenu = [
   align-items: flex-start;
   position: relative;
   width: 100%;
-  max-width: 700px;
+  max-width: 800px;
   margin: 0 auto;
 }
 
@@ -394,22 +689,81 @@ const rightMenu = [
   content: '';
   position: absolute;
   bottom: 8px;
-  left: 0;
-  width: 100%;
+  left: -10%;
+  width: 120%;
   height: 2px;
   background-color: #ff5000;
   border-radius: 1px;
-  animation: slideIn 0.3s ease-out;
 }
 
-@keyframes slideIn {
+/* 从左往右动画 */
+.search-type-item.animate-right::after {
+  animation: slideInRight 0.3s ease-out;
+}
+
+/* 从右往左动画 */
+.search-type-item.animate-left::after {
+  animation: slideInLeft 0.3s ease-out;
+}
+
+/* 从左往右消失动画 */
+.search-type-item.animate-right-out::after {
+  animation: slideOutRight 0.3s ease-out;
+}
+
+/* 从右往左消失动画 */
+.search-type-item.animate-left-out::after {
+  animation: slideOutLeft 0.3s ease-out;
+}
+/* 搜索类型选择器从左往右动画 */
+@keyframes slideInRight {
   from {
     width: 0;
-    left: 50%;
+    left: -10%;
   }
+
   to {
-    width: 100%;
-    left: 0;
+    width: 120%;
+    left: -10%;
+  }
+}
+/* 搜索类型选择器从右往左动画 */
+@keyframes slideInLeft {
+  from {
+    width: 0;
+    left: 120%;
+
+  }
+
+  to {
+    width: 120%;
+    left: -10%;
+  }
+}
+
+/* 从左往右消失动画 */
+@keyframes slideOutRight {
+  from {
+    width: 120%;
+    left: -10%;
+  }
+
+  to {
+    width: 0;
+    left: 100%;
+  }
+}
+
+/* 从右往左消失动画 */
+@keyframes slideOutLeft {
+  from {
+    width: 10%;
+    right: 0;
+  }
+
+  to {
+    width: 0%;
+    right: 100%;
   }
 }
 
@@ -442,15 +796,17 @@ const rightMenu = [
   font-size: 16px;
   min-height: 52px;
   height: 52px;
-  padding: 0 50px 0 48px;
+  padding: 0 25px 0 15px;
   border: none;
   box-shadow: none;
   background-color: transparent;
   transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   font-weight: 400;
   letter-spacing: 0.5px;
-  box-sizing: border-box; /* 关键！ */
-  outline: none; /* 避免默认焦点轮廓 */
+  box-sizing: border-box;
+  /* 关键！ */
+  outline: none;
+  /* 避免默认焦点轮廓 */
 }
 
 /* 可选：焦点状态 */
@@ -499,6 +855,7 @@ const rightMenu = [
     opacity: 0;
     transform: translateY(-50%) scale(0.8);
   }
+
   to {
     opacity: 1;
     transform: translateY(-50%) scale(1);
@@ -517,8 +874,7 @@ const rightMenu = [
 
 /* 搜索按钮 */
 .search-button-container {
-  margin-right: 1px;
-  padding: 15.5px;
+  padding: 16.5px 30px;
   height: 100%;
   background: linear-gradient(135deg, #ff5000, #ff8c00);
   color: #ffffff;
@@ -597,42 +953,42 @@ const rightMenu = [
   .search-type-selector {
     padding: 0 12px;
   }
-  
+
   .search-type-selector ul {
     gap: 12px;
   }
-  
+
   .search-type-item {
     padding: 12px 0;
     font-size: 13px;
   }
-  
+
   .search-input-wrapper {
     padding: 0 12px;
   }
-  
+
   .custom-search-input {
     font-size: 14px !important;
     height: 48px !important;
     padding: 0 40px 0 40px !important;
   }
-  
+
   .search-input-prefix {
     font-size: 16px;
   }
-  
+
   .search-button-container {
     padding: 0 24px;
   }
-  
+
   .search-button-text {
     font-size: 14px;
   }
-  
+
   .search-button-icon {
     font-size: 14px;
   }
-  
+
   .search-button-container:hover .search-button-icon {
     transform: scale(1.05) rotate(10deg);
   }
@@ -642,36 +998,36 @@ const rightMenu = [
   .search-type-selector {
     padding: 0 10px;
   }
-  
+
   .search-type-selector ul {
     gap: 8px;
   }
-  
+
   .search-type-item {
     font-size: 12px;
   }
-  
+
   .search-input-wrapper {
     padding: 0 10px;
   }
-  
+
   .custom-search-input {
     font-size: 13px !important;
     padding: 0 35px 0 35px !important;
   }
-  
+
   .search-input-prefix {
     font-size: 14px;
   }
-  
+
   .search-button-container {
     padding: 0 20px;
   }
-  
+
   .search-button-text {
     font-size: 13px;
   }
-  
+
   .search-button-icon {
     display: none;
   }
diff --git a/src/Views/main.vue b/src/Views/main.vue
index 5d7138a..7cc0796 100644
--- a/src/Views/main.vue
+++ b/src/Views/main.vue
@@ -83,7 +83,7 @@ const adList = [
 <style scoped>
 #main {
   width: 100%;
-  padding: 0 20px;
+  padding: 0 var(--spacing-md);
 }
 
 h1 {
@@ -95,8 +95,8 @@ h1 {
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 20px;
-  padding: 16px 0;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md) 0;
   width: 100%;
   flex-wrap: wrap;
 }
@@ -128,17 +128,17 @@ h1 {
 }
 /* 商品分类样式 */
 .main-content-col-top {
-  padding: 20px;
-  background-color: #ffffff;
-  border-radius: 12px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  padding: var(--spacing-md);
+  background-color: var(--card-bg);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-lg);
   position: relative;
   z-index: 100;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: all var(--transition-transform);
 }
 
 .main-content-col-top:hover {
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-xl);
 }
 
 
@@ -161,36 +161,35 @@ h1 {
 }
 
 .main-content-col-top li {
-  margin-bottom: 12px;
-  padding: 8px;
-  border-radius: 8px;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  margin-bottom: var(--spacing-sm);
+  padding: var(--spacing-sm);
+  border-radius: var(--border-radius-md);
+  transition: all var(--transition-transform);
   position: relative;
   overflow: visible;
 }
 
 /* 分类详情样式 */
 .main-content-col-top li:hover {
-  background-color: #fff5f5;
-  transform: translateX(8px);
-  box-shadow: 0 2px 8px rgba(255, 80, 0, 0.1);
+  background-color: var(--bg-primary-light);
+  transform: translateX(var(--spacing-sm));
+  box-shadow: 0 2px 8px rgba(var(--primary-light-rgb), 0.1);
 }
 
 /* 分类项样式 */
 .category-item {
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: var(--spacing-xs);
   position: relative;
   cursor: pointer;
-  padding: 12px;
-  border-radius: 8px;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  border-radius: var(--border-radius-md);
+  transition: all var(--transition-transform);
 }
 
-.category-item:hover {
+/* .category-item:hover {
   background-color: rgba(255, 80, 0, 0.05);
-}
+} */
 
 /* 分类详情样式 */
 .category-detail {
@@ -199,17 +198,17 @@ h1 {
   top: -60px;
   width: 600px;
   height: 400px;
-  background-color: #ffffff;
-  border-radius: 12px;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
-  padding: 20px;
-  margin-left: 10px;
+  background-color: var(--card-bg);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-xl);
+  padding: var(--spacing-md);
+  margin-left: var(--spacing-sm);
   z-index: 9999;
   opacity: 0;
   visibility: hidden;
   transform: translateX(-20px);
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  border: 2px solid #f0f0f0;
+  transition: all var(--transition-transform);
+  border: 2px solid var(--border-color);
   overflow-x: auto;
 }
 
@@ -363,6 +362,7 @@ h1 {
 /* 轮播广告样式 */
 #carousel-container {
   width: 100%;
+  height: 100%;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -371,7 +371,7 @@ h1 {
 .carousel-item {
   position: relative;
   width: 100%;
-  height: 300px;
+  height: 100%;
   overflow: hidden;
 }
 
@@ -419,20 +419,5 @@ h1 {
 
 /* 个人信息样式 */
 .main-content-col-bottom {
-  padding: 20px;
-  background-color: #ffffff;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.main-content-col-bottom h2 {
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-  margin: 0;
-  padding: 16px;
-  background-color: #fafafa;
-  border-radius: 6px;
-  text-align: center;
 }
 </style>
\ No newline at end of file