From bfa7d3b23e526809b04299d9c2719c3449aba3be Mon Sep 17 00:00:00 2001
From: longz <longzhaoz@qq.com>
Date: 星期二, 28 四月 2026 10:32:42 +0800
Subject: [PATCH] 小程序图片压缩
---
frontend-admin/src/layouts/MainLayout.vue | 78 ++++++++++++++++++++------------------
1 files changed, 41 insertions(+), 37 deletions(-)
diff --git a/frontend-admin/src/layouts/MainLayout.vue b/frontend-admin/src/layouts/MainLayout.vue
index 632a048..03fd19e 100644
--- a/frontend-admin/src/layouts/MainLayout.vue
+++ b/frontend-admin/src/layouts/MainLayout.vue
@@ -1,6 +1,6 @@
<template>
<el-container class="layout">
- <el-aside width="248px" class="side-wrap">
+ <el-aside width="15.98vw" class="side-wrap">
<div class="brand-block">
<div class="brand-icon"></div>
<div class="brand-name">运维运营管理平台</div>
@@ -11,9 +11,9 @@
unique-opened
router
class="side-menu"
- background-color="#2f63d4"
+ background-color="#245ECC"
text-color="#dce8ff"
- active-text-color="#2f63d4"
+ active-text-color="#245ECC"
>
<el-menu-item v-if="auth.hasPermission('dashboard:page')" index="/dashboard" class="home-item">
<el-icon><House /></el-icon>
@@ -100,22 +100,19 @@
<el-container class="main-shell">
<div class="top-wrap">
<el-header class="header">
- <div class="header-left">
- <div class="header-title">
- <span class="header-dot"></span>
- <span>运维运营管理平台</span>
- </div>
- </div>
+ <div class="header-spacer"></div>
<div class="header-right">
<el-button class="menu-trigger" text>
<el-icon><Operation /></el-icon>
</el-button>
<div class="user-box">
- <el-avatar v-if="auth.avatarUrl" :size="28" :src="auth.avatarUrl" class="hdr-av" />
- <el-avatar v-else :size="28" class="hdr-av">{{ nameInitial }}</el-avatar>
+ <el-avatar v-if="auth.avatarUrl" :size="30" :src="auth.avatarUrl" class="hdr-av" />
+ <el-avatar v-else :size="30" class="hdr-av">{{ nameInitial }}</el-avatar>
<span class="user-name">{{ auth.displayName }}</span>
+ <el-button class="logout-trigger" text @click="confirmLogout">
+ <el-icon><SwitchButton /></el-icon>
+ </el-button>
</div>
- <el-button type="primary" link @click="logout">退出</el-button>
</div>
</el-header>
@@ -161,7 +158,8 @@
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
-import { Document, Grid, House, Operation, Setting, User, UserFilled, Wallet } from "@element-plus/icons-vue";
+import { ElMessageBox } from "element-plus";
+import { Document, Grid, House, Operation, Setting, SwitchButton, User, UserFilled, Wallet } from "@element-plus/icons-vue";
import { useAuthStore } from "../stores/auth";
import http from "../api/http";
@@ -175,6 +173,10 @@
const router = useRouter();
const auth = useAuthStore();
const active = computed(() => route.path);
+const nameInitial = computed(() => {
+ const n = auth.displayName;
+ return n && n.length ? n.slice(0, 1) : "?";
+});
const defaultOpeneds = computed(() => {
const path = route.path;
if (path.startsWith("/system/")) return ["system"];
@@ -210,11 +212,6 @@
"/region/local-units": "属地单位管理",
};
const hiddenTabRouteNames = new Set(["staff-group-detail", "role-detail"]);
-const nameInitial = computed(() => {
- const n = auth.displayName;
- return n && n.length ? n.slice(0, 1) : "?";
-});
-
function resolveRouteTitle() {
if (typeof route.meta.title === "string" && route.meta.title) {
return route.meta.title;
@@ -342,6 +339,19 @@
auth.clear();
router.push("/login");
}
+
+async function confirmLogout() {
+ try {
+ await ElMessageBox.confirm("确认退出当前账号吗？", "退出确认", {
+ confirmButtonText: "确认",
+ cancelButtonText: "取消",
+ type: "warning",
+ });
+ } catch {
+ return;
+ }
+ await logout();
+}
</script>
<style scoped>
@@ -356,7 +366,7 @@
}
.side-wrap {
- background: linear-gradient(180deg, #2f63d4 0%, #2d5fce 100%);
+ background: #245ECC;
color: #fff;
padding: 0 10px 12px;
box-sizing: border-box;
@@ -411,7 +421,7 @@
.side-menu :deep(.el-menu-item.is-active) {
background: #ffffff !important;
- color: #2f63d4 !important;
+ color: #245ECC !important;
}
.side-menu :deep(.el-sub-menu .el-menu-item) {
@@ -449,34 +459,23 @@
display: flex;
align-items: center;
justify-content: space-between;
- height: 44px;
- width: 100%;
+ height: 60px;
+ width: 84vw;
padding: 0 12px 0 14px;
background: #ffffff;
border-bottom: 1px solid #e7edf8;
box-sizing: border-box;
}
-.header-left,
+.header-spacer,
.header-right,
-.user-box,
-.header-title {
+.user-box {
display: flex;
align-items: center;
}
-.header-title {
- gap: 10px;
- color: #3d5d9e;
- font-size: 14px;
- font-weight: 600;
-}
-
-.header-dot {
- width: 18px;
- height: 18px;
- border-radius: 50%;
- background: linear-gradient(135deg, #7ca9ff, #4f7dff);
+.header-spacer {
+ flex: 1 1 auto;
}
.header-right {
@@ -491,6 +490,11 @@
gap: 8px;
}
+.logout-trigger {
+ color: #5e6f95;
+ padding: 0;
+}
+
.user-name {
color: #47587c;
font-size: 13px;
--
Gitblit v1.7.1