diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..cfa631b
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,36 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<style>
+#app {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  width: 100%;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  overflow-x: hidden;
+}
+</style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..f3d2503
--- /dev/null
+++ b/src/assets/logo.png
Binary files differ
diff --git a/src/assets/styles/global.css b/src/assets/styles/global.css
new file mode 100644
index 0000000..2627700
--- /dev/null
+++ b/src/assets/styles/global.css
@@ -0,0 +1,60 @@
+/* 全局样式文件 */
+:root {
+  --primary-color: #667eea;
+  --primary-dark: #5a6fd8;
+  --secondary-color: #764ba2;
+  --success-color: #67c23a;
+  --warning-color: #e6a23c;
+  --danger-color: #f56c6c;
+  --info-color: #909399;
+  
+  --text-primary: #303133;
+  --text-regular: #606266;
+  --text-secondary: #909399;
+  --text-placeholder: #c0c4cc;
+  
+  --border-color: #dcdfe6;
+  --bg-color: #f5f7fa;
+}
+
+/* 滚动条美化 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a1a1a1;
+}
+
+/* 通用动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* 通用工具类 */
+.text-center {
+  text-align: center;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
new file mode 100644
index 0000000..b9f3c7d
--- /dev/null
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..4aac723
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,22 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+// 引入Element Plus
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+// 全局样式
+import './assets/styles/global.css'
+
+const app = createApp(App)
+
+// 注册所有Element Plus图标
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
+app.use(ElementPlus)
+app.use(router)
+app.mount('#app')
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..5dd4d7b
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,80 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { ElMessage } from 'element-plus'
+
+// 路由组件
+import LoginView from '@/views/auth/LoginView.vue'
+import RegisterView from '@/views/auth/RegisterView.vue'
+import HomeView from '@/views/HomeView.vue'
+
+const routes = [
+  {
+    path: '/',
+    redirect: '/login'
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    component: LoginView,
+    meta: {
+      title: 'PT Tracker - 登录',
+      requiresGuest: true
+    }
+  },
+  {
+    path: '/register',
+    name: 'Register',
+    component: RegisterView,
+    meta: {
+      title: 'PT Tracker - 注册',
+      requiresGuest: true
+    }
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: HomeView,
+    meta: {
+      title: 'PT Tracker - 首页',
+      requiresAuth: true
+    }
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: '/login'
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+// 路由守卫
+router.beforeEach((to, from, next) => {
+  // 设置页面标题
+  if (to.meta.title) {
+    document.title = to.meta.title
+  }
+  
+  // 检查登录状态
+  const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true'
+  
+  console.log(`路由跳转: ${from.path} -> ${to.path}, 登录状态: ${isLoggedIn}`)
+  
+  // 需要登录但未登录
+  if (to.meta.requiresAuth && !isLoggedIn) {
+    ElMessage.warning('请先登录')
+    next('/login')
+    return
+  }
+  
+  // 已登录但访问登录/注册页
+  if (to.meta.requiresGuest && isLoggedIn) {
+    next('/home')
+    return
+  }
+  
+  next()
+})
+
+export default router
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..7f5b89c
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,14 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {
+  },
+  getters: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
new file mode 100644
index 0000000..a3f2d83
--- /dev/null
+++ b/src/views/HomeView.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="home-page">
+    <div class="home-container">
+      <div class="welcome-section">
+        <div class="welcome-card">
+          <div class="welcome-header">
+            <div class="user-avatar">
+              <el-icon size="48" color="#667eea"><UserFilled /></el-icon>
+            </div>
+            <h1 class="welcome-title">🎉 欢迎来到 PT Tracker</h1>
+            <p class="welcome-subtitle" v-if="userInfo.username">
+              欢迎回来，<strong>{{ userInfo.username }}</strong>！
+            </p>
+            <p class="login-time" v-if="userInfo.loginTime">
+              登录时间：{{ formatTime(userInfo.loginTime) }}
+            </p>
+          </div>
+          
+          <div class="feature-grid">
+            <div class="feature-item">
+              <el-icon size="32" color="#67c23a"><Download /></el-icon>
+              <h3>高速下载</h3>
+              <p>享受极速下载体验</p>
+            </div>
+            <div class="feature-item">
+              <el-icon size="32" color="#e6a23c"><Upload /></el-icon>
+              <h3>资源分享</h3>
+              <p>分享优质资源内容</p>
+            </div>
+            <div class="feature-item">
+              <el-icon size="32" color="#f56c6c"><ChatDotRound /></el-icon>
+              <h3>社区交流</h3>
+              <p>与志同道合的朋友交流</p>
+            </div>
+          </div>
+          
+          <div class="action-buttons">
+            <el-button type="primary" size="large" :icon="Search">
+              浏览种子
+            </el-button>
+            <el-button type="success" size="large" :icon="Plus">
+              上传资源
+            </el-button>
+            <el-button type="info" size="large" :icon="Setting">
+              个人设置
+            </el-button>
+            <el-button type="danger" size="large" :icon="SwitchButton" @click="handleLogout">
+              退出登录
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  UserFilled,
+  Download,
+  Upload,
+  ChatDotRound,
+  Search,
+  Plus,
+  Setting,
+  SwitchButton
+} from '@element-plus/icons-vue'
+
+export default {
+  name: 'HomeView',
+  components: {
+    UserFilled
+  },
+  setup() {
+    const router = useRouter()
+    const userInfo = ref({
+      username: '',
+      loginTime: ''
+    })
+    
+    // 获取用户信息
+    onMounted(() => {
+      userInfo.value = {
+        username: localStorage.getItem('username') || '用户',
+        loginTime: localStorage.getItem('loginTime') || ''
+      }
+    })
+    
+    // 格式化时间
+    const formatTime = (timeString) => {
+      if (!timeString) return ''
+      const date = new Date(timeString)
+      return date.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+      })
+    }
+    
+    // 退出登录
+    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,
+      formatTime,
+      handleLogout,
+      Search,
+      Plus,
+      Setting,
+      SwitchButton,
+      Download,
+      Upload,
+      ChatDotRound
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.home-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.home-container {
+  width: 100%;
+  max-width: 800px;
+}
+
+.welcome-section {
+  .welcome-card {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 60px 40px;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    text-align: center;
+    
+    .welcome-header {
+      margin-bottom: 40px;
+      
+      .user-avatar {
+        margin-bottom: 20px;
+      }
+      
+      .welcome-title {
+        font-size: 36px;
+        font-weight: 700;
+        color: #2c3e50;
+        margin-bottom: 12px;
+        letter-spacing: -0.5px;
+      }
+      
+      .welcome-subtitle {
+        font-size: 18px;
+        color: #667eea;
+        margin-bottom: 8px;
+        font-weight: 500;
+        
+        strong {
+          color: #2c3e50;
+        }
+      }
+      
+      .login-time {
+        font-size: 14px;
+        color: #909399;
+        margin: 0;
+      }
+    }
+    
+    .feature-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 30px;
+      margin-bottom: 40px;
+      
+      .feature-item {
+        background: #f8f9fa;
+        padding: 30px 20px;
+        border-radius: 12px;
+        transition: all 0.3s ease;
+        
+        &:hover {
+          transform: translateY(-5px);
+          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        
+        h3 {
+          font-size: 18px;
+          color: #2c3e50;
+          margin: 16px 0 8px 0;
+          font-weight: 600;
+        }
+        
+        p {
+          font-size: 14px;
+          color: #7f8c8d;
+          margin: 0;
+          line-height: 1.5;
+        }
+      }
+    }
+    
+    .action-buttons {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      gap: 16px;
+      
+      .el-button {
+        height: 48px;
+        font-size: 15px;
+        font-weight: 500;
+        border-radius: 10px;
+        
+        :deep(.el-icon) {
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .home-page {
+    padding: 16px;
+  }
+  
+  .welcome-card {
+    padding: 40px 24px !important;
+    
+    .welcome-header .welcome-title {
+      font-size: 28px;
+    }
+    
+    .feature-grid {
+      grid-template-columns: 1fr;
+      gap: 20px;
+    }
+    
+    .action-buttons {
+      grid-template-columns: 1fr;
+      gap: 12px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/auth/LoginView.vue b/src/views/auth/LoginView.vue
new file mode 100644
index 0000000..fb85c70
--- /dev/null
+++ b/src/views/auth/LoginView.vue
@@ -0,0 +1,343 @@
+<template>
+  <div class="login-page">
+    <!-- 背景装饰 -->
+    <div class="bg-decoration">
+      <div class="shape shape-1"></div>
+      <div class="shape shape-2"></div>
+      <div class="shape shape-3"></div>
+    </div>
+    
+    <!-- 登录表单容器 -->
+    <div class="login-container">
+      <div class="login-card">
+        <!-- 头部信息 -->
+        <div class="login-header">
+          <div class="logo">
+            <el-icon size="48" color="#667eea"><Operation /></el-icon>
+          </div>
+          <h1 class="title">PT Tracker</h1>
+          <p class="subtitle">私有种子分享社区</p>
+        </div>
+        
+        <!-- 登录表单 -->
+        <el-form
+          ref="loginFormRef"
+          :model="loginForm"
+          :rules="loginRules"
+          class="login-form"
+          size="large"
+        >
+          <el-form-item prop="username">
+            <el-input
+              v-model="loginForm.username"
+              placeholder="请输入用户名或邮箱"
+              clearable
+              :prefix-icon="User"
+            />
+          </el-form-item>
+          
+          <el-form-item prop="password">
+            <el-input
+              v-model="loginForm.password"
+              type="password"
+              placeholder="请输入密码"
+              show-password
+              :prefix-icon="Lock"
+              @keyup.enter="handleLogin"
+            />
+          </el-form-item>
+          
+          <el-form-item>
+            <div class="login-options">
+              <el-checkbox v-model="rememberMe">记住登录</el-checkbox>
+              <el-link type="primary" :underline="false">忘记密码？</el-link>
+            </div>
+          </el-form-item>
+          
+          <el-form-item>
+            <el-button
+              type="primary"
+              :loading="loading"
+              style="width: 100%"
+              @click="handleLogin"
+            >
+              <span v-if="!loading">登录</span>
+              <span v-else>登录中...</span>
+            </el-button>
+          </el-form-item>
+        </el-form>
+        
+        <!-- 底部链接 -->
+        <div class="login-footer">
+          <span class="footer-text">还没有账号？</span>
+          <el-link 
+            type="primary" 
+            :underline="false"
+            @click="$router.push('/register')"
+          >
+            立即注册
+          </el-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { User, Lock, Operation } from '@element-plus/icons-vue'
+
+export default {
+  name: 'LoginView',
+  components: {
+    Operation
+  },
+  setup() {
+    const router = useRouter()
+    const loginFormRef = ref()
+    const loading = ref(false)
+    const rememberMe = ref(false)
+    
+    // 表单数据
+    const loginForm = reactive({
+      username: '',
+      password: ''
+    })
+    
+    // 验证规则
+    const loginRules = {
+      username: [
+        { required: true, message: '请输入用户名或邮箱', trigger: 'blur' },
+        { min: 3, message: '用户名至少3个字符', trigger: 'blur' }
+      ],
+      password: [
+        { required: true, message: '请输入密码', trigger: 'blur' },
+        { min: 6, message: '密码至少6个字符', trigger: 'blur' }
+      ]
+    }
+    
+    // 登录处理
+    const handleLogin = async () => {
+      try {
+        // 表单验证
+        const valid = await loginFormRef.value.validate()
+        if (!valid) return
+        
+        loading.value = true
+        
+        // 模拟登录API请求
+        await new Promise(resolve => setTimeout(resolve, 1000))
+        
+        // 简单的登录验证（实际项目中应该调用后端API）
+        if (loginForm.username === 'admin' && loginForm.password === '123456') {
+          // 登录成功
+          localStorage.setItem('isLoggedIn', 'true')
+          localStorage.setItem('username', loginForm.username)
+          localStorage.setItem('loginTime', new Date().toISOString())
+          
+          if (rememberMe.value) {
+            localStorage.setItem('rememberLogin', 'true')
+          }
+          
+          ElMessage.success('登录成功！欢迎回来')
+          router.push('/home')
+        } else {
+          ElMessage.error('用户名或密码错误，请重试')
+        }
+        
+      } catch (error) {
+        console.error('登录失败:', error)
+        ElMessage.error('登录失败，请稍后重试')
+      } finally {
+        loading.value = false
+      }
+    }
+    
+    return {
+      loginFormRef,
+      loginForm,
+      loginRules,
+      loading,
+      rememberMe,
+      handleLogin,
+      User,
+      Lock
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.login-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+// 背景装饰
+.bg-decoration {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 1;
+  
+  .shape {
+    position: absolute;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    animation: float 6s ease-in-out infinite;
+    
+    &.shape-1 {
+      width: 200px;
+      height: 200px;
+      top: 10%;
+      left: 10%;
+      animation-delay: 0s;
+    }
+    
+    &.shape-2 {
+      width: 150px;
+      height: 150px;
+      top: 60%;
+      right: 10%;
+      animation-delay: -2s;
+    }
+    
+    &.shape-3 {
+      width: 100px;
+      height: 100px;
+      bottom: 20%;
+      left: 20%;
+      animation-delay: -4s;
+    }
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-20px) rotate(180deg);
+  }
+}
+
+// 登录容器
+.login-container {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  max-width: 420px;
+}
+
+.login-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 40px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  
+  .login-header {
+    text-align: center;
+    margin-bottom: 32px;
+    
+    .logo {
+      margin-bottom: 16px;
+    }
+    
+    .title {
+      font-size: 32px;
+      font-weight: 700;
+      color: #2c3e50;
+      margin-bottom: 8px;
+      letter-spacing: -0.5px;
+    }
+    
+    .subtitle {
+      font-size: 15px;
+      color: #7f8c8d;
+      margin: 0;
+      font-weight: 400;
+    }
+  }
+  
+  .login-form {
+    .el-form-item {
+      margin-bottom: 24px;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    
+    .login-options {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      
+      .el-checkbox {
+        :deep(.el-checkbox__label) {
+          font-size: 14px;
+          color: #606266;
+        }
+      }
+      
+      .el-link {
+        font-size: 14px;
+      }
+    }
+    
+    .el-button {
+      font-size: 16px;
+      font-weight: 500;
+      height: 48px;
+      border-radius: 8px;
+    }
+  }
+  
+  .login-footer {
+    text-align: center;
+    margin-top: 24px;
+    padding-top: 24px;
+    border-top: 1px solid #ebeef5;
+    
+    .footer-text {
+      color: #909399;
+      font-size: 14px;
+      margin-right: 8px;
+    }
+    
+    .el-link {
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .login-page {
+    padding: 16px;
+  }
+  
+  .login-card {
+    padding: 32px 24px;
+    
+    .login-header .title {
+      font-size: 28px;
+    }
+  }
+}
+</style>
diff --git a/src/views/auth/RegisterView.vue b/src/views/auth/RegisterView.vue
new file mode 100644
index 0000000..ad3461d
--- /dev/null
+++ b/src/views/auth/RegisterView.vue
@@ -0,0 +1,375 @@
+<template>
+  <div class="register-page">
+    <!-- 背景装饰 -->
+    <div class="bg-decoration">
+      <div class="shape shape-1"></div>
+      <div class="shape shape-2"></div>
+      <div class="shape shape-3"></div>
+    </div>
+    
+    <!-- 注册表单容器 -->
+    <div class="register-container">
+      <div class="register-card">
+        <!-- 头部信息 -->
+        <div class="register-header">
+          <div class="logo">
+            <el-icon size="48" color="#a8edea"><UserFilled /></el-icon>
+          </div>
+          <h1 class="title">加入 PT Tracker</h1>
+          <p class="subtitle">开始你的资源分享之旅</p>
+        </div>
+        
+        <!-- 注册表单 -->
+        <el-form
+          ref="registerFormRef"
+          :model="registerForm"
+          :rules="registerRules"
+          class="register-form"
+          size="large"
+        >
+          <el-form-item prop="username">
+            <el-input
+              v-model="registerForm.username"
+              placeholder="请输入用户名"
+              clearable
+              :prefix-icon="User"
+            />
+          </el-form-item>
+          
+          <el-form-item prop="email">
+            <el-input
+              v-model="registerForm.email"
+              placeholder="请输入邮箱地址"
+              clearable
+              :prefix-icon="Message"
+            />
+          </el-form-item>
+          
+          <el-form-item prop="password">
+            <el-input
+              v-model="registerForm.password"
+              type="password"
+              placeholder="请输入密码"
+              show-password
+              :prefix-icon="Lock"
+            />
+          </el-form-item>
+          
+          <el-form-item prop="confirmPassword">
+            <el-input
+              v-model="registerForm.confirmPassword"
+              type="password"
+              placeholder="请确认密码"
+              show-password
+              :prefix-icon="Lock"
+            />
+          </el-form-item>
+          
+          <el-form-item prop="agreement">
+            <el-checkbox v-model="registerForm.agreement">
+              我已阅读并同意
+              <el-link type="primary" :underline="false">《用户协议》</el-link>
+              和
+              <el-link type="primary" :underline="false">《隐私政策》</el-link>
+            </el-checkbox>
+          </el-form-item>
+          
+          <el-form-item>
+            <el-button
+              type="primary"
+              :loading="loading"
+              style="width: 100%"
+              @click="handleRegister"
+            >
+              <span v-if="!loading">注册</span>
+              <span v-else>注册中...</span>
+            </el-button>
+          </el-form-item>
+        </el-form>
+        
+        <!-- 底部链接 -->
+        <div class="register-footer">
+          <span class="footer-text">已有账号？</span>
+          <el-link 
+            type="primary" 
+            :underline="false"
+            @click="$router.push('/login')"
+          >
+            立即登录
+          </el-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { User, Lock, Message, UserFilled } from '@element-plus/icons-vue'
+
+export default {
+  name: 'RegisterView',
+  components: {
+    UserFilled
+  },
+  setup() {
+    const router = useRouter()
+    const registerFormRef = ref()
+    const loading = ref(false)
+    
+    // 表单数据
+    const registerForm = reactive({
+      username: '',
+      email: '',
+      password: '',
+      confirmPassword: '',
+      agreement: false
+    })
+    
+    // 自定义验证规则
+    const validateConfirmPassword = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'))
+      } else if (value !== registerForm.password) {
+        callback(new Error('两次输入密码不一致'))
+      } else {
+        callback()
+      }
+    }
+    
+    const validateAgreement = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请先同意用户协议和隐私政策'))
+      } else {
+        callback()
+      }
+    }
+    
+    // 验证规则
+    const registerRules = {
+      username: [
+        { required: true, message: '请输入用户名', trigger: 'blur' },
+        { min: 3, max: 20, message: '用户名长度在3到20个字符', trigger: 'blur' },
+        { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线', trigger: 'blur' }
+      ],
+      email: [
+        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
+      ],
+      password: [
+        { required: true, message: '请输入密码', trigger: 'blur' },
+        { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' },
+        { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]/, message: '密码必须包含大小写字母和数字', trigger: 'blur' }
+      ],
+      confirmPassword: [
+        { required: true, validator: validateConfirmPassword, trigger: 'blur' }
+      ],
+      agreement: [
+        { required: true, validator: validateAgreement, trigger: 'change' }
+      ]
+    }
+    
+    // 注册处理
+    const handleRegister = async () => {
+      try {
+        // 表单验证
+        const valid = await registerFormRef.value.validate()
+        if (!valid) return
+        
+        loading.value = true
+        
+        // 模拟注册API请求
+        await new Promise(resolve => setTimeout(resolve, 1500))
+        
+        // 模拟注册成功
+        ElMessage.success('注册成功！请登录您的账号')
+        
+        // 跳转到登录页
+        router.push('/login')
+        
+      } catch (error) {
+        console.error('注册失败:', error)
+        ElMessage.error('注册失败，请稍后重试')
+      } finally {
+        loading.value = false
+      }
+    }
+    
+    return {
+      registerFormRef,
+      registerForm,
+      registerRules,
+      loading,
+      handleRegister,
+      User,
+      Lock,
+      Message
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.register-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+// 背景装饰（与登录页相同的动画效果）
+.bg-decoration {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 1;
+  
+  .shape {
+    position: absolute;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.15);
+    animation: float 8s ease-in-out infinite;
+    
+    &.shape-1 {
+      width: 180px;
+      height: 180px;
+      top: 15%;
+      left: 15%;
+      animation-delay: 0s;
+    }
+    
+    &.shape-2 {
+      width: 120px;
+      height: 120px;
+      top: 50%;
+      right: 15%;
+      animation-delay: -3s;
+    }
+    
+    &.shape-3 {
+      width: 90px;
+      height: 90px;
+      bottom: 25%;
+      left: 25%;
+      animation-delay: -6s;
+    }
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-15px) rotate(180deg);
+  }
+}
+
+// 注册容器
+.register-container {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  max-width: 420px;
+}
+
+.register-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 40px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  
+  .register-header {
+    text-align: center;
+    margin-bottom: 32px;
+    
+    .logo {
+      margin-bottom: 16px;
+    }
+    
+    .title {
+      font-size: 32px;
+      font-weight: 700;
+      color: #2c3e50;
+      margin-bottom: 8px;
+      letter-spacing: -0.5px;
+    }
+    
+    .subtitle {
+      font-size: 15px;
+      color: #7f8c8d;
+      margin: 0;
+      font-weight: 400;
+    }
+  }
+  
+  .register-form {
+    .el-form-item {
+      margin-bottom: 20px;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    
+    .el-checkbox {
+      :deep(.el-checkbox__label) {
+        font-size: 14px;
+        color: #606266;
+        line-height: 1.5;
+      }
+    }
+    
+    .el-button {
+      font-size: 16px;
+      font-weight: 500;
+      height: 48px;
+      border-radius: 8px;
+    }
+  }
+  
+  .register-footer {
+    text-align: center;
+    margin-top: 24px;
+    padding-top: 24px;
+    border-top: 1px solid #ebeef5;
+    
+    .footer-text {
+      color: #909399;
+      font-size: 14px;
+      margin-right: 8px;
+    }
+    
+    .el-link {
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .register-page {
+    padding: 16px;
+  }
+  
+  .register-card {
+    padding: 32px 24px;
+    
+    .register-header .title {
+      font-size: 28px;
+    }
+  }
+}
+</style>
\ No newline at end of file