diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index c4e0ec7..7a728b1 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,777 +1,665 @@
-<template>
-  <div class="home-page">
-    <div class="home-container">
-      <!-- 用户信息和导航 -->
-      <header class="site-header">
-        <div class="header-content">
-          <div class="logo-section">
-            <h2 class="site-logo">🚀 PT Tracker</h2>
-          </div>
-          <div class="user-section">
-            <div class="user-stats">
-              <div class="stat-item">
-                <span class="stat-label">上传:</span>
-                <span class="stat-value">{{ userStats.uploaded }}</span>
-              </div>
-              <div class="stat-item">
-                <span class="stat-label">下载:</span>
-                <span class="stat-value">{{ userStats.downloaded }}</span>
-              </div>
-              <div class="stat-item">
-                <span class="stat-label">分享率:</span>
-                <span class="stat-value ratio" :class="getRatioClass(userStats.ratio)">
-                  {{ userStats.ratio }}
-                </span>
-              </div>
-            </div>
-            <div class="user-info">
-              <el-avatar :size="40" :icon="UserFilled" />
-              <span class="username">{{ userInfo.username }}</span>
-              <el-dropdown @command="handleUserCommand">
-                <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item command="profile">个人资料</el-dropdown-item>
-                    <el-dropdown-item command="settings">设置</el-dropdown-item>
-                    <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      <!-- 主要内容区域 -->
-      <main class="main-content">
-        <!-- 统计概览 -->
-        <section class="stats-overview">
-          <div class="stats-grid">
-            <div class="stat-card">
-              <div class="stat-icon">
-                <el-icon size="32" color="#67c23a"><Download /></el-icon>
-              </div>
-              <div class="stat-info">
-                <h3>{{ siteStats.totalTorrents }}</h3>
-                <p>种子总数</p>
-              </div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-icon">
-                <el-icon size="32" color="#409eff"><User /></el-icon>
-              </div>
-              <div class="stat-info">
-                <h3>{{ siteStats.totalUsers }}</h3>
-                <p>注册用户</p>
-              </div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-icon">
-                <el-icon size="32" color="#f56c6c"><Upload /></el-icon>
-              </div>
-              <div class="stat-info">
-                <h3>{{ siteStats.totalSize }}</h3>
-                <p>数据总量</p>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <!-- 快速操作 -->
-        <section class="quick-actions">
-          <h2 class="section-title">快速操作</h2>
-          <div class="action-grid">
-            <div class="action-card" @click="navigateTo('/torrents')">
-              <el-icon size="48" color="#409eff"><Search /></el-icon>
-              <h3>浏览种子</h3>
-              <p>搜索和浏览所有可用的种子资源</p>
-            </div>
-            <div class="action-card" @click="navigateTo('/upload')">
-              <el-icon size="48" color="#67c23a"><Upload /></el-icon>
-              <h3>上传资源</h3>
-              <p>分享你的资源，为社区做贡献</p>
-            </div>
-            <div class="action-card" @click="navigateTo('/forum')">
-              <el-icon size="48" color="#e6a23c"><ChatDotRound /></el-icon>
-              <h3>论坛交流</h3>
-              <p>与其他用户交流讨论</p>
-            </div>
-            <div class="action-card" @click="navigateTo('/rankings')">
-              <el-icon size="48" color="#f56c6c"><TrophyBase /></el-icon>
-              <h3>排行榜</h3>
-              <p>查看用户和资源排行</p>
-            </div>
-          </div>
-        </section>
-
-        <!-- 最新种子 -->
-        <section class="latest-torrents">
-          <div class="section-header">
-            <h2 class="section-title">最新种子</h2>
-            <el-button type="primary" text @click="navigateTo('/torrents')">
-              查看更多 <el-icon><ArrowRight /></el-icon>
-            </el-button>
-          </div>
-          <div class="torrents-list">
-            <div 
-              v-for="torrent in latestTorrents" 
-              :key="torrent.id" 
-              class="torrent-item"
-              @click="navigateTo(`/torrent/${torrent.id}`)"
-            >
-              <div class="torrent-info">
-                <div class="torrent-category">
-                  <el-tag :type="getCategoryType(torrent.category)" size="small">
-                    {{ torrent.category }}
-                  </el-tag>
-                </div>
-                <h4 class="torrent-title">{{ torrent.title }}</h4>
-                <div class="torrent-meta">
-                  <span class="meta-item">
-                    <el-icon><User /></el-icon>
-                    {{ torrent.uploader }}
-                  </span>
-                  <span class="meta-item">
-                    <el-icon><Clock /></el-icon>
-                    {{ formatTime(torrent.uploadTime) }}
-                  </span>
-                  <span class="meta-item">
-                    <el-icon><Coin /></el-icon>
-                    {{ torrent.size }}
-                  </span>
-                </div>
-              </div>
-              <div class="torrent-stats">
-                <div class="stat-group">
-                  <span class="stat-number seeders">{{ torrent.seeders }}</span>
-                  <span class="stat-label">做种</span>
-                </div>
-                <div class="stat-group">
-                  <span class="stat-number leechers">{{ torrent.leechers }}</span>
-                  <span class="stat-label">下载</span>
-                </div>
-                <div class="stat-group">
-                  <span class="stat-number">{{ torrent.downloads }}</span>
-                  <span class="stat-label">完成</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <!-- 个人活动 -->
-        <section class="user-activity">
-          <h2 class="section-title">我的活动</h2>
-          <div class="activity-grid">
-            <div class="activity-card">
-              <h3>我的种子</h3>
-              <div class="activity-stats">
-                <div class="activity-item">
-                  <span class="activity-label">正在做种:</span>
-                  <span class="activity-value">{{ userActivity.seeding }}</span>
-                </div>
-                <div class="activity-item">
-                  <span class="activity-label">正在下载:</span>
-                  <span class="activity-value">{{ userActivity.downloading }}</span>
-                </div>
-                <div class="activity-item">
-                  <span class="activity-label">已上传:</span>
-                  <span class="activity-value">{{ userActivity.uploaded }}</span>
-                </div>
-              </div>
-              <el-button type="primary" size="small" @click="navigateTo('/my-torrents')">
-                查看详情
-              </el-button>
-            </div>
-            
-            <div class="activity-card">
-              <h3>邀请管理</h3>
-              <div class="activity-stats">
-                <div class="activity-item">
-                  <span class="activity-label">可用邀请:</span>
-                  <span class="activity-value">{{ userActivity.invitations }}</span>
-                </div>
-                <div class="activity-item">
-                  <span class="activity-label">已邀请:</span>
-                  <span class="activity-value">{{ userActivity.invited }}</span>
-                </div>
-              </div>
-              <el-button type="success" size="small" @click="navigateTo('/invitations')">
-                管理邀请
-              </el-button>
-            </div>
-          </div>
-        </section>
-      </main>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import {
-  UserFilled,
-  ArrowDown,
-  Download,
-  Upload,
-  ChatDotRound,
-  Search,
-  User,
-  Connection,
-  TrophyBase,
-  ArrowRight,
-  Clock,
-  Coin
-} from '@element-plus/icons-vue'
-
-export default {
-  name: 'HomeView',
-  components: {
-    UserFilled,
-    ArrowDown
-  },
-  setup() {
-    const router = useRouter()
-    
-    const userInfo = ref({
-      username: '',
-      loginTime: ''
-    })
-    
-    const userStats = ref({
-      uploaded: '128.5 GB',
-      downloaded: '45.2 GB',
-      ratio: '2.84'
-    })
-    
-    const siteStats = ref({
-      totalTorrents: '12,458',
-      totalUsers: '8,924',
-      onlineUsers: '342',
-      totalSize: '45.2 TB'
-    })
-    
-    const userActivity = ref({
-      seeding: 15,
-      downloading: 3,
-      uploaded: 8,
-      invitations: 5,
-      invited: 12
-    })
-    
-    const latestTorrents = ref([
-      {
-        id: 1,
-        title: '[4K蓝光原盘] 阿凡达：水之道 Avatar: The Way of Water (2022)',
-        category: '电影',
-        uploader: 'MovieMaster',
-        uploadTime: '2025-06-03T10:30:00',
-        size: '85.6 GB',
-        seeders: 128,
-        leechers: 45,
-        downloads: 892
-      },
-      {
-        id: 2,
-        title: '[FLAC] Taylor Swift - Midnights (Deluxe Edition) [2022]',
-        category: '音乐',
-        uploader: 'MusicLover',
-        uploadTime: '2025-06-03T09:15:00',
-        size: '1.2 GB',
-        seeders: 67,
-        leechers: 12,
-        downloads: 456
-      },
-      {
-        id: 3,
-        title: '[合集] Adobe Creative Suite 2025 完整版',
-        category: '软件',
-        uploader: 'TechGuru',
-        uploadTime: '2025-06-03T08:45:00',
-        size: '12.8 GB',
-        seeders: 234,
-        leechers: 89,
-        downloads: 1205
-      }
-    ])
-    
-    onMounted(() => {
-      userInfo.value = {
-        username: localStorage.getItem('username') || '用户',
-        loginTime: localStorage.getItem('loginTime') || ''
-      }
-      
-      // 模拟获取用户数据
-      fetchUserData()
-    })
-    
-    const fetchUserData = () => {
-      // 这里应该是API调用，现在使用模拟数据
-      console.log('获取用户数据...')
-    }
-    
-    const formatTime = (timeString) => {
-      if (!timeString) return ''
-      const date = new Date(timeString)
-      const now = new Date()
-      const diff = now - date
-      const hours = Math.floor(diff / (1000 * 60 * 60))
-      
-      if (hours < 1) return '刚刚'
-      if (hours < 24) return `${hours}小时前`
-      const days = Math.floor(hours / 24)
-      return `${days}天前`
-    }
-    
-    const getRatioClass = (ratio) => {
-      const r = parseFloat(ratio)
-      if (r >= 2) return 'excellent'
-      if (r >= 1) return 'good'
-      return 'warning'
-    }
-    
-    const getCategoryType = (category) => {
-      const types = {
-        '电影': 'primary',
-        '音乐': 'success',
-        '软件': 'warning',
-        '游戏': 'danger',
-        '电视剧': 'info'
-      }
-      return types[category] || 'default'
-    }
-    
-    const navigateTo = (path) => {
-      router.push(path)
-    }
-    
-    const handleUserCommand = async (command) => {
-      switch (command) {
-        case 'profile':
-          navigateTo('/profile')
-          break
-        case 'settings':
-          navigateTo('/settings')
-          break
-        case 'logout':
-          await handleLogout()
-          break
-      }
-    }
-    
-    const handleLogout = async () => {
-      try {
-        await ElMessageBox.confirm(
-          '确定要退出登录吗？',
-          '提示',
-          {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        )
-        
-        localStorage.removeItem('isLoggedIn')
-        localStorage.removeItem('username')
-        localStorage.removeItem('loginTime')
-        localStorage.removeItem('rememberLogin')
-        
-        ElMessage.success('已安全退出')
-        router.push('/login')
-        
-      } catch {
-        // 用户取消退出
-      }
-    }
-    
-    return {
-      userInfo,
-      userStats,
-      siteStats,
-      userActivity,
-      latestTorrents,
-      formatTime,
-      getRatioClass,
-      getCategoryType,
-      navigateTo,
-      handleUserCommand,
-      handleLogout,
-      Download,
-      Upload,
-      ChatDotRound,
-      Search,
-      User,
-      Connection,
-      TrophyBase,
-      ArrowRight,
-      Clock,
-      Coin
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.home-page {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 0;
-}
-
-.home-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  background: #fff;
-  min-height: 100vh;
-}
-
-// 网站头部
-.site-header {
-  background: #fff;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  
-  .header-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px 24px;
-    
-    .logo-section {
-      .site-logo {
-        margin: 0;
-        font-size: 24px;
-        font-weight: bold;
-        color: #667eea;
-      }
-    }
-    
-    .user-section {
-      display: flex;
-      align-items: center;
-      gap: 24px;
-      
-      .user-stats {
-        display: flex;
-        gap: 16px;
-        
-        .stat-item {
-          font-size: 14px;
-          
-          .stat-label {
-            color: #909399;
-            margin-right: 4px;
-          }
-          
-          .stat-value {
-            font-weight: 600;
-            color: #2c3e50;
-            
-            &.ratio {
-              &.excellent { color: #67c23a; }
-              &.good { color: #e6a23c; }
-              &.warning { color: #f56c6c; }
-            }
-          }
-        }
-      }
-      
-      .user-info {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        cursor: pointer;
-        
-        .username {
-          font-weight: 500;
-          color: #2c3e50;
-        }
-        
-        .dropdown-icon {
-          color: #909399;
-          transition: transform 0.3s ease;
-          
-          &:hover {
-            transform: rotate(180deg);
-          }
-        }
-      }
-    }
-  }
-}
-
-// 主要内容
-.main-content {
-  padding: 24px;
-}
-
-.section-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: #2c3e50;
-  margin-bottom: 16px;
-}
-
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-// 统计概览
-.stats-overview {
-  margin-bottom: 32px;
-  
-  .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 16px;
-    
-    .stat-card {
-      background: #fff;
-      border-radius: 12px;
-      padding: 24px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-      border: 1px solid #f0f0f0;
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      transition: all 0.3s ease;
-      
-      &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-      }
-      
-      .stat-info {
-        h3 {
-          font-size: 24px;
-          font-weight: bold;
-          color: #2c3e50;
-          margin: 0 0 4px 0;
-        }
-        
-        p {
-          font-size: 14px;
-          color: #909399;
-          margin: 0;
-        }
-      }
-    }
-  }
-}
-
-// 快速操作
-.quick-actions {
-  margin-bottom: 32px;
-  
-  .action-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    gap: 20px;
-    
-    .action-card {
-      background: #fff;
-      border-radius: 12px;
-      padding: 32px 24px;
-      text-align: center;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-      border: 1px solid #f0f0f0;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      
-      &:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
-      }
-      
-      h3 {
-        font-size: 18px;
-        font-weight: 600;
-        color: #2c3e50;
-        margin: 16px 0 8px 0;
-      }
-      
-      p {
-        font-size: 14px;
-        color: #7f8c8d;
-        line-height: 1.5;
-        margin: 0;
-      }
-    }
-  }
-}
-
-// 最新种子
-.latest-torrents {
-  margin-bottom: 32px;
-  
-  .torrents-list {
-    background: #fff;
-    border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-    border: 1px solid #f0f0f0;
-    overflow: hidden;
-    
-    .torrent-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 20px 24px;
-      border-bottom: 1px solid #f5f5f5;
-      cursor: pointer;
-      transition: background-color 0.3s ease;
-      
-      &:hover {
-        background-color: #f8f9fa;
-      }
-      
-      &:last-child {
-        border-bottom: none;
-      }
-      
-      .torrent-info {
-        flex: 1;
-        
-        .torrent-category {
-          margin-bottom: 8px;
-        }
-        
-        .torrent-title {
-          font-size: 16px;
-          font-weight: 500;
-          color: #2c3e50;
-          margin: 0 0 8px 0;
-          line-height: 1.4;
-        }
-        
-        .torrent-meta {
-          display: flex;
-          gap: 16px;
-          
-          .meta-item {
-            display: flex;
-            align-items: center;
-            gap: 4px;
-            font-size: 12px;
-            color: #909399;
-            
-            .el-icon {
-              font-size: 12px;
-            }
-          }
-        }
-      }
-      
-      .torrent-stats {
-        display: flex;
-        gap: 24px;
-        
-        .stat-group {
-          text-align: center;
-          
-          .stat-number {
-            display: block;
-            font-size: 16px;
-            font-weight: 600;
-            
-            &.seeders { color: #67c23a; }
-            &.leechers { color: #f56c6c; }
-          }
-          
-          .stat-label {
-            font-size: 12px;
-            color: #909399;
-          }
-        }
-      }
-    }
-  }
-}
-
-// 用户活动
-.user-activity {
-  .activity-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 20px;
-    
-    .activity-card {
-      background: #fff;
-      border-radius: 12px;
-      padding: 24px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-      border: 1px solid #f0f0f0;
-      
-      h3 {
-        font-size: 18px;
-        font-weight: 600;
-        color: #2c3e50;
-        margin: 0 0 16px 0;
-      }
-      
-      .activity-stats {
-        margin-bottom: 16px;
-        
-        .activity-item {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 8px 0;
-          
-          .activity-label {
-            font-size: 14px;
-            color: #7f8c8d;
-          }
-          
-          .activity-value {
-            font-size: 14px;
-            font-weight: 600;
-            color: #2c3e50;
-          }
-        }
-      }
-    }
-  }
-}
-
-// 响应式设计
-@media (max-width: 768px) {
-  .header-content {
-    flex-direction: column;
-    gap: 16px;
-    
-    .user-stats {
-      flex-direction: column;
-      gap: 8px;
-      text-align: center;
-    }
-  }
-  
-  .main-content {
-    padding: 16px;
-  }
-  
-  .stats-grid,
-  .action-grid,
-  .activity-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .torrent-item {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-    
-    .torrent-stats {
-      width: 100%;
-      justify-content: space-around;
-    }
-  }
-}
+<template>
+  <div class="home-page">
+    <!-- 导航栏 -->
+    <div class="navbar">
+      <router-link to="/home" class="navbar-brand">PT Tracker</router-link>
+      <div class="navbar-nav">
+        <router-link to="/home" class="navbar-item">首页</router-link>
+        <router-link to="/torrents" class="navbar-item">种子</router-link>
+        <router-link to="/forum" class="navbar-item">论坛</router-link>
+        <el-dropdown @command="handleUserCommand">
+          <span class="navbar-user">
+            <el-avatar :size="32" :src="userAvatar">
+              {{ username.charAt(0).toUpperCase() }}
+            </el-avatar>
+            <span class="username">{{ username }}</span>
+            <el-icon><ArrowDown /></el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="profile">
+                <el-icon><User /></el-icon>
+                个人资料
+              </el-dropdown-item>
+              <el-dropdown-item command="settings">
+                <el-icon><Setting /></el-icon>
+                设置
+              </el-dropdown-item>
+              <el-dropdown-item divided command="logout">
+                <el-icon><SwitchButton /></el-icon>
+                退出登录
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="main-content">
+      <!-- 欢迎卡片 -->
+      <div class="welcome-card">
+        <div class="welcome-header">
+          <h1>欢迎回来，{{ username }}！</h1>
+          <p>当前时间：{{ currentTime }}</p>
+        </div>
+        
+        <!-- 用户统计概览 -->
+        <div class="stats-overview" v-if="userInfo">
+          <div class="stat-item">
+            <div class="stat-icon upload">
+              <el-icon size="24"><Upload /></el-icon>
+            </div>
+            <div class="stat-content">
+              <h3>{{ formatBytes(userInfo.user.uploaded) }}</h3>
+              <p>总上传</p>
+            </div>
+          </div>
+          
+          <div class="stat-item">
+            <div class="stat-icon download">
+              <el-icon size="24"><Download /></el-icon>
+            </div>
+            <div class="stat-content">
+              <h3>{{ formatBytes(userInfo.user.downloaded) }}</h3>
+              <p>总下载</p>
+            </div>
+          </div>
+          
+          <div class="stat-item">
+            <div class="stat-icon ratio">
+              <el-icon size="24"><TrendCharts /></el-icon>
+            </div>
+            <div class="stat-content">
+              <h3>{{ calculateRatio(userInfo.user.uploaded, userInfo.user.downloaded) }}</h3>
+              <p>分享率</p>
+            </div>
+          </div>
+          
+          <div class="stat-item">
+            <div class="stat-icon points">
+              <el-icon size="24"><Star /></el-icon>
+            </div>
+            <div class="stat-content">
+              <h3>{{ userInfo.user.karma || '0' }}</h3>
+              <p>积分</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 功能快捷入口 -->
+      <div class="quick-actions">
+        <h2>快捷操作</h2>
+        <div class="actions-grid">
+          <div class="action-card" @click="$router.push('/upload')">
+            <el-icon size="32" color="#67c23a"><Upload /></el-icon>
+            <h3>上传种子</h3>
+            <p>分享你的资源</p>
+          </div>
+          
+          <div class="action-card" @click="$router.push('/torrents')">
+            <el-icon size="32" color="#409eff"><Search /></el-icon>
+            <h3>浏览种子</h3>
+            <p>发现新内容</p>
+          </div>
+          
+          <div class="action-card" @click="$router.push('/forum')">
+            <el-icon size="32" color="#e6a23c"><ChatDotRound /></el-icon>
+            <h3>社区论坛</h3>
+            <p>交流讨论</p>
+          </div>
+          
+          <div class="action-card" @click="$router.push('/profile')">
+            <el-icon size="32" color="#f56c6c"><User /></el-icon>
+            <h3>个人中心</h3>
+            <p>管理账户</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- API连接状态测试 -->
+      <div class="api-status-card">
+        <h2>API连接状态</h2>
+        <div class="status-items">
+          <div class="status-item">
+            <el-icon :color="loginStatusColor"><CircleCheck /></el-icon>
+            <span>登录状态：{{ loginStatusText }}</span>
+            <el-button size="small" @click="checkLoginStatus">检查状态</el-button>
+          </div>
+          
+          <div class="status-item">
+            <el-icon :color="userInfoStatusColor"><User /></el-icon>
+            <span>用户信息：{{ userInfoStatusText }}</span>
+            <el-button size="small" @click="refreshUserInfo">刷新信息</el-button>
+          </div>
+        </div>
+        
+        <!-- 用户详细信息展示 -->
+        <div class="user-details" v-if="userInfo">
+          <h3>用户详细信息</h3>
+          <div class="details-grid">
+            <div class="detail-item">
+              <label>用户ID：</label>
+              <span>{{ userInfo.user.id }}</span>
+            </div>
+            <div class="detail-item">
+              <label>用户名：</label>
+              <span>{{ userInfo.user.username }}</span>
+            </div>
+            <div class="detail-item">
+              <label>邮箱：</label>
+              <span>{{ userInfo.user.email }}</span>
+            </div>
+            <div class="detail-item">
+              <label>用户组：</label>
+              <span>{{ userInfo.user.group?.displayName || '未知' }}</span>
+            </div>
+            <div class="detail-item">
+              <label>注册时间：</label>
+              <span>{{ formatDate(userInfo.user.createdAt) }}</span>
+            </div>
+            <div class="detail-item">
+              <label>个性签名：</label>
+              <span>{{ userInfo.user.signature || '这个用户很懒，还没有个性签名' }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  ArrowDown,
+  User,
+  Setting,
+  SwitchButton,
+  Upload,
+  Download,
+  TrendCharts,
+  Star,
+  Search,
+  ChatDotRound,
+  CircleCheck
+} from '@element-plus/icons-vue'
+
+export default {
+  name: 'HomeView',
+  components: {
+    ArrowDown,
+    User,
+    Setting,
+    SwitchButton,
+    Upload,
+    Download,
+    TrendCharts,
+    Star,
+    Search,
+    ChatDotRound,
+    CircleCheck
+  },
+  setup() {
+    const router = useRouter()
+    const store = useStore()
+    
+    const currentTime = ref('')
+    const timeInterval = ref(null)
+    
+    // 从store获取用户信息
+    const userInfo = computed(() => store.getters['auth/userInfo'])
+    const username = computed(() => store.getters['auth/username'])
+    const userAvatar = computed(() => store.getters['auth/avatar'])
+    const isAuthenticated = computed(() => store.getters['auth/isAuthenticated'])
+    
+    // API状态
+    const loginStatusColor = computed(() => isAuthenticated.value ? '#67c23a' : '#f56c6c')
+    const loginStatusText = computed(() => isAuthenticated.value ? '已登录' : '未登录')
+    
+    const userInfoStatusColor = computed(() => userInfo.value ? '#67c23a' : '#f56c6c')
+    const userInfoStatusText = computed(() => userInfo.value ? '已获取' : '未获取')
+    
+    // 更新当前时间
+    const updateCurrentTime = () => {
+      currentTime.value = new Date().toLocaleString('zh-CN')
+    }
+    
+    // 格式化字节数
+    const formatBytes = (bytes) => {
+      if (!bytes || bytes === 0) return '0 B'
+      
+      const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+      const i = Math.floor(Math.log(bytes) / Math.log(1024))
+      const size = (bytes / Math.pow(1024, i)).toFixed(2)
+      
+      return `${size} ${sizes[i]}`
+    }
+    
+    // 计算分享率
+    const calculateRatio = (uploaded, downloaded) => {
+      if (!uploaded || !downloaded || downloaded === 0) {
+        return uploaded > 0 ? '∞' : '0.00'
+      }
+      return (uploaded / downloaded).toFixed(2)
+    }
+    
+    // 格式化日期
+    const formatDate = (timestamp) => {
+      if (!timestamp) return '未知'
+      return new Date(timestamp).toLocaleDateString('zh-CN')
+    }
+    
+    // 检查登录状态
+    const checkLoginStatus = async () => {
+      try {
+        await store.dispatch('auth/checkLoginStatus')
+        ElMessage.success('登录状态检查完成')
+      } catch (error) {
+        console.error('检查登录状态失败:', error)
+        ElMessage.error('检查登录状态失败')
+      }
+    }
+    
+    // 刷新用户信息
+    const refreshUserInfo = async () => {
+      try {
+        await store.dispatch('auth/checkLoginStatus')
+        ElMessage.success('用户信息刷新成功')
+      } catch (error) {
+        console.error('刷新用户信息失败:', error)
+        ElMessage.error('刷新用户信息失败')
+      }
+    }
+    
+    // 处理用户菜单命令
+    const handleUserCommand = async (command) => {
+      switch (command) {
+        case 'profile':
+          router.push('/profile')
+          break
+        case 'settings':
+          ElMessage.info('设置功能开发中...')
+          break
+        case 'logout':
+          try {
+            await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            })
+            
+            await store.dispatch('auth/logout')
+            router.push('/login')
+          } catch (error) {
+            // 用户取消操作
+            if (error !== 'cancel') {
+              console.error('退出登录失败:', error)
+            }
+          }
+          break
+      }
+    }
+    
+    onMounted(() => {
+      // 开始时间更新
+      updateCurrentTime()
+      timeInterval.value = setInterval(updateCurrentTime, 1000)
+      
+      // 检查登录状态
+      if (!isAuthenticated.value) {
+        checkLoginStatus()
+      }
+    })
+    
+    onUnmounted(() => {
+      // 清理定时器
+      if (timeInterval.value) {
+        clearInterval(timeInterval.value)
+      }
+    })
+    
+    return {
+      currentTime,
+      userInfo,
+      username,
+      userAvatar,
+      isAuthenticated,
+      loginStatusColor,
+      loginStatusText,
+      userInfoStatusColor,
+      userInfoStatusText,
+      formatBytes,
+      calculateRatio,
+      formatDate,
+      checkLoginStatus,
+      refreshUserInfo,
+      handleUserCommand
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.home-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.navbar {
+  background: #fff;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.navbar-brand {
+  font-size: 20px;
+  font-weight: 700;
+  color: #409eff;
+  text-decoration: none;
+}
+
+.navbar-nav {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.navbar-item {
+  color: #606266;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.3s;
+  
+  &:hover {
+    color: #409eff;
+  }
+}
+
+.navbar-user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 6px;
+  transition: background-color 0.3s;
+  
+  &:hover {
+    background-color: #f5f7fa;
+  }
+  
+  .username {
+    font-weight: 500;
+    color: #303133;
+  }
+}
+
+.main-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.welcome-card {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-radius: 12px;
+  padding: 32px;
+  margin-bottom: 24px;
+  
+  .welcome-header {
+    text-align: center;
+    margin-bottom: 24px;
+    
+    h1 {
+      font-size: 28px;
+      margin-bottom: 8px;
+    }
+    
+    p {
+      opacity: 0.9;
+      font-size: 14px;
+    }
+  }
+  
+  .stats-overview {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+    
+    .stat-item {
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+      border-radius: 8px;
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      
+      .stat-icon {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      
+      .stat-content {
+        h3 {
+          font-size: 20px;
+          font-weight: 600;
+          margin: 0 0 4px 0;
+        }
+        
+        p {
+          font-size: 14px;
+          opacity: 0.8;
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+
+.quick-actions {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  
+  h2 {
+    font-size: 20px;
+    color: #303133;
+    margin: 0 0 20px 0;
+  }
+  
+  .actions-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+    
+    .action-card {
+      background: #f8f9fa;
+      border-radius: 8px;
+      padding: 24px;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.3s;
+      border: 2px solid transparent;
+      
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+        border-color: #409eff;
+      }
+      
+      h3 {
+        font-size: 16px;
+        color: #303133;
+        margin: 12px 0 8px 0;
+      }
+      
+      p {
+        font-size: 14px;
+        color: #909399;
+        margin: 0;
+      }
+    }
+  }
+}
+
+.api-status-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  
+  h2 {
+    font-size: 20px;
+    color: #303133;
+    margin: 0 0 20px 0;
+  }
+  
+  .status-items {
+    margin-bottom: 24px;
+    
+    .status-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      border-bottom: 1px solid #ebeef5;
+      
+      &:last-child {
+        border-bottom: none;
+      }
+      
+      span {
+        flex: 1;
+        font-size: 14px;
+        color: #606266;
+      }
+    }
+  }
+  
+  .user-details {
+    border-top: 1px solid #ebeef5;
+    padding-top: 20px;
+    
+    h3 {
+      font-size: 16px;
+      color: #303133;
+      margin: 0 0 16px 0;
+    }
+    
+    .details-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 12px;
+      
+      .detail-item {
+        display: flex;
+        align-items: center;
+        padding: 8px 0;
+        
+        label {
+          font-weight: 500;
+          color: #909399;
+          min-width: 80px;
+          font-size: 14px;
+        }
+        
+        span {
+          color: #606266;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar {
+    padding: 0 16px;
+    
+    .navbar-nav {
+      gap: 16px;
+    }
+    
+    .navbar-user .username {
+      display: none;
+    }
+  }
+  
+  .main-content {
+    padding: 16px;
+  }
+  
+  .welcome-card {
+    padding: 24px 16px;
+    
+    .welcome-header h1 {
+      font-size: 24px;
+    }
+    
+    .stats-overview {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+      
+      .stat-item {
+        padding: 16px;
+        
+        .stat-content h3 {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+  
+  .actions-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+    
+    .action-card {
+      padding: 16px;
+      
+      h3 {
+        font-size: 14px;
+      }
+      
+      p {
+        font-size: 12px;
+      }
+    }
+  }
+  
+  .details-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .stats-overview {
+    grid-template-columns: 1fr;
+  }
+  
+  .actions-grid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
\ No newline at end of file