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 | 67 +++++++++++++++++++++++++--------
1 files changed, 50 insertions(+), 17 deletions(-)
diff --git a/web/src/layout/index.vue b/web/src/layout/index.vue
index 88f4c8f..068ac33 100644
--- a/web/src/layout/index.vue
+++ b/web/src/layout/index.vue
@@ -3,7 +3,10 @@
<!-- 椤堕儴鏍� -->
<el-header class="layout-header">
<div class="header-content">
- <span class="system-title">钃夋槗鍒涚鐞嗙郴缁�</span>
+ <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 }}
@@ -26,16 +29,16 @@
<el-aside width="200px" class="layout-aside">
<el-menu
:default-active="$route.path"
- class="sidebar-menu"
router
- background-color="#545c64"
- text-color="#fff"
- active-text-color="#ffd04b"
+ background-color="transparent"
+ text-color="#666666"
+ active-text-color="#1E3A8A"
>
<el-menu-item index="/dashboard">
<el-icon><House /></el-icon>
<span>宸ヤ綔鍙�</span>
</el-menu-item>
+
<el-menu-item index="/activity">
<el-icon><Calendar /></el-icon>
<span>姣旇禌淇℃伅</span>
@@ -60,9 +63,13 @@
<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>鏂伴椈涓庢帹骞�</span>
+ <span>Banner</span>
</el-menu-item>
<el-menu-item index="/region">
<el-icon><Location /></el-icon>
@@ -86,14 +93,11 @@
import { computed } from 'vue'
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 router = useRouter()
-const userInfo = computed(() => ({
- name: '绠＄悊鍛�'
-}))
-
-const currentUserName = computed(() => userInfo.value.name || '鐢ㄦ埛')
+const currentUserName = computed(() => getCurrentUserDisplayName())
const handleCommand = (command: string) => {
switch (command) {
@@ -101,7 +105,9 @@
router.push('/profile')
break
case 'logout':
- localStorage.removeItem('token')
+ // 娓呴櫎鎵�鏈夎璇佹暟鎹�
+ clearAuth()
+ // 璺宠浆鍒扮櫥褰曢〉闈�
router.push('/login')
break
}
@@ -117,11 +123,11 @@
/* 椤堕儴鏍忔牱寮� */
.layout-header {
- background-color: #B3C0D1;
+ background-color: #FFFFFF;
color: #333;
line-height: 60px;
padding: 0 20px;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid #E5E7EB;
}
.header-content {
@@ -131,8 +137,19 @@
height: 100%;
}
+.title-container {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.logo-icon {
+ width: 48px;
+ height: 48px;
+}
+
.system-title {
- font-size: 18px;
+ font-size: 20px;
font-weight: bold;
color: #333;
}
@@ -144,8 +161,9 @@
/* 渚ц竟鏍忔牱寮� */
.layout-aside {
- background-color: #545c64;
+ background-color: #FFFFFF;
height: 100%;
+ border-right: 1px solid #E5E7EB;
}
.sidebar-menu {
@@ -153,9 +171,24 @@
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: #f5f5f5;
+ background-color: #FFFFFF;
padding: 20px;
}
--
Gitblit v1.8.0