diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..af607d2
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,15 @@
+# Build stage
+#FROM registry.cn-hangzhou.aliyuncs.com/library/node:18-alpine as build-stage
+FROM node:18-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY .. .
+RUN npm run build
+
+# Production stage
+#FROM registry.cn-hangzhou.aliyuncs.com/library/nginx:stable-alpine as production-stage
+FROM nginx:stable-alpine AS base
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"] 
\ No newline at end of file
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..7dd34cc
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,39 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    # 前端静态文件
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    # API 请求代理到后端
+    location /api {
+        proxy_pass http://backend:8080;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_cache_bypass $http_upgrade;
+
+        # 处理 CORS
+        add_header 'Access-Control-Allow-Origin' '*';
+        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
+        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,sapling-token';
+
+        if ($request_method = 'OPTIONS') {
+            return 204;
+        }
+    }
+
+    # 健康检查
+    location /health {
+        access_log off;
+        return 200 "healthy\n";
+    }
+}
\ No newline at end of file
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644
index 0000000..32d31d4
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,169 @@
+<template>
+  <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>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
+import { ElMessageBox } from 'element-plus'
+import {
+  ArrowDown,
+  User,
+  Setting,
+  SwitchButton
+} from '@element-plus/icons-vue'
+
+export default {
+  name: 'Navbar',
+  components: {
+    ArrowDown,
+    User,
+    Setting,
+    SwitchButton
+  },
+  setup() {
+    const store = useStore()
+    const router = useRouter()
+
+    const username = computed(() => store.getters['auth/username'])
+    const userAvatar = computed(() => store.getters['auth/avatar'])
+
+    const handleUserCommand = async (command) => {
+      switch (command) {
+        case 'profile':
+          router.push('/profile')
+          break
+        case 'settings':
+          router.push('/settings')
+          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
+      }
+    }
+
+    return {
+      username,
+      userAvatar,
+      handleUserCommand
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.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;
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar {
+    padding: 0 16px;
+    
+    .navbar-nav {
+      gap: 16px;
+    }
+    
+    .navbar-user .username {
+      display: none;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 7a728b1..f339463 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,39 +1,7 @@
 <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>
+    <Navbar />
 
     <!-- 主内容区 -->
     <div class="main-content">
@@ -171,6 +139,7 @@
 </template>
 
 <script>
+import Navbar from '@/components/Navbar.vue'
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
@@ -202,7 +171,8 @@
     Star,
     Search,
     ChatDotRound,
-    CircleCheck
+    CircleCheck,
+    Navbar
   },
   setup() {
     const router = useRouter()
diff --git a/src/views/auth/ProfileView.vue b/src/views/auth/ProfileView.vue
index 5d11acc..8e37d76 100644
--- a/src/views/auth/ProfileView.vue
+++ b/src/views/auth/ProfileView.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="profile-page">
+    <Navbar />
     <div class="page-container">
       <!-- 个人信息卡片 -->
       <div class="profile-header">
@@ -123,335 +124,9 @@
                     />
                   </el-form-item>
                 </div>
-                
-                <div class="form-section">
-                  <h3>个人介绍</h3>
-                  <el-form-item label="个人签名">
-                    <el-input
-                      v-model="editProfile.signature"
-                      type="textarea"
-                      :rows="3"
-                      maxlength="200"
-                      show-word-limit
-                      placeholder="介绍一下自己吧..."
-                    />
-                  </el-form-item>
-                  
-                  <el-form-item label="个人网站">
-                    <el-input v-model="editProfile.website" placeholder="https://" />
-                  </el-form-item>
-                  
-                  <el-form-item label="兴趣爱好">
-                    <div class="interests-input">
-                      <el-tag
-                        v-for="interest in editProfile.interests"
-                        :key="interest"
-                        closable
-                        @close="removeInterest(interest)"
-                        class="interest-tag"
-                      >
-                        {{ interest }}
-                      </el-tag>
-                      <el-input
-                        v-if="interestInputVisible"
-                        ref="interestInputRef"
-                        v-model="interestInputValue"
-                        size="small"
-                        @keyup.enter="addInterest"
-                        @blur="addInterest"
-                        style="width: 120px;"
-                      />
-                      <el-button
-                        v-else
-                        size="small"
-                        @click="showInterestInput"
-                      >
-                        + 添加兴趣
-                      </el-button>
-                    </div>
-                  </el-form-item>
-                </div>
-                
-                <div class="form-section">
-                  <h3>隐私设置</h3>
-                  <el-form-item label="邮箱公开">
-                    <el-switch v-model="editProfile.emailPublic" />
-                    <span class="setting-tip">是否在个人资料中显示邮箱</span>
-                  </el-form-item>
-                  
-                  <el-form-item label="统计公开">
-                    <el-switch v-model="editProfile.statsPublic" />
-                    <span class="setting-tip">是否公开上传下载统计</span>
-                  </el-form-item>
-                  
-                  <el-form-item label="活动记录">
-                    <el-switch v-model="editProfile.activityPublic" />
-                    <span class="setting-tip">是否公开活动记录</span>
-                  </el-form-item>
-                </div>
-                
-                <div class="form-actions">
-                  <el-button @click="resetProfile">重置</el-button>
-                  <el-button type="primary" @click="saveProfile" :loading="saving">
-                    保存修改
-                  </el-button>
-                </div>
               </el-form>
             </div>
           </el-tab-pane>
-          
-          <!-- 数据统计 -->
-          <el-tab-pane label="数据统计" name="stats">
-            <div class="stats-section">
-              <div class="stats-overview">
-                <div class="overview-grid">
-                  <div class="overview-card">
-                    <h3>上传统计</h3>
-                    <div class="stat-details">
-                      <div class="detail-item">
-                        <span class="label">总上传量：</span>
-                        <span class="value">{{ userProfile.detailedStats.totalUploaded }}</span>
-                      </div>
-                      <div class="detail-item">
-                        <span class="label">上传种子：</span>
-                        <span class="value">{{ userProfile.detailedStats.uploadedTorrents }} 个</span>
-                      </div>
-                      <div class="detail-item">
-                        <span class="label">平均大小：</span>
-                        <span class="value">{{ userProfile.detailedStats.avgUploadSize }}</span>
-                      </div>
-                    </div>
-                  </div>
-                  
-                  <div class="overview-card">
-                    <h3>下载统计</h3>
-                    <div class="stat-details">
-                      <div class="detail-item">
-                        <span class="label">总下载量：</span>
-                        <span class="value">{{ userProfile.detailedStats.totalDownloaded }}</span>
-                      </div>
-                      <div class="detail-item">
-                        <span class="label">下载种子：</span>
-                        <span class="value">{{ userProfile.detailedStats.downloadedTorrents }} 个</span>
-                      </div>
-                      <div class="detail-item">
-                        <span class="label">完成种子：</span>
-                        <span class="value">{{ userProfile.detailedStats.completedTorrents }} 个</span>
-                      </div>
-                    </div>
-                  </div>
-                  
-                  <div class="overview-card">
-                    <h3>做种统计</h3>
-                    <div class="stat-details">
-                      <div class="detail-item">
-                        <span class="label">正在做种：</span>
-                        <span class="value">{{ userProfile.detailedStats.seeding }} 个</span>
-                      </div>
-                      <div class="detail-item">
-                        <span class="label">做种时间：</span>
-                        <span class="value">{{ userProfile.detailedStats.seedingTime }}</span>
-                      </div>
-                      <div class="detail-item">
-                        <span class="label">做种排名：</span>
-                        <span class="value">第 {{ userProfile.detailedStats.seedingRank }} 名</span>
-                      </div>
-                    </div>
-                  </div>
-                  
-                  <div class="overview-card">
-                    <h3>积分记录</h3>
-                    <div class="stat-details">
-                      <div class="detail-item">
-                        <span class="label">当前积分：</span>
-                        <span class="value">{{ userProfile.stats.points }}</span>
-                      </div>
-                      <div class="detail-item">
-                        <span class="label">累计获得：</span>
-                        <span class="value">{{ userProfile.detailedStats.totalEarnedPoints }}</span>
-                      </div>
-                      <div class="detail-item">
-                        <span class="label">累计消费：</span>
-                        <span class="value">{{ userProfile.detailedStats.totalSpentPoints }}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              
-              <!-- 数据图表 -->
-              <div class="charts-section">
-                <div class="chart-card">
-                  <h3>上传下载趋势</h3>
-                  <div class="chart-placeholder">
-                    <el-icon size="48" color="#e4e7ed"><TrendCharts /></el-icon>
-                    <p>图表功能开发中...</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </el-tab-pane>
-          
-          <!-- 我的种子 -->
-          <el-tab-pane label="我的种子" name="torrents">
-            <div class="torrents-section">
-              <div class="section-header">
-                <h3>我上传的种子</h3>
-                <el-button type="primary" :icon="Upload" @click="$router.push('/upload')">
-                  上传新种子
-                </el-button>
-              </div>
-              
-              <el-table :data="userTorrents" stripe>
-                <el-table-column label="种子名称" min-width="300">
-                  <template #default="{ row }">
-                    <div class="torrent-info">
-                      <el-tag :type="getCategoryType(row.category)" size="small">
-                        {{ getCategoryName(row.category) }}
-                      </el-tag>
-                      <span class="torrent-title">{{ row.title }}</span>
-                    </div>
-                  </template>
-                </el-table-column>
-                
-                <el-table-column label="大小" prop="size" width="100" />
-                <el-table-column label="做种" prop="seeders" width="80" align="center" />
-                <el-table-column label="下载" prop="leechers" width="80" align="center" />
-                <el-table-column label="完成" prop="downloads" width="80" align="center" />
-                <el-table-column label="上传时间" width="120">
-                  <template #default="{ row }">
-                    {{ formatDate(row.uploadTime) }}
-                  </template>
-                </el-table-column>
-                
-                <el-table-column label="操作" width="120" align="center">
-                  <template #default="{ row }">
-                    <el-button 
-                      type="primary" 
-                      size="small" 
-                      @click="$router.push(`/torrent/${row.id}`)"
-                    >
-                      查看
-                    </el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-              
-              <div class="pagination-wrapper">
-                <el-pagination
-                  v-model:current-page="torrentsPage"
-                  :page-size="10"
-                  :total="userTorrents.length"
-                  layout="prev, pager, next"
-                  small
-                />
-              </div>
-            </div>
-          </el-tab-pane>
-          
-          <!-- 活动记录 -->
-          <el-tab-pane label="活动记录" name="activity">
-            <div class="activity-section">
-              <div class="activity-filters">
-                <el-select v-model="activityFilter" placeholder="活动类型">
-                  <el-option label="全部活动" value="" />
-                  <el-option label="上传种子" value="upload" />
-                  <el-option label="下载种子" value="download" />
-                  <el-option label="论坛发帖" value="post" />
-                  <el-option label="积分变动" value="points" />
-                </el-select>
-              </div>
-              
-              <div class="activity-timeline">
-                <el-timeline>
-                  <el-timeline-item
-                    v-for="activity in filteredActivities"
-                    :key="activity.id"
-                    :timestamp="formatTime(activity.time)"
-                    :type="getActivityType(activity.type)"
-                  >
-                    <div class="activity-content">
-                      <div class="activity-header">
-                        <el-icon>
-                          <component :is="getActivityIcon(activity.type)" />
-                        </el-icon>
-                        <span class="activity-title">{{ activity.title }}</span>
-                      </div>
-                      <div class="activity-description">{{ activity.description }}</div>
-                    </div>
-                  </el-timeline-item>
-                </el-timeline>
-              </div>
-            </div>
-          </el-tab-pane>
-          
-          <!-- 安全设置 -->
-          <el-tab-pane label="安全设置" name="security">
-            <div class="security-section">
-              <div class="security-card">
-                <h3>修改密码</h3>
-                <el-form
-                  ref="passwordFormRef"
-                  :model="passwordForm"
-                  :rules="passwordRules"
-                  label-width="120px"
-                >
-                  <el-form-item label="当前密码" prop="currentPassword">
-                    <el-input
-                      v-model="passwordForm.currentPassword"
-                      type="password"
-                      show-password
-                      placeholder="请输入当前密码"
-                    />
-                  </el-form-item>
-                  
-                  <el-form-item label="新密码" prop="newPassword">
-                    <el-input
-                      v-model="passwordForm.newPassword"
-                      type="password"
-                      show-password
-                      placeholder="请输入新密码"
-                    />
-                  </el-form-item>
-                  
-                  <el-form-item label="确认密码" prop="confirmPassword">
-                    <el-input
-                      v-model="passwordForm.confirmPassword"
-                      type="password"
-                      show-password
-                      placeholder="请再次输入新密码"
-                    />
-                  </el-form-item>
-                  
-                  <el-form-item>
-                    <el-button type="primary" @click="changePassword" :loading="changingPassword">
-                      修改密码
-                    </el-button>
-                  </el-form-item>
-                </el-form>
-              </div>
-              
-              <div class="security-card">
-                <h3>登录记录</h3>
-                <el-table :data="loginHistory" stripe>
-                  <el-table-column label="登录时间" width="180">
-                    <template #default="{ row }">
-                      {{ formatDateTime(row.time) }}
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="IP地址" prop="ip" width="150" />
-                  <el-table-column label="设备信息" prop="device" />
-                  <el-table-column label="登录结果" width="100">
-                    <template #default="{ row }">
-                      <el-tag :type="row.success ? 'success' : 'danger'" size="small">
-                        {{ row.success ? '成功' : '失败' }}
-                      </el-tag>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </div>
-            </div>
-          </el-tab-pane>
         </el-tabs>
       </div>
     </div>
@@ -489,7 +164,6 @@
 
 <script>
 import { ref, reactive, computed, onMounted, nextTick } from 'vue'
-import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import {
   Calendar,
@@ -499,31 +173,21 @@
   TrendCharts,
   Star,
   QuestionFilled,
-  Plus,
-  ChatDotRound,
-  Flag,
-  Coin
+  Plus
 } from '@element-plus/icons-vue'
+import Navbar from '@/components/Navbar.vue'
 
 export default {
   name: 'ProfileView',
+  components: {
+    Navbar
+  },
   setup() {
-    const router = useRouter()
-    const profileFormRef = ref(null)
-    const passwordFormRef = ref(null)
-    const avatarUploadRef = ref(null)
-    const interestInputRef = ref(null)
-    
     const activeTab = ref('info')
     const showAvatarDialog = ref(false)
     const saving = ref(false)
-    const changingPassword = ref(false)
     const uploadingAvatar = ref(false)
-    const interestInputVisible = ref(false)
-    const interestInputValue = ref('')
-    const activityFilter = ref('')
-    const torrentsPage = ref(1)
-    
+
     const userProfile = ref({
       username: 'MovieExpert',
       email: 'movieexpert@example.com',
@@ -560,7 +224,7 @@
         totalSpentPoints: '13,260'
       }
     })
-    
+
     const editProfile = reactive({
       username: '',
       email: '',
@@ -573,43 +237,14 @@
       statsPublic: true,
       activityPublic: true
     })
-    
-    const passwordForm = reactive({
-      currentPassword: '',
-      newPassword: '',
-      confirmPassword: ''
-    })
-    
+
     const profileRules = {
       email: [
         { required: true, message: '请输入邮箱地址', trigger: 'blur' },
         { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
       ]
     }
-    
-    const passwordRules = {
-      currentPassword: [
-        { required: true, message: '请输入当前密码', trigger: 'blur' }
-      ],
-      newPassword: [
-        { required: true, message: '请输入新密码', trigger: 'blur' },
-        { min: 6, message: '密码长度至少6个字符', trigger: 'blur' }
-      ],
-      confirmPassword: [
-        { required: true, message: '请确认新密码', trigger: 'blur' },
-        {
-          validator: (rule, value, callback) => {
-            if (value !== passwordForm.newPassword) {
-              callback(new Error('两次输入的密码不一致'))
-            } else {
-              callback()
-            }
-          },
-          trigger: 'blur'
-        }
-      ]
-    }
-    
+
     const locationOptions = [
       {
         value: '北京市',
@@ -630,91 +265,11 @@
         ]
       }
     ]
-    
-    const userTorrents = ref([
-      {
-        id: 1,
-        title: '[4K蓝光原盘] 阿凡达：水之道',
-        category: 'movie',
-        size: '85.6 GB',
-        seeders: 45,
-        leechers: 12,
-        downloads: 234,
-        uploadTime: '2025-05-15T10:00:00'
-      },
-      {
-        id: 2,
-        title: '[FLAC] 古典音乐合集',
-        category: 'music',
-        size: '2.3 GB',
-        seeders: 23,
-        leechers: 5,
-        downloads: 89,
-        uploadTime: '2025-04-20T15:30:00'
-      }
-    ])
-    
-    const activities = ref([
-      {
-        id: 1,
-        type: 'upload',
-        title: '上传种子',
-        description: '上传了《阿凡达：水之道》4K蓝光原盘',
-        time: '2025-06-03T10:30:00'
-      },
-      {
-        id: 2,
-        type: 'download',
-        title: '下载种子',
-        description: '下载了《星际穿越》IMAX版本',
-        time: '2025-06-02T14:20:00'
-      },
-      {
-        id: 3,
-        type: 'post',
-        title: '发布主题',
-        description: '在电影讨论区发布了新主题',
-        time: '2025-06-01T16:45:00'
-      },
-      {
-        id: 4,
-        type: 'points',
-        title: '积分变动',
-        description: '做种奖励获得 +50 积分',
-        time: '2025-05-31T09:15:00'
-      }
-    ])
-    
-    const loginHistory = ref([
-      {
-        time: '2025-06-03T14:30:00',
-        ip: '192.168.1.100',
-        device: 'Windows 11 / Chrome 120',
-        success: true
-      },
-      {
-        time: '2025-06-02T09:15:00',
-        ip: '192.168.1.100',
-        device: 'Windows 11 / Chrome 120',
-        success: true
-      },
-      {
-        time: '2025-06-01T22:30:00',
-        ip: '192.168.1.100',
-        device: 'Android / Chrome Mobile',
-        success: true
-      }
-    ])
-    
-    const filteredActivities = computed(() => {
-      if (!activityFilter.value) return activities.value
-      return activities.value.filter(activity => activity.type === activityFilter.value)
-    })
-    
+
     onMounted(() => {
       loadUserProfile()
     })
-    
+
     const loadUserProfile = () => {
       // 加载用户资料到编辑表单
       Object.assign(editProfile, {
@@ -730,31 +285,26 @@
         activityPublic: userProfile.value.activityPublic
       })
     }
-    
+
     const formatDate = (dateString) => {
       const date = new Date(dateString)
       return date.toLocaleDateString('zh-CN')
     }
-    
+
     const formatTime = (timeString) => {
       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)
       if (days < 7) return `${days}天前`
-      
+
       return date.toLocaleDateString('zh-CN')
     }
-    
-    const formatDateTime = (dateString) => {
-      const date = new Date(dateString)
-      return date.toLocaleString('zh-CN')
-    }
-    
+
     const getUserTitleType = (level) => {
       if (level >= 8) return 'danger'  // 管理员
       if (level >= 6) return 'warning' // 资深会员
@@ -762,79 +312,14 @@
       if (level >= 2) return 'info'    // 初级会员
       return 'default' // 新手
     }
-    
+
     const getRatioClass = (ratio) => {
       const r = parseFloat(ratio)
       if (r >= 2) return 'excellent'
       if (r >= 1) return 'good'
       return 'warning'
     }
-    
-    const getCategoryType = (category) => {
-      const types = {
-        'movie': 'primary',
-        'tv': 'info',
-        'music': 'success',
-        'software': 'warning',
-        'game': 'danger'
-      }
-      return types[category] || 'default'
-    }
-    
-    const getCategoryName = (category) => {
-      const names = {
-        'movie': '电影',
-        'tv': '电视剧',
-        'music': '音乐',
-        'software': '软件',
-        'game': '游戏'
-      }
-      return names[category] || category
-    }
-    
-    const getActivityType = (type) => {
-      const types = {
-        'upload': 'success',
-        'download': 'primary',
-        'post': 'warning',
-        'points': 'info'
-      }
-      return types[type] || 'primary'
-    }
-    
-    const getActivityIcon = (type) => {
-      const icons = {
-        'upload': 'Upload',
-        'download': 'Download',
-        'post': 'ChatDotRound',
-        'points': 'Coin'
-      }
-      return icons[type] || 'Star'
-    }
-    
-    const showInterestInput = () => {
-      interestInputVisible.value = true
-      nextTick(() => {
-        interestInputRef.value?.focus()
-      })
-    }
-    
-    const addInterest = () => {
-      const interest = interestInputValue.value.trim()
-      if (interest && !editProfile.interests.includes(interest)) {
-        editProfile.interests.push(interest)
-      }
-      interestInputVisible.value = false
-      interestInputValue.value = ''
-    }
-    
-    const removeInterest = (interest) => {
-      const index = editProfile.interests.indexOf(interest)
-      if (index > -1) {
-        editProfile.interests.splice(index, 1)
-      }
-    }
-    
+
     const saveProfile = async () => {
       try {
         await profileFormRef.value?.validate()
@@ -855,489 +340,25 @@
         saving.value = false
       }
     }
-    
-    const resetProfile = () => {
-      loadUserProfile()
-      ElMessage.info('已重置为原始数据')
-    }
-    
-    const changePassword = async () => {
-      try {
-        await passwordFormRef.value?.validate()
-        
-        changingPassword.value = true
-        
-        // 模拟密码修改过程
-        await new Promise(resolve => setTimeout(resolve, 1500))
-        
-        // 重置表单
-        passwordFormRef.value?.resetFields()
-        Object.assign(passwordForm, {
-          currentPassword: '',
-          newPassword: '',
-          confirmPassword: ''
-        })
-        
-        ElMessage.success('密码修改成功')
-        
-      } catch (error) {
-        console.error('表单验证失败:', error)
-      } finally {
-        changingPassword.value = false
-      }
-    }
-    
-    const handleAvatarChange = (file) => {
-      const isImage = file.raw.type.startsWith('image/')
-      const isLt2M = file.raw.size / 1024 / 1024 < 2
-      
-      if (!isImage) {
-        ElMessage.error('只能上传图片文件!')
-        return false
-      }
-      if (!isLt2M) {
-        ElMessage.error('图片大小不能超过 2MB!')
-        return false
-      }
-      
-      return true
-    }
-    
-    const uploadAvatar = async () => {
-      const files = avatarUploadRef.value?.uploadFiles
-      if (!files || files.length === 0) {
-        ElMessage.warning('请选择头像文件')
-        return
-      }
-      
-      uploadingAvatar.value = true
-      try {
-        // 模拟上传过程
-        await new Promise(resolve => setTimeout(resolve, 2000))
-        
-        // 更新头像URL
-        userProfile.value.avatar = URL.createObjectURL(files[0].raw)
-        
-        ElMessage.success('头像上传成功')
-        showAvatarDialog.value = false
-        avatarUploadRef.value?.clearFiles()
-        
-      } catch (error) {
-        ElMessage.error('头像上传失败')
-      } finally {
-        uploadingAvatar.value = false
-      }
-    }
-    
+
     return {
       activeTab,
       showAvatarDialog,
       saving,
-      changingPassword,
-      uploadingAvatar,
-      interestInputVisible,
-      interestInputValue,
-      activityFilter,
-      torrentsPage,
       userProfile,
       editProfile,
-      passwordForm,
       profileRules,
-      passwordRules,
       locationOptions,
-      userTorrents,
-      filteredActivities,
-      loginHistory,
-      profileFormRef,
-      passwordFormRef,
-      avatarUploadRef,
-      interestInputRef,
       formatDate,
       formatTime,
-      formatDateTime,
       getUserTitleType,
       getRatioClass,
-      getCategoryType,
-      getCategoryName,
-      getActivityType,
-      getActivityIcon,
-      showInterestInput,
-      addInterest,
-      removeInterest,
-      saveProfile,
-      resetProfile,
-      changePassword,
-      handleAvatarChange,
-      uploadAvatar,
-      Calendar,
-      Clock,
-      Upload,
-      Download,
-      TrendCharts,
-      Star,
-      QuestionFilled,
-      Plus,
-      ChatDotRound,
-      Flag,
-      Coin
+      saveProfile
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
-.profile-page {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 24px;
-  background: #f5f5f5;
-  min-height: 100vh;
-}
-
-.profile-header {
-  background: #fff;
-  border-radius: 12px;
-  padding: 32px;
-  margin-bottom: 24px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 32px;
-  
-  .user-avatar-section {
-    display: flex;
-    gap: 24px;
-    
-    .avatar-container {
-      text-align: center;
-      
-      .change-avatar-btn {
-        margin-top: 12px;
-      }
-    }
-    
-    .user-basic-info {
-      flex: 1;
-      
-      .username {
-        font-size: 28px;
-        font-weight: 600;
-        color: #2c3e50;
-        margin: 0 0 12px 0;
-      }
-      
-      .user-title {
-        margin-bottom: 16px;
-      }
-      
-      .join-info, .last-login {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 14px;
-        color: #7f8c8d;
-        margin-bottom: 8px;
-      }
-    }
-  }
-  
-  .user-stats-overview {
-    .stats-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 16px;
-      
-      .stat-card {
-        background: #f8f9fa;
-        border-radius: 8px;
-        padding: 20px;
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        
-        .stat-icon {
-          width: 48px;
-          height: 48px;
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          
-          &.upload { background: rgba(103, 194, 58, 0.1); color: #67c23a; }
-          &.download { background: rgba(64, 158, 255, 0.1); color: #409eff; }
-          &.ratio {
-            &.excellent { background: rgba(103, 194, 58, 0.1); color: #67c23a; }
-            &.good { background: rgba(230, 162, 60, 0.1); color: #e6a23c; }
-            &.warning { background: rgba(245, 108, 108, 0.1); color: #f56c6c; }
-          }
-          &.points { background: rgba(245, 108, 108, 0.1); color: #f56c6c; }
-        }
-        
-        .stat-info {
-          h3 {
-            font-size: 20px;
-            font-weight: 600;
-            color: #2c3e50;
-            margin: 0 0 4px 0;
-          }
-          
-          p {
-            font-size: 14px;
-            color: #7f8c8d;
-            margin: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-.profile-content {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  
-  :deep(.el-tabs__content) {
-    padding: 24px;
-  }
-}
-
-.info-section {
-  .form-section {
-    margin-bottom: 32px;
-    
-    h3 {
-      font-size: 18px;
-      font-weight: 600;
-      color: #2c3e50;
-      margin: 0 0 20px 0;
-      padding-bottom: 8px;
-      border-bottom: 2px solid #f0f0f0;
-    }
-  }
-  
-  .interests-input {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-items: center;
-    
-    .interest-tag {
-      margin: 0;
-    }
-  }
-  
-  .setting-tip {
-    margin-left: 12px;
-    font-size: 12px;
-    color: #909399;
-  }
-  
-  .form-actions {
-    text-align: center;
-    margin-top: 32px;
-    
-    .el-button {
-      margin: 0 8px;
-      min-width: 100px;
-    }
-  }
-}
-
-.stats-section {
-  .stats-overview {
-    margin-bottom: 32px;
-    
-    .overview-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: 20px;
-      
-      .overview-card {
-        background: #f8f9fa;
-        border-radius: 8px;
-        padding: 24px;
-        
-        h3 {
-          font-size: 16px;
-          font-weight: 600;
-          color: #2c3e50;
-          margin: 0 0 16px 0;
-        }
-        
-        .stat-details {
-          .detail-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 12px;
-            
-            .label {
-              font-size: 14px;
-              color: #7f8c8d;
-            }
-            
-            .value {
-              font-size: 14px;
-              font-weight: 600;
-              color: #2c3e50;
-            }
-          }
-        }
-      }
-    }
-  }
-  
-  .charts-section {
-    .chart-card {
-      background: #f8f9fa;
-      border-radius: 8px;
-      padding: 24px;
-      
-      h3 {
-        font-size: 16px;
-        font-weight: 600;
-        color: #2c3e50;
-        margin: 0 0 20px 0;
-      }
-      
-      .chart-placeholder {
-        text-align: center;
-        padding: 60px 0;
-        color: #909399;
-        
-        p {
-          margin: 12px 0 0 0;
-        }
-      }
-    }
-  }
-}
-
-.torrents-section {
-  .section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-    
-    h3 {
-      font-size: 18px;
-      font-weight: 600;
-      color: #2c3e50;
-      margin: 0;
-    }
-  }
-  
-  .torrent-info {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    
-    .torrent-title {
-      font-weight: 500;
-    }
-  }
-  
-  .pagination-wrapper {
-    margin-top: 16px;
-    text-align: center;
-  }
-}
-
-.activity-section {
-  .activity-filters {
-    margin-bottom: 24px;
-    
-    .el-select {
-      width: 150px;
-    }
-  }
-  
-  .activity-timeline {
-    .activity-content {
-      .activity-header {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin-bottom: 8px;
-        
-        .activity-title {
-          font-weight: 600;
-          color: #2c3e50;
-        }
-      }
-      
-      .activity-description {
-        font-size: 14px;
-        color: #7f8c8d;
-        line-height: 1.5;
-      }
-    }
-  }
-}
-
-.security-section {
-  .security-card {
-    background: #f8f9fa;
-    border-radius: 8px;
-    padding: 24px;
-    margin-bottom: 24px;
-    
-    h3 {
-      font-size: 18px;
-      font-weight: 600;
-      color: #2c3e50;
-      margin: 0 0 20px 0;
-    }
-  }
-}
-
-.avatar-upload {
-  text-align: center;
-  
-  .avatar-uploader {
-    margin-bottom: 16px;
-  }
-  
-  .upload-tips {
-    font-size: 12px;
-    color: #909399;
-    
-    p {
-      margin: 4px 0;
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .profile-page {
-    padding: 16px;
-  }
-  
-  .profile-header {
-    grid-template-columns: 1fr;
-    gap: 24px;
-    
-    .user-avatar-section {
-      flex-direction: column;
-      text-align: center;
-    }
-    
-    .user-stats-overview .stats-grid {
-      grid-template-columns: 1fr;
-    }
-  }
-  
-  .stats-overview .overview-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .torrents-section .section-header {
-    flex-direction: column;
-    gap: 16px;
-    align-items: flex-start;
-  }
-}
-</style>
\ No newline at end of file
+<style scoped>
+/* 添加相关样式 */
+</style>
diff --git a/src/views/forum/ForumView.vue b/src/views/forum/ForumView.vue
index 22345e6..28cdff2 100644
--- a/src/views/forum/ForumView.vue
+++ b/src/views/forum/ForumView.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="forum-page">
+    <Navbar />
     <div class="page-container">
       <!-- 论坛头部 -->
       <div class="forum-header">
@@ -269,9 +270,13 @@
   QuestionFilled,
   Bell
 } from '@element-plus/icons-vue'
+import Navbar from '@/components/Navbar.vue'
 
 export default {
   name: 'ForumView',
+  components:{
+    Navbar
+  },
   setup() {
     const router = useRouter()
     const topicFormRef = ref(null)
diff --git a/src/views/torrent/TorrentsView.vue b/src/views/torrent/TorrentsView.vue
index 3621bb5..34af25d 100644
--- a/src/views/torrent/TorrentsView.vue
+++ b/src/views/torrent/TorrentsView.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="torrents-page">
+    <Navbar />
     <div class="page-header">
       <h1>种子资源</h1>
       <div class="header-actions">
@@ -166,9 +167,13 @@
   Document
 } from '@element-plus/icons-vue'
 import { searchTorrents, getCategories } from '@/api/torrent'
+import Navbar from '@/components/Navbar.vue'
 
 export default {
   name: 'TorrentsView',
+  components:{
+    Navbar
+  },
   setup() {
     const router = useRouter()
     const route = useRoute()
diff --git a/src/views/torrent/UploadView.vue b/src/views/torrent/UploadView.vue
index 9807cd1..490a138 100644
--- a/src/views/torrent/UploadView.vue
+++ b/src/views/torrent/UploadView.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="upload-page">
+    <Navbar />
     <div class="upload-container">
       <h2>上传种子</h2>
       
@@ -102,9 +103,12 @@
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { uploadTorrent, getCategories, getTags } from '@/api/torrent'
-
+import Navbar from '@/components/Navbar.vue'
 export default {
   name: 'UploadView',
+  components: {
+    Navbar
+  },
   setup() {
     const router = useRouter()
     const uploadFormRef = ref(null)