From c4938f6f4e839890b032c75c7a57333a6a9157a9 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期四, 06 十一月 2025 17:06:10 +0800
Subject: [PATCH] 添加新闻功能
---
web/src/layout/index.vue | 326 ++++++++++++++++++++++++++++--------------------------
1 files changed, 170 insertions(+), 156 deletions(-)
diff --git a/web/src/layout/index.vue b/web/src/layout/index.vue
index 75d787e..068ac33 100644
--- a/web/src/layout/index.vue
+++ b/web/src/layout/index.vue
@@ -1,54 +1,88 @@
<template>
<el-container class="layout-container">
- <!-- 渚ц竟鏍� -->
- <el-aside width="200px" class="sidebar">
- <div class="logo">
- <h2>钃夋槗鍒�</h2>
+ <!-- 椤堕儴鏍� -->
+ <el-header class="layout-header">
+ <div class="header-content">
+ <div class="title-container">
+ <img src="/logo.jpg" alt="钃夋槗鍒�" class="logo-icon" />
+ <span class="system-title">钃夋槗鍒涙瘮璧涚鐞�</span>
+ </div>
+ <el-dropdown @command="handleCommand">
+ <span class="el-dropdown-link">
+ {{ currentUserName }}
+ <el-icon class="el-icon--right">
+ <arrow-down />
+ </el-icon>
+ </span>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item command="profile">涓汉淇℃伅</el-dropdown-item>
+ <el-dropdown-item command="logout">閫�鍑虹櫥褰�</el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
</div>
- <el-menu
- :default-active="$route.path"
- class="sidebar-menu"
- router
- unique-opened
- >
- <el-menu-item
- v-for="item in menuItems"
- :key="item.path"
- :index="item.path"
+ </el-header>
+
+ <!-- 涓嬫柟瀹瑰櫒锛氬乏渚ц彍鍗� + 鍙充晶鍐呭 -->
+ <el-container class="main-container">
+ <el-aside width="200px" class="layout-aside">
+ <el-menu
+ :default-active="$route.path"
+ router
+ background-color="transparent"
+ text-color="#666666"
+ active-text-color="#1E3A8A"
>
- <el-icon><component :is="item.icon" /></el-icon>
- <span>{{ item.title }}</span>
- </el-menu-item>
- </el-menu>
- </el-aside>
+ <el-menu-item index="/dashboard">
+ <el-icon><House /></el-icon>
+ <span>宸ヤ綔鍙�</span>
+ </el-menu-item>
- <!-- 涓诲唴瀹瑰尯 -->
- <el-container>
- <!-- 椤堕儴瀵艰埅 -->
- <el-header class="header">
- <div class="header-left">
- <h3>{{ currentPageTitle }}</h3>
- </div>
- <div class="header-right">
- <el-dropdown @command="handleCommand">
- <span class="user-info">
- <el-icon><User /></el-icon>
- <span>{{ currentUserName }}</span>
- <el-tag size="small" style="margin-left: 8px">{{ currentUserRole }}</el-tag>
- <el-icon><ArrowDown /></el-icon>
- </span>
- <template #dropdown>
- <el-dropdown-menu>
- <el-dropdown-item command="profile">涓汉淇℃伅</el-dropdown-item>
- <el-dropdown-item command="logout" divided>閫�鍑虹櫥褰�</el-dropdown-item>
- </el-dropdown-menu>
- </template>
- </el-dropdown>
- </div>
- </el-header>
-
- <!-- 涓诲唴瀹� -->
- <el-main class="main-content">
+ <el-menu-item index="/activity">
+ <el-icon><Calendar /></el-icon>
+ <span>姣旇禌淇℃伅</span>
+ </el-menu-item>
+ <el-menu-item index="/judge">
+ <el-icon><User /></el-icon>
+ <span>璇勫绠＄悊</span>
+ </el-menu-item>
+ <el-menu-item index="/rating-scheme">
+ <el-icon><Document /></el-icon>
+ <span>璇勫垎妯℃澘</span>
+ </el-menu-item>
+ <el-menu-item index="/player">
+ <el-icon><UserFilled /></el-icon>
+ <span>鎶ュ悕瀹℃牳</span>
+ </el-menu-item>
+ <el-menu-item index="/project-review">
+ <el-icon><Files /></el-icon>
+ <span>椤圭洰璇勫</span>
+ </el-menu-item>
+ <el-menu-item index="/competition-promotion">
+ <el-icon><TrendCharts /></el-icon>
+ <span>姣旇禌鏅嬬骇</span>
+ </el-menu-item>
+ <el-menu-item index="/news">
+ <el-icon><Document /></el-icon>
+ <span>鏂伴椈绠＄悊</span>
+ </el-menu-item>
+ <el-menu-item index="/carousel">
+ <el-icon><Picture /></el-icon>
+ <span>Banner</span>
+ </el-menu-item>
+ <el-menu-item index="/region">
+ <el-icon><Location /></el-icon>
+ <span>鍖哄煙绠＄悊</span>
+ </el-menu-item>
+ <el-menu-item index="/employee">
+ <el-icon><Avatar /></el-icon>
+ <span>鍛樺伐绠＄悊</span>
+ </el-menu-item>
+ </el-menu>
+ </el-aside>
+
+ <el-main class="layout-main">
<router-view />
</el-main>
</el-container>
@@ -57,136 +91,116 @@
<script setup lang="ts">
import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { getCurrentUserDisplayName, getCurrentUserRoleText, clearAuth } from '@/utils/auth'
+import { useRouter } from 'vue-router'
+import { House, Calendar, User, Document, UserFilled, Files, TrendCharts, Picture, Location, Avatar, ArrowDown } from '@element-plus/icons-vue'
+import { clearAuth, getCurrentUserDisplayName } from '@/utils/auth'
-const route = useRoute()
const router = useRouter()
-// 褰撳墠鐢ㄦ埛淇℃伅
const currentUserName = computed(() => getCurrentUserDisplayName())
-const currentUserRole = computed(() => getCurrentUserRoleText())
-// 鑿滃崟椤�
-const menuItems = [
- { path: '/dashboard', title: '宸ヤ綔鍙�', icon: 'House' },
- { path: '/activity', title: '姣旇禌绠＄悊', icon: 'Trophy' },
- { path: '/judge', title: '璇勫绠＄悊', icon: 'User' },
- { path: '/rating-scheme', title: '璇勫垎妯℃澘', icon: 'Document' },
- { path: '/player', title: '姣旇禌鎶ュ悕', icon: 'UserFilled' },
- { path: '/carousel', title: '鏂伴椈涓庢帹骞�', icon: 'Picture' },
- { path: '/region', title: '鍖哄煙绠＄悊', icon: 'Location' },
- { path: '/employee', title: '鍛樺伐绠＄悊', icon: 'Avatar' }
-]
-
-// 褰撳墠椤甸潰鏍囬
-const currentPageTitle = computed(() => {
- const currentItem = menuItems.find(item => item.path === route.path)
- return currentItem?.title || '钃夋槗鍒涚鐞嗙郴缁�'
-})
-
-// 澶勭悊鐢ㄦ埛鎿嶄綔
-const handleCommand = async (command: string) => {
- if (command === 'logout') {
- try {
- await ElMessageBox.confirm('纭畾瑕侀��鍑虹櫥褰曞悧锛�', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- })
-
+const handleCommand = (command: string) => {
+ switch (command) {
+ case 'profile':
+ router.push('/profile')
+ break
+ case 'logout':
+ // 娓呴櫎鎵�鏈夎璇佹暟鎹�
clearAuth()
- ElMessage.success('閫�鍑虹櫥褰曟垚鍔�')
+ // 璺宠浆鍒扮櫥褰曢〉闈�
router.push('/login')
- } catch {
- // 鐢ㄦ埛鍙栨秷
- }
- } else if (command === 'profile') {
- ElMessage.info('涓汉淇℃伅鍔熻兘寰呭紑鍙�')
+ break
}
}
</script>
-<style lang="scss" scoped>
+<style scoped>
+/* 鏁翠綋甯冨眬瀹瑰櫒 */
.layout-container {
height: 100vh;
+ width: 100vw;
}
-.sidebar {
- background-color: #304156;
- color: white;
-
- .logo {
- height: 60px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-bottom: 1px solid #434a50;
-
- h2 {
- color: white;
- font-size: 18px;
- font-weight: bold;
- }
- }
-
- .sidebar-menu {
- background-color: #304156;
- border-right: none;
-
- :deep(.el-menu-item) {
- color: #bfcbd9;
-
- &:hover {
- background-color: #434a50;
- color: white;
- }
-
- &.is-active {
- background-color: #409eff;
- color: white;
- }
- }
- }
+/* 椤堕儴鏍忔牱寮� */
+.layout-header {
+ background-color: #FFFFFF;
+ color: #333;
+ line-height: 60px;
+ padding: 0 20px;
+ border-bottom: 1px solid #E5E7EB;
}
-.header {
- background-color: white;
- border-bottom: 1px solid #e4e7ed;
+.header-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 100%;
+}
+
+.title-container {
display: flex;
align-items: center;
- justify-content: space-between;
- padding: 0 20px;
-
- .header-left {
- h3 {
- color: #303133;
- font-size: 16px;
- font-weight: 500;
- }
- }
-
- .header-right {
- .user-info {
- display: flex;
- align-items: center;
- cursor: pointer;
- color: #606266;
-
- .el-icon {
- margin: 0 4px;
- }
-
- &:hover {
- color: #409eff;
- }
- }
- }
+ gap: 8px;
}
-.main-content {
- background-color: #f5f5f5;
- min-height: calc(100vh - 60px);
+.logo-icon {
+ width: 48px;
+ height: 48px;
+}
+
+.system-title {
+ font-size: 20px;
+ font-weight: bold;
+ color: #333;
+}
+
+/* 涓昏瀹瑰櫒 */
+.main-container {
+ height: calc(100vh - 60px);
+}
+
+/* 渚ц竟鏍忔牱寮� */
+.layout-aside {
+ background-color: #FFFFFF;
+ height: 100%;
+ border-right: 1px solid #E5E7EB;
+}
+
+.sidebar-menu {
+ height: 100%;
+ border-right: none;
+}
+
+/* 鑿滃崟椤规牱寮� */
+.el-menu-item.is-active {
+ background-color: #3B82F6 !important;
+ color: #FFFFFF !important;
+ border-radius: 6px;
+ margin: 2px 8px;
+}
+
+.el-menu-item:hover {
+ background-color: #EBF4FF !important;
+ color: #1E3A8A !important;
+ border-radius: 6px;
+ margin: 2px 8px;
+}
+
+/* 涓诲唴瀹瑰尯鍩� */
+.layout-main {
+ background-color: #FFFFFF;
+ padding: 20px;
+}
+
+/* 涓嬫媺鑿滃崟鏍峰紡 */
+.el-dropdown-link {
+ cursor: pointer;
+ color: #333;
+ display: flex;
+ align-items: center;
+}
+
+.el-dropdown-link:hover {
+ color: #409eff;
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0