导航栏修改
Change-Id: Id3cd4794407eb29625429f78f053907a751f1fa0
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/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 736c92d..f930025 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)