diff --git a/imgs/loading.png b/imgs/loading.png
new file mode 100644
index 0000000..a266547
Binary files /dev/null and b/imgs/loading.png differ
diff --git a/imgs/login.png b/imgs/login.png
new file mode 100644
index 0000000..c2dd8b1
Binary files /dev/null and b/imgs/login.png differ
diff --git a/imgs/top/1.jpg b/imgs/top/1.jpg
new file mode 100644
index 0000000..108e7b3
Binary files /dev/null and b/imgs/top/1.jpg differ
diff --git a/imgs/top/2.jpg b/imgs/top/2.jpg
new file mode 100644
index 0000000..62ebbf5
Binary files /dev/null and b/imgs/top/2.jpg differ
diff --git a/imgs/top/3.jpg b/imgs/top/3.jpg
new file mode 100644
index 0000000..6c736ec
Binary files /dev/null and b/imgs/top/3.jpg differ
diff --git a/src/views/AgentDashboard.vue b/src/views/AgentDashboard.vue
new file mode 100644
index 0000000..412fd1c
--- /dev/null
+++ b/src/views/AgentDashboard.vue
@@ -0,0 +1,598 @@
+<template>
+  <div class="agent-dashboard">
+    <!-- 头部 -->
+    <div class="dashboard-header">
+      <div class="header-content">
+        <div class="agent-info">
+          <h2>{{ agentInfo?.real_name }} - {{ agentInfo?.city_name }}{{ agentInfo?.district_name }}代理</h2>
+          <p>手机号：{{ agentInfo?.phone }}</p>
+        </div>
+        <el-button type="danger" @click="handleLogout">退出登录</el-button>
+      </div>
+    </div>
+
+    <!-- 统计卡片 -->
+    <div class="stats-grid">
+      <div class="stat-card">
+        <div class="stat-icon merchant">
+          <el-icon><User /></el-icon>
+        </div>
+        <div class="stat-content">
+          <div class="stat-number">{{ stats.total_merchants || 0 }}</div>
+          <div class="stat-label">招募商户</div>
+          <div class="stat-sub">已审核：{{ stats.approved_merchants || 0 }}</div>
+        </div>
+      </div>
+      
+      <div class="stat-card">
+        <div class="stat-icon commission">
+          <el-icon><Money /></el-icon>
+        </div>
+        <div class="stat-content">
+          <div class="stat-number">¥{{ (Number(stats.total_commission) || 0).toFixed(2) }}</div>
+          <div class="stat-label">总佣金</div>
+          <div class="stat-sub">已到账：¥{{ (Number(stats.paid_commission) || 0).toFixed(2) }}</div>
+        </div>
+      </div>
+      
+      <div class="stat-card">
+        <div class="stat-icon code">
+          <el-icon><Document /></el-icon>
+        </div>
+        <div class="stat-content">
+          <div class="stat-number">{{ stats.used_codes || 0 }}</div>
+          <div class="stat-label">已使用邀请码</div>
+          <div class="stat-sub">有效：{{ stats.active_codes || 0 }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 功能区域 -->
+    <div class="function-area">
+      <!-- 生成邀请码 -->
+      <div class="function-card">
+        <div class="card-header">
+          <h3>生成邀请二维码</h3>
+          <el-button type="primary" @click="generateInviteCode" :loading="generating">
+            生成新的邀请码
+          </el-button>
+        </div>
+        
+        <div v-if="currentInviteCode" class="invite-code-section">
+          <div class="qr-code-container">
+            <img :src="currentInviteCode.qr_code" alt="邀请二维码" class="qr-code" />
+            <div class="qr-actions">
+              <el-button type="success" size="small" @click="saveQRCode">
+                保存到手机
+              </el-button>
+            </div>
+          </div>
+          <div class="code-info">
+            <p><strong>邀请码：</strong>{{ currentInviteCode.code }}</p>
+            <p><strong>过期时间：</strong>{{ formatDate(currentInviteCode.expires_at) }}</p>
+            <p class="code-tip">商户扫描此二维码可自动填写激活码进行注册</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 标签页 -->
+    <el-tabs v-model="activeTab" class="main-tabs">
+      <!-- 商户管理 -->
+      <el-tab-pane label="商户管理" name="merchants">
+        <div class="merchants-section">
+          <div class="section-header">
+            <h3>我的商户</h3>
+            <el-button @click="loadMerchants" :loading="loadingMerchants">
+              刷新
+            </el-button>
+          </div>
+          
+          <el-table 
+            :data="merchants" 
+            v-loading="loadingMerchants"
+            stripe
+            style="width: 100%"
+          >
+            <el-table-column prop="username" label="用户名" width="120" />
+            <el-table-column prop="real_name" label="真实姓名" width="120" />
+            <el-table-column prop="phone" label="手机号" width="130" />
+            <el-table-column prop="audit_status" label="审核状态" width="100">
+              <template #default="{ row }">
+                <el-tag :type="getAuditStatusType(row.audit_status)">
+                  {{ getAuditStatusText(row.audit_status) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="completed_matches" label="完成匹配" width="100" />
+            <el-table-column prop="joined_at" label="加入时间" width="160">
+              <template #default="{ row }">
+                {{ formatDateTime(row.joined_at) }}
+              </template>
+            </el-table-column>
+          </el-table>
+          
+          <div class="pagination-wrapper">
+            <el-pagination
+              v-model:current-page="merchantsPage"
+              v-model:page-size="merchantsPageSize"
+              :total="merchantsTotal"
+              :page-sizes="[10, 20, 50]"
+              layout="total, sizes, prev, pager, next, jumper"
+              @current-change="loadMerchants"
+              @size-change="loadMerchants"
+            />
+          </div>
+        </div>
+      </el-tab-pane>
+      
+      <!-- 佣金记录 -->
+      <el-tab-pane label="佣金记录" name="commissions">
+        <div class="commissions-section">
+          <div class="section-header">
+            <h3>佣金记录</h3>
+            <el-button @click="loadCommissions" :loading="loadingCommissions">
+              刷新
+            </el-button>
+          </div>
+          
+          <el-table 
+            :data="commissions" 
+            v-loading="loadingCommissions"
+            stripe
+            style="width: 100%"
+          >
+            <el-table-column prop="username" label="商户" width="120" />
+            <el-table-column prop="real_name" label="真实姓名" width="120" />
+            <el-table-column prop="commission_amount" label="佣金金额" width="120">
+              <template #default="{ row }">
+                ¥{{ (Number(row.commission_amount) || 0).toFixed(2) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="commission_type" label="佣金类型" width="120">
+              <template #default="{ row }">
+                <el-tag v-if="row.commission_type === 'third_match'" type="success">
+                  第三次匹配
+                </el-tag>
+                <el-tag v-else>{{ row.commission_type }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="status" label="状态" width="100">
+              <template #default="{ row }">
+                <el-tag :type="getCommissionStatusType(row.status)">
+                  {{ getCommissionStatusText(row.status) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="created_at" label="生成时间" width="160">
+              <template #default="{ row }">
+                {{ formatDateTime(row.created_at) }}
+              </template>
+            </el-table-column>
+          </el-table>
+          
+          <div class="pagination-wrapper">
+            <el-pagination
+              v-model:current-page="commissionsPage"
+              v-model:page-size="commissionsPageSize"
+              :total="commissionsTotal"
+              :page-sizes="[10, 20, 50]"
+              layout="total, sizes, prev, pager, next, jumper"
+              @current-change="loadCommissions"
+              @size-change="loadCommissions"
+            />
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { User, Money, Document } from '@element-plus/icons-vue'
+import api from '@/utils/api'
+
+const router = useRouter()
+
+// 响应式数据
+const agentInfo = ref(null)
+const stats = ref({})
+const activeTab = ref('merchants')
+const generating = ref(false)
+const currentInviteCode = ref(null)
+
+// 商户数据
+const merchants = ref([])
+const loadingMerchants = ref(false)
+const merchantsPage = ref(1)
+const merchantsPageSize = ref(10)
+const merchantsTotal = ref(0)
+
+// 佣金数据
+const commissions = ref([])
+const loadingCommissions = ref(false)
+const commissionsPage = ref(1)
+const commissionsPageSize = ref(10)
+const commissionsTotal = ref(0)
+
+// 方法
+const loadAgentInfo = () => {
+  const stored = localStorage.getItem('agentInfo')
+  if (stored) {
+    agentInfo.value = JSON.parse(stored)
+  } else {
+    router.push('/agent/login')
+  }
+}
+
+const loadStats = async () => {
+  if (!agentInfo.value) return
+  
+  try {
+    const { data } = await api.get(`/agents/stats/${agentInfo.value.id}`)
+    stats.value = data.data
+  } catch (error) {
+    ElMessage.error('加载统计信息失败')
+  }
+}
+
+const loadMerchants = async () => {
+  if (!agentInfo.value) return
+  
+  loadingMerchants.value = true
+  try {
+    const { data } = await api.get(`/agents/merchants/${agentInfo.value.id}`, {
+      params: {
+        page: merchantsPage.value,
+        limit: merchantsPageSize.value
+      }
+    })
+    
+    merchants.value = data.data.merchants
+    merchantsTotal.value = data.data.total
+  } catch (error) {
+    ElMessage.error('加载商户列表失败')
+  } finally {
+    loadingMerchants.value = false
+  }
+}
+
+const loadCommissions = async () => {
+  if (!agentInfo.value) return
+  
+  loadingCommissions.value = true
+  try {
+    const { data } = await api.get(`/agents/commissions/${agentInfo.value.id}`, {
+      params: {
+        page: commissionsPage.value,
+        limit: commissionsPageSize.value
+      }
+    })
+    
+    commissions.value = data.data.commissions
+    commissionsTotal.value = data.data.summary.total_records
+  } catch (error) {
+    ElMessage.error('加载佣金记录失败')
+  } finally {
+    loadingCommissions.value = false
+  }
+}
+
+const generateInviteCode = async () => {
+  if (!agentInfo.value) return
+  
+  generating.value = true
+  try {
+    const { data } = await api.post('/agents/generate-invite-code', {
+      agent_id: agentInfo.value.id
+    })
+    
+    currentInviteCode.value = data.data
+    ElMessage.success('邀请码生成成功')
+    
+    // 刷新统计信息
+    loadStats()
+  } catch (error) {
+    if (error.response?.data?.message) {
+      ElMessage.error(error.response.data.message)
+    } else {
+      ElMessage.error('生成邀请码失败')
+    }
+  } finally {
+    generating.value = false
+  }
+}
+
+/**
+ * 保存二维码图片到设备
+ */
+const saveQRCode = () => {
+  if (!currentInviteCode.value?.qr_code) {
+    ElMessage.error('没有可保存的二维码')
+    return
+  }
+  
+  try {
+    // 创建一个临时的a标签用于下载
+    const link = document.createElement('a')
+    link.href = currentInviteCode.value.qr_code
+    link.download = `邀请码_${currentInviteCode.value.code}_${new Date().toISOString().slice(0, 10)}.png`
+    
+    // 触发下载
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    
+    ElMessage.success('二维码已保存到设备')
+  } catch (error) {
+    console.error('保存二维码失败:', error)
+    ElMessage.error('保存二维码失败')
+  }
+}
+
+const handleLogout = async () => {
+  try {
+    await ElMessageBox.confirm('确定要退出登录吗？', '确认退出', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+    
+    localStorage.removeItem('agentInfo')
+    router.push('/agent/login')
+  } catch (error) {
+    // 用户取消
+  }
+}
+
+const getAuditStatusType = (status) => {
+  const types = {
+    pending: 'warning',
+    approved: 'success',
+    rejected: 'danger'
+  }
+  return types[status] || 'info'
+}
+
+const getAuditStatusText = (status) => {
+  const texts = {
+    pending: '待审核',
+    approved: '已审核',
+    rejected: '已拒绝'
+  }
+  return texts[status] || status
+}
+
+const getCommissionStatusType = (status) => {
+  const types = {
+    pending: 'warning',
+    paid: 'success',
+    cancelled: 'danger'
+  }
+  return types[status] || 'info'
+}
+
+const getCommissionStatusText = (status) => {
+  const texts = {
+    pending: '待支付',
+    paid: '已支付',
+    cancelled: '已取消'
+  }
+  return texts[status] || status
+}
+
+const formatDate = (date) => {
+  return new Date(date).toLocaleDateString('zh-CN')
+}
+
+const formatDateTime = (date) => {
+  return new Date(date).toLocaleString('zh-CN')
+}
+
+// 生命周期
+onMounted(() => {
+  loadAgentInfo()
+  if (agentInfo.value) {
+    loadStats()
+    loadMerchants()
+    loadCommissions()
+  }
+})
+</script>
+
+<style scoped>
+.agent-dashboard {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+}
+
+.dashboard-header {
+  background: white;
+  border-bottom: 1px solid #e4e7ed;
+  padding: 0 24px;
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 64px;
+}
+
+.agent-info h2 {
+  margin: 0 0 4px 0;
+  font-size: 18px;
+  color: #303133;
+}
+
+.agent-info p {
+  margin: 0;
+  font-size: 14px;
+  color: #909399;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 24px;
+  padding: 24px;
+}
+
+.stat-card {
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.stat-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  color: white;
+}
+
+.stat-icon.merchant {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.stat-icon.commission {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.stat-icon.code {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+.stat-content {
+  flex: 1;
+}
+
+.stat-number {
+  font-size: 24px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 4px;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #606266;
+  margin-bottom: 4px;
+}
+
+.stat-sub {
+  font-size: 12px;
+  color: #909399;
+}
+
+.function-area {
+  padding: 0 24px 24px;
+}
+
+.function-card {
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.card-header h3 {
+  margin: 0;
+  font-size: 16px;
+  color: #303133;
+}
+
+.invite-code-section {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+
+.qr-code-container {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.qr-code {
+  width: 150px;
+  height: 150px;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+}
+
+.qr-actions {
+  display: flex;
+  justify-content: center;
+}
+
+.code-info {
+  flex: 1;
+}
+
+.code-info p {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  color: #606266;
+}
+
+.code-tip {
+  color: #909399 !important;
+  font-size: 12px !important;
+}
+
+.main-tabs {
+  padding: 0 24px;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.section-header h3 {
+  margin: 0;
+  font-size: 16px;
+  color: #303133;
+}
+
+.pagination-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+}
+
+:deep(.el-tabs__content) {
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+:deep(.el-table) {
+  border-radius: 8px;
+  overflow: hidden;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/AgentLogin.vue b/src/views/AgentLogin.vue
new file mode 100644
index 0000000..17a715b
--- /dev/null
+++ b/src/views/AgentLogin.vue
@@ -0,0 +1,341 @@
+<template>
+  <div class="agent-login-container">
+    <div class="login-card">
+      <div class="login-header">
+        <h2>区域代理登录</h2>
+        <p>浙江省区域代理管理系统</p>
+      </div>
+      
+      <el-form 
+        ref="loginFormRef" 
+        :model="loginForm" 
+        :rules="loginRules" 
+        class="login-form"
+        @submit.prevent="handleLogin"
+      >
+        <el-form-item prop="phone">
+          <el-input
+            v-model="loginForm.phone"
+            placeholder="请输入手机号"
+            prefix-icon="Phone"
+            size="large"
+          />
+        </el-form-item>
+        
+        <el-form-item prop="password">
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            placeholder="请输入密码"
+            prefix-icon="Lock"
+            size="large"
+            show-password
+          />
+        </el-form-item>
+        
+        <el-form-item>
+          <el-button 
+            type="primary" 
+            size="large" 
+            class="login-btn"
+            :loading="loading"
+            @click="handleLogin"
+          >
+            登录
+          </el-button>
+        </el-form-item>
+      </el-form>
+      
+      <div class="login-footer">
+        <el-link type="primary" @click="showApplyDialog = true">
+          申请成为区域代理
+        </el-link>
+      </div>
+    </div>
+    
+    <!-- 申请代理对话框 -->
+    <el-dialog
+      v-model="showApplyDialog"
+      title="申请成为区域代理"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <el-alert
+        title="重要提示"
+        type="info"
+        :closable="false"
+        style="margin-bottom: 20px"
+      >
+        <template #default>
+          <p>• 每个区域只能有一个代理账号</p>
+          <p>• 每个用户只能申请一个区域的代理</p>
+          <p>• 申请提交后需要等待管理员审核</p>
+        </template>
+      </el-alert>
+      
+      <el-form
+        ref="applyFormRef"
+        :model="applyForm"
+        :rules="applyRules"
+        label-width="100px"
+      >
+        <el-form-item label="选择区域" prop="region_id">
+          <el-select
+            v-model="applyForm.region_id"
+            placeholder="请选择代理区域"
+            style="width: 100%"
+            filterable
+          >
+            <el-option-group
+              v-for="city in groupedRegions"
+              :key="city.name"
+              :label="city.name"
+            >
+              <el-option
+                v-for="region in city.districts"
+                :key="region.id"
+                :label="region.district_name"
+                :value="region.id"
+              />
+            </el-option-group>
+          </el-select>
+        </el-form-item>
+        
+        <el-form-item label="真实姓名" prop="real_name">
+          <el-input v-model="applyForm.real_name" placeholder="请输入真实姓名" />
+        </el-form-item>
+        
+        <el-form-item label="手机号" prop="phone">
+          <el-input v-model="applyForm.phone" placeholder="请输入手机号" />
+        </el-form-item>
+        
+        <el-form-item label="身份证号" prop="id_card">
+          <el-input v-model="applyForm.id_card" placeholder="请输入身份证号" />
+        </el-form-item>
+        
+        <el-form-item label="联系地址" prop="contact_address">
+          <el-input
+            v-model="applyForm.contact_address"
+            type="textarea"
+            placeholder="请输入联系地址"
+            :rows="3"
+          />
+        </el-form-item>
+      </el-form>
+      
+      <template #footer>
+        <el-button @click="showApplyDialog = false">取消</el-button>
+        <el-button type="primary" :loading="applyLoading" @click="handleApply">
+          提交申请
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import api from '@/utils/api'
+
+const router = useRouter()
+
+// 响应式数据
+const loading = ref(false)
+const applyLoading = ref(false)
+const showApplyDialog = ref(false)
+const regions = ref([])
+const loginFormRef = ref()
+const applyFormRef = ref()
+
+// 登录表单
+const loginForm = reactive({
+  phone: '',
+  password: ''
+})
+
+// 申请表单
+const applyForm = reactive({
+  region_id: '',
+  real_name: '',
+  phone: '',
+  id_card: '',
+  contact_address: ''
+})
+
+// 表单验证规则
+const loginRules = {
+  phone: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' }
+  ]
+}
+
+const applyRules = {
+  region_id: [
+    { required: true, message: '请选择代理区域', trigger: 'change' }
+  ],
+  real_name: [
+    { required: true, message: '请输入真实姓名', trigger: 'blur' }
+  ],
+  phone: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
+  ],
+  id_card: [
+    { required: true, message: '请输入身份证号', trigger: 'blur' },
+    { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '身份证号格式不正确', trigger: 'blur' }
+  ]
+}
+
+// 计算属性
+const groupedRegions = computed(() => {
+  const grouped = {}
+  regions.value.forEach(region => {
+    if (!grouped[region.city_name]) {
+      grouped[region.city_name] = {
+        name: region.city_name,
+        districts: []
+      }
+    }
+    grouped[region.city_name].districts.push(region)
+  })
+  return Object.values(grouped)
+})
+
+// 方法
+const loadRegions = async () => {
+  try {
+    const { data } = await api.get('/agents/regions')
+    regions.value = data.data
+  } catch (error) {
+    ElMessage.error('加载区域列表失败')
+  }
+}
+
+const handleLogin = async () => {
+  if (!loginFormRef.value) return
+  
+  try {
+    await loginFormRef.value.validate()
+    loading.value = true
+    
+    const { data } = await api.post('/agents/login', loginForm)
+    
+    if (data.success) {
+      // 保存代理信息到localStorage
+      localStorage.setItem('agentInfo', JSON.stringify(data.data))
+      ElMessage.success('登录成功')
+      router.push('/agent/dashboard')
+    }
+  } catch (error) {
+    if (error.response?.data?.message) {
+      ElMessage.error(error.response.data.message)
+    } else {
+      ElMessage.error('登录失败')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleApply = async () => {
+  if (!applyFormRef.value) return
+  
+  try {
+    await applyFormRef.value.validate()
+    applyLoading.value = true
+    
+    const { data } = await api.post('/agents/apply', applyForm)
+    
+    if (data.success) {
+      ElMessage.success(data.message)
+      showApplyDialog.value = false
+      // 重置表单
+      Object.keys(applyForm).forEach(key => {
+        applyForm[key] = ''
+      })
+    }
+  } catch (error) {
+    if (error.response?.data?.message) {
+      ElMessage.error(error.response.data.message)
+    } else {
+      ElMessage.error('申请失败')
+    }
+  } finally {
+    applyLoading.value = false
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  loadRegions()
+})
+</script>
+
+<style scoped>
+.agent-login-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.login-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  padding: 40px;
+  width: 100%;
+  max-width: 400px;
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.login-header h2 {
+  color: #333;
+  margin-bottom: 8px;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.login-header p {
+  color: #666;
+  font-size: 14px;
+  margin: 0;
+}
+
+.login-form {
+  margin-bottom: 20px;
+}
+
+.login-btn {
+  width: 100%;
+  height: 44px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.login-footer {
+  text-align: center;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
+}
+
+:deep(.el-input__wrapper) {
+  border-radius: 8px;
+}
+
+:deep(.el-button) {
+  border-radius: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/EditDetailsPage.vue b/src/views/EditDetailsPage.vue
new file mode 100644
index 0000000..aecd426
--- /dev/null
+++ b/src/views/EditDetailsPage.vue
@@ -0,0 +1,637 @@
+<template>
+  <div class="profile-edit-page">
+    <!-- 导航栏 -->
+    <nav class="navbar">
+      <div class="nav-left">
+        <router-link to="/myprofile" class="back-btn">
+          <el-icon><ArrowLeft /></el-icon>
+          返回
+        </router-link>
+      </div>
+      <div class="nav-center">
+        <h1 class="nav-title">编辑个人资料</h1>
+      </div>
+      <div class="nav-right"></div>
+    </nav>
+
+    <!-- 个人信息 -->
+    <div class="profile-content">
+      <!-- 个人资料表单 -->
+      <div class="profile-form">
+        <el-form 
+          ref="profileFormRef" 
+          :model="form" 
+          :rules="rules" 
+          label-width="80px"
+        >
+          <el-form-item label="用户名" prop="username">
+            <el-input v-model="form.username" placeholder="请输入用户名" />
+          </el-form-item>
+          
+          <el-form-item label="昵称" prop="nickname">
+            <el-input v-model="form.nickname" placeholder="请输入昵称" />
+          </el-form-item>
+          
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="form.email" placeholder="请输入邮箱" />
+          </el-form-item>
+          
+          <el-form-item label="真实姓名" prop="realName">
+            <el-input v-model="form.realName" placeholder="请输入真实姓名" />
+          </el-form-item>
+          
+          <el-form-item label="身份证号" prop="idCard">
+            <el-input v-model="form.idCard" placeholder="请输入身份证号" maxlength="18" />
+          </el-form-item>
+          
+          <el-form-item label="手机号" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
+          </el-form-item>
+          
+          <el-form-item label="微信收款码" prop="wechatQr">
+            <div class="qr-upload-container">
+              <el-upload
+                class="qr-uploader"
+                :action="uploadUrl"
+                :headers="uploadHeaders"
+                :before-upload="beforeQrUpload"
+                :on-success="(response) => handleQrUploadSuccess(response, 'wechat')"
+                :on-error="handleQrUploadError"
+                :show-file-list="false"
+                accept="image/*"
+              >
+                <img v-if="form.wechatQr" :src="formatImageUrl(form.wechatQr)" class="qr-preview" />
+                <div v-else class="qr-upload-placeholder">
+                  <el-icon class="qr-upload-icon"><Plus /></el-icon>
+                  <div class="qr-upload-text">上传微信收款码</div>
+                </div>
+              </el-upload>
+              <el-button v-if="form.wechatQr" type="danger" size="small" @click="removeQrCode('wechat')" class="remove-btn">
+                删除
+              </el-button>
+            </div>
+          </el-form-item>
+          
+          <el-form-item label="支付宝收款码" prop="alipayQr">
+            <div class="qr-upload-container">
+              <el-upload
+                class="qr-uploader"
+                :action="uploadUrl"
+                :headers="uploadHeaders"
+                :before-upload="beforeQrUpload"
+                :on-success="(response) => handleQrUploadSuccess(response, 'alipay')"
+                :on-error="handleQrUploadError"
+                :show-file-list="false"
+                accept="image/*"
+              >
+                <img v-if="form.alipayQr" :src="formatImageUrl(form.alipayQr)" class="qr-preview" />
+                <div v-else class="qr-upload-placeholder">
+                  <el-icon class="qr-upload-icon"><Plus /></el-icon>
+                  <div class="qr-upload-text">上传支付宝收款码</div>
+                </div>
+              </el-upload>
+              <el-button v-if="form.alipayQr" type="danger" size="small" @click="removeQrCode('alipay')" class="remove-btn">
+                删除
+              </el-button>
+            </div>
+          </el-form-item>
+          
+          <el-form-item label="银行卡号" prop="bankCard">
+            <el-input v-model="form.bankCard" placeholder="请输入银行卡号" />
+          </el-form-item>
+          
+          <el-form-item label="云闪付收款码" prop="unionpayQr">
+            <div class="qr-upload-container">
+              <el-upload
+                class="qr-uploader"
+                :action="uploadUrl"
+                :headers="uploadHeaders"
+                :before-upload="beforeQrUpload"
+                :on-success="(response) => handleQrUploadSuccess(response, 'unionpay')"
+                :on-error="handleQrUploadError"
+                :show-file-list="false"
+                accept="image/*"
+              >
+                <img v-if="form.unionpayQr" :src="formatImageUrl(form.unionpayQr)" class="qr-preview" />
+                <div v-else class="qr-upload-placeholder">
+                  <el-icon class="qr-upload-icon"><Plus /></el-icon>
+                  <div class="qr-upload-text">上传云闪付收款码</div>
+                </div>
+              </el-upload>
+              <el-button v-if="form.unionpayQr" type="danger" size="small" @click="removeQrCode('unionpay')" class="remove-btn">
+                删除
+              </el-button>
+            </div>
+          </el-form-item>
+          
+          <el-form-item label="营业执照" prop="businessLicense">
+            <div class="qr-upload-container">
+              <el-upload
+                class="qr-uploader"
+                :action="uploadUrl"
+                :headers="uploadHeaders"
+                :before-upload="beforeDocumentUpload"
+                :on-success="(response) => handleDocumentUploadSuccess(response, 'businessLicense')"
+                :on-error="handleQrUploadError"
+                :show-file-list="false"
+                accept="image/*"
+              >
+                <img v-if="form.businessLicense" :src="formatImageUrl(form.businessLicense)" class="qr-preview" />
+                <div v-else class="qr-upload-placeholder">
+                  <el-icon class="qr-upload-icon"><Plus /></el-icon>
+                  <div class="qr-upload-text">上传营业执照</div>
+                </div>
+              </el-upload>
+              <el-button v-if="form.businessLicense" type="danger" size="small" @click="removeDocument('businessLicense')" class="remove-btn">
+                删除
+              </el-button>
+            </div>
+          </el-form-item>
+          
+          <el-form-item label="身份证正面" prop="idCardFront">
+            <div class="qr-upload-container">
+              <el-upload
+                class="qr-uploader"
+                :action="uploadUrl"
+                :headers="uploadHeaders"
+                :before-upload="beforeDocumentUpload"
+                :on-success="(response) => handleDocumentUploadSuccess(response, 'idCardFront')"
+                :on-error="handleQrUploadError"
+                :show-file-list="false"
+                accept="image/*"
+              >
+                <img v-if="form.idCardFront" :src="formatImageUrl(form.idCardFront)" class="qr-preview" />
+                <div v-else class="qr-upload-placeholder">
+                  <el-icon class="qr-upload-icon"><Plus /></el-icon>
+                  <div class="qr-upload-text">上传身份证正面</div>
+                </div>
+              </el-upload>
+              <el-button v-if="form.idCardFront" type="danger" size="small" @click="removeDocument('idCardFront')" class="remove-btn">
+                删除
+              </el-button>
+            </div>
+          </el-form-item>
+          
+          <el-form-item label="身份证反面" prop="idCardBack">
+            <div class="qr-upload-container">
+              <el-upload
+                class="qr-uploader"
+                :action="uploadUrl"
+                :headers="uploadHeaders"
+                :before-upload="beforeDocumentUpload"
+                :on-success="(response) => handleDocumentUploadSuccess(response, 'idCardBack')"
+                :on-error="handleQrUploadError"
+                :show-file-list="false"
+                accept="image/*"
+              >
+                <img v-if="form.idCardBack" :src="formatImageUrl(form.idCardBack)" class="qr-preview" />
+                <div v-else class="qr-upload-placeholder">
+                  <el-icon class="qr-upload-icon"><Plus /></el-icon>
+                  <div class="qr-upload-text">上传身份证反面</div>
+                </div>
+              </el-upload>
+              <el-button v-if="form.idCardBack" type="danger" size="small" @click="removeDocument('idCardBack')" class="remove-btn">
+                删除
+              </el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+        
+        <div class="form-actions">
+            <el-button @click="resetForm">重置</el-button>
+            <el-button type="primary" @click="saveProfile" :loading="saving">
+            保存资料
+            </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { ElMessage } from 'element-plus'
+import { ArrowLeft, Plus } from '@element-plus/icons-vue'
+import api from '@/utils/api'
+import { uploadURL, getImageUrl, getUploadConfig } from '@/config'
+
+const router = useRouter()
+const route = useRoute()
+const userStore = useUserStore()
+
+// 响应式数据
+const form = reactive({
+  username: '',
+  nickname: '',
+  email: '',
+  phone: '',
+  realName: '',
+  idCard: '',
+  wechatQr: '',
+  alipayQr: '',
+  bankCard: '',
+  unionpayQr: '',
+  businessLicense: '',
+  idCardFront: '',
+  idCardBack: ''
+})
+
+const saving = ref(false)
+const profileFormRef = ref()
+
+// 上传配置
+const uploadUrl = ref(uploadURL)
+const uploadHeaders = computed(() => getUploadConfig().headers)
+
+// 表单验证规则
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
+  ],
+  email: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
+  ],
+  realName: [
+    { required: true, message: '请输入真实姓名', trigger: 'blur' },
+    { min: 2, max: 10, message: '真实姓名长度在 2 到 10 个字符', trigger: 'blur' }
+  ],
+  idCard: [
+    { required: true, message: '请输入身份证号', trigger: 'blur' },
+    { pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号', trigger: 'blur' }
+  ],
+  phone: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
+  ]
+}
+
+// 方法
+/**
+ * 获取用户信息
+ */
+const getUserInfo = async () => {
+  try {
+    const response = await api.get('/users/profile')
+    console.log(response.data, 'response.data.data')
+    
+    // 同步到表单
+    Object.keys(form).forEach(key => {
+      form[key] = response.data.user[key] || ''
+    })
+  } catch (error) {
+    console.error('获取用户信息失败:', error)
+    ElMessage.error('获取用户信息失败')
+  }
+}
+
+/**
+ * 保存个人资料
+ */
+const saveProfile = async () => {
+  try {
+    await profileFormRef.value.validate()
+    
+    saving.value = true
+    const response = await api.put('/users/profile', form)
+    
+    // 更新本地数据
+    if (response.data.success) {
+      ElMessage.success(response.data.message || '保存成功')
+      router.back() // 保存成功后返回上一页
+    } else {
+      ElMessage.error(response.data.message || '保存失败')
+    }
+  } catch (error) {
+    console.error('保存个人资料失败:', error)
+    if (error.response) {
+      ElMessage.error(error.response.data.message || '保存失败')
+    } else {
+      ElMessage.error('保存失败')
+    }
+  } finally {
+    saving.value = false
+  }
+}
+
+const resetForm = () => {
+  getUserInfo() // 重置为原始数据
+}
+
+/**
+ * 二维码上传前的验证
+ * @param {File} file - 上传的文件
+ * @returns {boolean} 是否通过验证
+ */
+const beforeQrUpload = (file) => {
+  const isImage = file.type.startsWith('image/')
+  const isLt5M = file.size / 1024 / 1024 < 5
+
+  if (!isImage) {
+    ElMessage.error('只能上传图片文件!')
+    return false
+  }
+  if (!isLt5M) {
+    ElMessage.error('图片大小不能超过 5MB!')
+    return false
+  }
+  return true
+}
+
+/**
+ * 处理二维码上传成功回调
+ * @param {Object} response - 上传接口返回的响应数据
+ * @param {string} type - 二维码类型 (wechat/alipay/unionpay)
+ */
+const handleQrUploadSuccess = (response, type) => {
+  if (response.success) {
+    // 更新对应的二维码字段
+    const fieldMap = {
+      wechat: 'wechatQr',
+      alipay: 'alipayQr', 
+      unionpay: 'unionpayQr'
+    }
+    
+    form[fieldMap[type]] = response.url
+    ElMessage.success('收款码上传成功')
+  } else {
+    ElMessage.error(response.message || '上传失败')
+  }
+}
+
+/**
+ * 处理二维码上传错误
+ * @param {Object} error - 错误信息
+ */
+const handleQrUploadError = (error) => {
+  console.error('上传错误:', error)
+  ElMessage.error('上传失败，请重试')
+}
+
+/**
+ * 删除二维码
+ * @param {string} type - 二维码类型 (wechat/alipay/unionpay)
+ */
+const removeQrCode = (type) => {
+  const fieldMap = {
+    wechat: 'wechatQr',
+    alipay: 'alipayQr',
+    unionpay: 'unionpayQr'
+  }
+  
+  form[fieldMap[type]] = ''
+  ElMessage.success('收款码已删除')
+}
+
+/**
+ * 证件上传前的验证
+ * @param {File} file - 上传的文件
+ * @returns {boolean} 是否通过验证
+ */
+const beforeDocumentUpload = (file) => {
+  const isImage = file.type.startsWith('image/')
+  const isLt10M = file.size / 1024 / 1024 < 10
+
+  if (!isImage) {
+    ElMessage.error('只能上传图片文件!')
+    return false
+  }
+  if (!isLt10M) {
+    ElMessage.error('图片大小不能超过 10MB!')
+    return false
+  }
+  return true
+}
+
+/**
+ * 处理证件上传成功回调
+ * @param {Object} response - 上传接口返回的响应数据
+ * @param {string} type - 证件类型 (businessLicense/idCardFront/idCardBack)
+ */
+const handleDocumentUploadSuccess = (response, type) => {
+  if (response.success) {
+    form[type] = response.url
+    const typeNames = {
+      businessLicense: '营业执照',
+      idCardFront: '身份证正面',
+      idCardBack: '身份证反面'
+    }
+    ElMessage.success(`${typeNames[type]}上传成功`)
+  } else {
+    ElMessage.error(response.message || '上传失败')
+  }
+}
+
+/**
+ * 删除证件
+ * @param {string} type - 证件类型 (businessLicense/idCardFront/idCardBack)
+ */
+const removeDocument = (type) => {
+  form[type] = ''
+  const typeNames = {
+    businessLicense: '营业执照',
+    idCardFront: '身份证正面',
+    idCardBack: '身份证反面'
+  }
+  ElMessage.success(`${typeNames[type]}已删除`)
+}
+
+/**
+ * 获取图片URL - 使用配置文件处理
+ * @param {string} url - 相对路径或完整URL
+ * @returns {string} 处理后的图片URL
+ */
+const formatImageUrl = (url) => {
+  return getImageUrl(url)
+}
+
+// 生命周期
+onMounted(() => {
+  getUserInfo()
+})
+</script>
+
+<style lang="scss" scoped>
+.profile-edit-page {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  height: 56px;
+  background: white;
+  border-bottom: 1px solid #eee;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.nav-left,
+.nav-right {
+  flex: 1;
+}
+
+.nav-right {
+  text-align: right;
+}
+
+.back-btn {
+  color: #409eff;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.nav-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+}
+
+.profile-content {
+  padding: 20px 16px;
+}
+
+.profile-form {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.form-actions {
+  text-align: center;
+  margin-top: 30px;
+  display: flex;
+  flex-direction: column; // 修改为垂直排列
+  gap: 15px;
+  align-items: center; // 水平居中对齐
+}
+
+.form-actions .el-button {
+  width: 100%; // 按钮宽度占满容器
+  max-width: 220px; // 最大宽度限制
+  border-radius: 8px;
+  font-weight: 500;
+}
+
+/* 二维码上传样式 */
+.qr-upload-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.qr-uploader {
+  width: 120px;
+}
+
+.qr-uploader :deep(.el-upload) {
+  border: 2px dashed #d9d9d9;
+  border-radius: 8px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: 0.3s;
+  width: 120px;
+  height: 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #fafafa;
+}
+
+.qr-uploader :deep(.el-upload:hover) {
+  border-color: #409eff;
+  background-color: #f0f9ff;
+}
+
+.qr-upload-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+.qr-upload-icon {
+  font-size: 24px;
+  color: #8c939d;
+  margin-bottom: 8px;
+}
+
+.qr-upload-text {
+  font-size: 12px;
+  color: #8c939d;
+  line-height: 1.2;
+}
+
+.qr-preview {
+  width: 120px;
+  height: 120px;
+  object-fit: cover;
+  border-radius: 6px;
+}
+
+.remove-btn {
+  align-self: flex-start;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .profile-content {
+    padding: 10px;
+  }
+  
+  .profile-form {
+    padding: 20px;
+    border-radius: 8px;
+  }
+  
+  .qr-uploader {
+    width: 100px;
+  }
+  
+  .qr-uploader :deep(.el-upload) {
+    width: 100px;
+    height: 100px;
+  }
+  
+  .qr-preview {
+    width: 100px;
+    height: 100px;
+  }
+  
+  .form-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .form-actions .el-button {
+    width: 100%;
+    max-width: 200px;
+  }
+  
+  .el-form {
+    :deep(.el-form-item__label) {
+      width: 80px !important;
+      font-size: 14px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/EditPasswordPage.vue b/src/views/EditPasswordPage.vue
new file mode 100644
index 0000000..c8f5055
--- /dev/null
+++ b/src/views/EditPasswordPage.vue
@@ -0,0 +1,249 @@
+<template>
+  <div class="password-change-page">
+    <!-- 导航栏 -->
+    <nav class="navbar">
+      <div class="nav-left">
+        <router-link to="/myprofile" class="back-btn">
+          <el-icon><ArrowLeft /></el-icon>
+          返回
+        </router-link>
+      </div>
+      <div class="nav-center">
+        <h1 class="nav-title">修改密码</h1>
+      </div>
+      <div class="nav-right"></div>
+    </nav>
+
+    <!-- 密码修改表单 -->
+    <div class="password-form-container">
+      <div class="password-form">
+        <el-form 
+          ref="passwordFormRef" 
+          :model="passwordForm" 
+          :rules="passwordRules" 
+          label-width="100px"
+        >
+          <el-form-item label="当前密码" prop="currentPassword">
+            <el-input 
+              v-model="passwordForm.currentPassword" 
+              type="password" 
+              placeholder="请输入当前密码"
+              show-password
+            />
+          </el-form-item>
+          
+          <el-form-item label="新密码" prop="newPassword">
+            <el-input 
+              v-model="passwordForm.newPassword" 
+              type="password" 
+              placeholder="请输入新密码"
+              show-password
+            />
+          </el-form-item>
+          
+          <el-form-item label="确认密码" prop="confirmPassword">
+            <el-input 
+              v-model="passwordForm.confirmPassword" 
+              type="password" 
+              placeholder="请确认新密码"
+              show-password
+            />
+          </el-form-item>
+        </el-form>
+        
+        <div class="form-actions">
+          <el-button @click="resetPasswordForm">重置</el-button>
+          <el-button type="primary" @click="changePassword" :loading="changingPassword">
+            修改密码
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { ElMessage } from 'element-plus'
+import { ArrowLeft } from '@element-plus/icons-vue'
+import api from '@/utils/api'
+
+const router = useRouter()
+const userStore = useUserStore()
+
+// 响应式数据
+const passwordForm = reactive({
+  currentPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+})
+
+const changingPassword = ref(false)
+const passwordFormRef = ref()
+
+// 表单验证规则
+const passwordRules = {
+  currentPassword: [
+    { required: true, message: '请输入当前密码', trigger: 'blur' }
+  ],
+  newPassword: [
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, message: '请确认新密码', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        if (value !== passwordForm.newPassword) {
+          callback(new Error('两次输入密码不一致'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ]
+}
+
+/**
+ * 修改密码
+ */
+const changePassword = async () => {
+  try {
+    await passwordFormRef.value.validate()
+    
+    changingPassword.value = true
+    const response = await api.put('/auth/change-password', {
+      currentPassword: passwordForm.currentPassword,
+      newPassword: passwordForm.newPassword
+    })
+    
+    if (response.data.success) {
+      ElMessage.success(response.data.message || '密码修改成功')
+      resetPasswordForm()
+      // 修改成功后返回个人资料页
+      router.push('/profile')
+    } else {
+      ElMessage.error(response.data.message || '密码修改失败')
+    }
+  } catch (error) {
+    console.error('密码修改失败:', error)
+    if (error.response) {
+      ElMessage.error(error.response.data.message || '密码修改失败')
+    } else {
+      ElMessage.error('密码修改失败')
+    }
+  } finally {
+    changingPassword.value = false
+  }
+}
+
+/**
+ * 重置密码表单
+ */
+const resetPasswordForm = () => {
+  passwordForm.currentPassword = ''
+  passwordForm.newPassword = ''
+  passwordForm.confirmPassword = ''
+  passwordFormRef.value?.clearValidate()
+}
+</script>
+
+<style lang="scss" scoped>
+.password-change-page {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  height: 56px;
+  background: white;
+  border-bottom: 1px solid #eee;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.nav-left,
+.nav-right {
+  flex: 1;
+}
+
+.back-btn {
+  color: #409eff;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.nav-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+}
+
+.password-form-container {
+  padding: 20px 16px;
+}
+
+.password-form {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.form-actions {
+  text-align: center;
+  margin-top: 30px;
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+}
+
+.form-actions .el-button {
+  min-width: 100px;
+  border-radius: 8px;
+  font-weight: 500;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .password-form-container {
+    padding: 10px;
+  }
+  
+  .password-form {
+    padding: 20px;
+    border-radius: 8px;
+  }
+  
+  .form-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .form-actions .el-button {
+    width: 100%;
+    max-width: 200px;
+  }
+  
+  .el-form {
+    :deep(.el-form-item__label) {
+      width: 80px !important;
+      font-size: 14px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue
new file mode 100644
index 0000000..0802883
--- /dev/null
+++ b/src/views/MainPage.vue
@@ -0,0 +1,398 @@
+<template>
+  <div class="container">
+    <div class="spacer"></div>
+    
+    <div class="main-content">
+      <!-- 轮播图 -->
+      <div class="carousel">
+        <swiper
+          :modules="modules"
+          :slides-per-view="1"
+          :space-between="0"
+          :autoplay="{ delay: 3000, disableOnInteraction: false }"
+          :pagination="{ clickable: true }"
+          :loop="true"
+        >
+          <swiper-slide v-for="(item, index) in carouselItems" :key="index">
+            <img :src="item.image" :alt="item.title" class="carousel-img">
+            <div class="carousel-title">{{ item.title }}</div>
+          </swiper-slide>
+        </swiper>
+      </div>
+      
+      <!-- 头部导航 -->
+      <div class="header">
+        <router-link 
+          v-for="(item, index) in headerItems" 
+          :key="index" 
+          :to="item.path" 
+          class="header-item"
+          custom
+          v-slot="{ navigate }"
+        >
+          <div @click="navigate" class="header-item-content">
+            <img :src="item.image" :alt="item.text" class="header-image">
+            <div class="header-text">{{ item.text }}</div>
+          </div>
+        </router-link>
+      </div>
+      
+      <!-- 修改后的操作区域 - 三个部分等宽 -->
+      <div class="action-area">
+        <div class="action-grid">
+          <router-link to="/mymatching" class="action-main">
+            <div class="matching-text">
+              <div>开始</div>
+              <div>匹配</div>
+            </div>
+          </router-link>
+          <div class="action-stack">
+            <div class="action-sub-item top">
+              <div class="action-icon">💎</div>
+              <div class="action-text">当前积分: {{ userPoints }}</div>
+            </div>
+            <router-link to="/myshop" class="action-sub-item bottom">
+              <div class="action-icon">🛒</div>
+              <div class="action-text">商城</div>
+            </router-link>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 热门资讯 -->
+      <div class="hot-news">
+        <div class="news-title">热门资讯</div>
+        <div class="news-list">
+          <div class="news-item" v-for="(item, index) in newsItems" :key="index">
+            <span class="news-dot">•</span> {{ item }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Autoplay, Pagination } from 'swiper'
+import { ref, onMounted, onUnmounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { transferAPI } from '../utils/api'
+import 'swiper/css'
+import 'swiper/css/autoplay'
+import 'swiper/css/pagination'
+
+export default {
+  components: {
+    Swiper,
+    SwiperSlide
+  },
+  setup() {
+    // 响应式数据
+    const userPoints = ref(0)
+    const carouselItems = ref([
+      { image: '/imgs/top/1.jpg', title: '限时优惠活动' },
+      { image: '/imgs/top/2.jpg', title: '新用户专享' },
+      { image: '/imgs/top/3.jpg', title: '积分兑换' }
+    ])
+    const headerItems = ref([
+      { image: "/imgs/mainpage/交易记录.png", text: "交易记录", path: "/transfers" },
+      { image: "/imgs/mainpage/订单查询.png", text: "订单查询", path: "/points-history" },
+      { image: "/imgs/mainpage/客服中心.png", text: "客服中心", path: "/support" },
+      { image: "/imgs/mainpage/系统公告.png", text: "系统公告", path: "/announcements" }
+    ])
+    const newsItems = ref([
+      "最新活动：双十一特惠",
+      "商城新品上架",
+      "积分兑换规则更新",
+      "VIP会员特权升级"
+    ])
+
+    // 获取用户积分
+    const getUserPoints = async () => {
+      try {
+        // 使用封装好的API获取用户账户信息
+        const response = await transferAPI.getUserAccount()
+        
+        // 根据实际API响应结构调整，以下是几种可能的取值方式
+        userPoints.value = response.data.balance ||        // 方式1：如果返回balance字段
+                          response.data.points ||         // 方式2：如果返回points字段
+                          response.data.currentPoints ||  // 方式3：如果返回currentPoints字段
+                          0                              // 默认值
+      } catch (error) {
+        console.error('获取积分信息失败', error)
+        userPoints.value = 0
+        ElMessage.error('获取积分信息失败，请稍后重试')
+      }
+    }
+
+    // 定时刷新积分
+    let refreshInterval
+    
+    onMounted(() => {
+      getUserPoints()
+      // 每5分钟刷新一次积分（可根据需求调整时间）
+      refreshInterval = setInterval(getUserPoints, 5 * 60 * 1000)
+    })
+
+    onUnmounted(() => {
+      clearInterval(refreshInterval)
+    })
+
+    return {
+      modules: [Autoplay, Pagination],
+      userPoints,
+      carouselItems,
+      headerItems,
+      newsItems,
+      getUserPoints // 如果需要外部调用可以暴露
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+/* 基础样式 */
+:root {
+  --primary-color: #4361ee;
+  --secondary-color: #3f37c9;
+  --accent-color: #4895ef;
+  --light-color: #f8f9fa;
+  --dark-color: #212529;
+  --success-color: #4cc9f0;
+  --warning-color: #f8961e;
+  --danger-color: #f72585;
+  --border-radius: 12px;
+  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --transition: all 0.3s ease;
+}
+
+/* 容器布局 */
+.container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(to bottom, #72c9ffae, #f3f3f3);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  position: relative;
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 16px;
+  max-width: 375px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.spacer {
+  height: 40px;
+}
+
+/* 轮播图样式 */
+.carousel {
+  width: 343px;
+  height: 148px;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--box-shadow);
+  position: relative;
+  margin: 0 auto;
+  opacity: 1;
+}
+
+.carousel-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.carousel-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 8px 16px;
+  font-size: 14px;
+}
+
+/* 头部导航样式 */
+.header {
+  display: flex;
+  justify-content: space-between; /* 保持元素均匀分布 */
+  width: 343px;
+  height: 50px;
+  padding: 0; /* 移除内边距 */
+  background-color: transparent;
+  margin: 0 auto;
+  position: relative; /* 为伪元素定位做准备 */
+}
+
+.header-item {
+  flex: 0 0 60px; /* 固定每个项目宽度为60px */
+  text-decoration: none;
+}
+
+.header-item-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  cursor: pointer;
+  transition: var(--transition);
+  width: 100%; /* 确保内容占满整个项目宽度 */
+}
+
+.header-image {
+  width: 24px;
+  height: 24px;
+  margin-bottom: 2px;
+  object-fit: contain;
+}
+
+.header-text {
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--dark-color);
+  white-space: nowrap;
+}
+
+/* 操作区域样式 */
+.action-area {
+  width: 343px;
+  margin: 0 auto;
+}
+
+.action-grid {
+  display: flex;
+  gap: 20px; /* 修改为20px间距 */
+  height: 204px;
+}
+
+.action-main {
+  width: 159px;
+  height: 204px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
+  color: white;
+  font-weight: 600;
+  font-size: 18px;
+  border-radius: 12px;
+  box-shadow: var(--box-shadow);
+  cursor: pointer;
+  transition: var(--transition);
+  text-decoration: none;
+  padding: 63px 47px;
+  opacity: 1;
+}
+
+.action-main:hover {
+  transform: scale(1.02);
+  box-shadow: 0 8px 15px rgba(67, 97, 238, 0.3);
+}
+
+.action-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 20px; /* 修改为20px间距 */
+  width: 165px;
+}
+
+.action-sub-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  border-radius: 12px;
+  box-shadow: var(--box-shadow);
+  cursor: pointer;
+  transition: var(--transition);
+  text-decoration: none;
+  opacity: 1;
+}
+
+.action-sub-item.top {
+  width: 165px;
+  height: 92px;
+  color: var(--primary-color);
+}
+
+.action-sub-item.bottom {
+  width: 165px;
+  height: 92px;
+  color: var(--success-color);
+}
+
+.action-sub-item:hover {
+  transform: translateY(-2px);
+}
+
+.action-icon {
+  font-size: 20px;
+  margin-bottom: 4px;
+}
+
+.action-text {
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+}
+
+/* 热门资讯 */
+.hot-news {
+  width: 343px;
+  padding: 16px;
+  background-color: white;
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  margin: 0 auto;
+  opacity: 1;
+}
+
+.news-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--dark-color);
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.news-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.news-item {
+  font-size: 13px;
+  color: #555;
+  display: flex;
+  align-items: center;
+  line-height: 1.4;
+}
+
+.news-dot {
+  color: var(--primary-color);
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+/* Swiper分页样式 */
+:deep(.swiper-pagination-bullet-active) {
+  background: var(--primary-color) !important;
+}
+</style>
\ No newline at end of file