调整
This commit is contained in:
@@ -0,0 +1,13 @@
|
||||
import request from '../utils/request'
|
||||
|
||||
/**
|
||||
* 用户登录
|
||||
* @returns {Promise} 菜单数据
|
||||
*/
|
||||
export function userLogin(params) {
|
||||
return request({
|
||||
url: '/auth/login',
|
||||
method: 'post',
|
||||
data: params
|
||||
})
|
||||
}
|
||||
@@ -1,160 +0,0 @@
|
||||
<script setup>
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
|
||||
const layoutStore = useLayoutStore()
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
icon: '🏠',
|
||||
title: '首页',
|
||||
path: '/',
|
||||
},
|
||||
{
|
||||
icon: '📊',
|
||||
title: '数据统计',
|
||||
path: '/dashboard',
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
title: '用户管理',
|
||||
path: '/users',
|
||||
},
|
||||
{
|
||||
icon: '📁',
|
||||
title: '文件管理',
|
||||
path: '/files',
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
title: '系统设置',
|
||||
path: '/settings',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<div class="logo">Admin</div>
|
||||
<div class="logo-text">管理后台</div>
|
||||
</div>
|
||||
|
||||
<nav class="header-nav">
|
||||
<a v-for="item in menuItems" :key="item.path" :href="item.path" class="nav-item"
|
||||
:class="{ active: $route.path === item.path }">
|
||||
<span class="nav-icon">{{ item.icon }}</span>
|
||||
<span class="nav-text">{{ item.title }}</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="header-right">
|
||||
<div class="user-info">
|
||||
<div class="avatar">👤</div>
|
||||
<span class="username">管理员</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.user-info:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
@@ -1,91 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useI18nStore } from '@/stores/modules/i18n'
|
||||
|
||||
const i18nStore = useI18nStore()
|
||||
const showDropdown = ref(false)
|
||||
|
||||
const toggleDropdown = () => {
|
||||
showDropdown.value = !showDropdown.value
|
||||
}
|
||||
|
||||
const handleLanguageChange = (locale) => {
|
||||
i18nStore.setLocale(locale)
|
||||
showDropdown.value = false
|
||||
}
|
||||
|
||||
const closeDropdown = () => {
|
||||
showDropdown.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="language-switcher" @click="toggleDropdown">
|
||||
<span class="language-dropdown">
|
||||
{{ i18nStore.localeLabel }}
|
||||
<svg class="arrow-icon" :class="{ 'rotate': showDropdown }" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" width="16" height="16">
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z" />
|
||||
</svg>
|
||||
</span>
|
||||
<div v-show="showDropdown" class="dropdown-menu">
|
||||
<div v-for="locale in i18nStore.availableLocales" :key="locale.value" class="dropdown-item"
|
||||
@click.stop="handleLanguageChange(locale.value)">
|
||||
{{ locale.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.language-switcher {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.language-dropdown {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.language-dropdown:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.arrow-icon.rotate {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
right: 0;
|
||||
min-width: 120px;
|
||||
background: white;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 8px 16px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
</style>
|
||||
@@ -1,110 +0,0 @@
|
||||
<script setup>
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
|
||||
const layoutStore = useLayoutStore()
|
||||
|
||||
const layouts = [
|
||||
{ id: 'sidebar', name: '侧边栏模式', icon: '📱', description: '经典侧边栏布局' },
|
||||
{ id: 'top-nav', name: '顶部导航', icon: '📋', description: '顶部导航栏布局' },
|
||||
{ id: 'sidebar-top', name: '组合布局', icon: '🔄', description: '顶部导航+侧边栏' },
|
||||
{ id: 'classic', name: '经典布局', icon: '🖥️', description: '传统后台管理布局' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout-switcher">
|
||||
<h3>布局模式</h3>
|
||||
<div class="layout-grid">
|
||||
<div v-for="layout in layouts" :key="layout.id" class="layout-item"
|
||||
:class="{ active: layoutStore.layoutMode === layout.id }" @click="layoutStore.setLayoutMode(layout.id)">
|
||||
<div class="layout-icon">{{ layout.icon }}</div>
|
||||
<div class="layout-info">
|
||||
<div class="layout-name">{{ layout.name }}</div>
|
||||
<div class="layout-desc">{{ layout.description }}</div>
|
||||
</div>
|
||||
<div v-if="layoutStore.layoutMode === layout.id" class="active-badge">✓</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.layout-switcher {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.layout-switcher h3 {
|
||||
margin: 0 0 16px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.layout-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.layout-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layout-item:hover {
|
||||
border-color: #667eea;
|
||||
background: #f8f9ff;
|
||||
}
|
||||
|
||||
.layout-item.active {
|
||||
border-color: #667eea;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||||
}
|
||||
|
||||
.layout-icon {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.layout-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.layout-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.layout-desc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.active-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -1,174 +0,0 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
|
||||
const props = defineProps({
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const layoutStore = useLayoutStore()
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
icon: '🏠',
|
||||
title: '首页',
|
||||
path: '/',
|
||||
},
|
||||
{
|
||||
icon: '📊',
|
||||
title: '数据统计',
|
||||
path: '/dashboard',
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
title: '用户管理',
|
||||
path: '/users',
|
||||
},
|
||||
{
|
||||
icon: '📁',
|
||||
title: '文件管理',
|
||||
path: '/files',
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
title: '系统设置',
|
||||
path: '/settings',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="sidebar" :class="{ collapsed }">
|
||||
<div class="sidebar-header">
|
||||
<div class="logo">Admin</div>
|
||||
<div v-if="!collapsed" class="logo-text">管理后台</div>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<a v-for="item in menuItems" :key="item.path" :href="item.path" class="nav-item"
|
||||
:class="{ active: $route.path === item.path }">
|
||||
<span class="nav-icon">{{ item.icon }}</span>
|
||||
<span v-if="!collapsed" class="nav-text">{{ item.title }}</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="toggle-btn" @click="layoutStore.toggleSidebar()">
|
||||
<span v-if="collapsed">➡️</span>
|
||||
<span v-else>⬅️</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #2c3e50 0%, #1a252f 100%);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: width 0.3s ease;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.collapsed .sidebar-header {
|
||||
padding: 20px 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
padding: 20px 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
margin: 0 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.collapsed .nav-item {
|
||||
padding: 12px;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.collapsed .nav-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
margin-left: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.toggle-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<a-breadcrumb class="breadcrumb">
|
||||
<a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
|
||||
<span v-if="index === breadcrumbList.length - 1" class="no-redirect">
|
||||
{{ item.meta.title }}
|
||||
</span>
|
||||
<a v-else @click.prevent="handleLink(item)">
|
||||
{{ item.meta.title }}
|
||||
</a>
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const breadcrumbList = ref([])
|
||||
|
||||
// 获取面包屑列表
|
||||
const getBreadcrumb = () => {
|
||||
let matched = route.matched.filter(item => item.meta && item.meta.title)
|
||||
|
||||
// 如果第一个不是首页，添加首页
|
||||
const first = matched[0]
|
||||
if (first && first.path !== '/') {
|
||||
matched = [{ path: '/', meta: { title: '首页' } }].concat(matched)
|
||||
}
|
||||
|
||||
breadcrumbList.value = matched
|
||||
}
|
||||
|
||||
// 处理点击面包屑
|
||||
const handleLink = (item) => {
|
||||
router.push(item.path)
|
||||
}
|
||||
|
||||
// 监听路由变化
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
getBreadcrumb()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.breadcrumb {
|
||||
font-size: 14px;
|
||||
|
||||
.no-redirect {
|
||||
color: #97a8be;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+119
-156
@@ -1,171 +1,134 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
import Sidebar from './components/Sidebar.vue'
|
||||
import Header from './components/Header.vue'
|
||||
|
||||
const layoutStore = useLayoutStore()
|
||||
|
||||
const layoutMode = computed(() => layoutStore.layoutMode)
|
||||
const sidebarCollapsed = computed(() => layoutStore.sidebarCollapsed)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout" :class="`layout-${layoutMode}`">
|
||||
<!-- 模式1: 侧边栏模式 (左侧侧边栏 + 右侧内容) -->
|
||||
<template v-if="layoutMode === 'sidebar'">
|
||||
<Sidebar :collapsed="sidebarCollapsed" />
|
||||
<main class="main-content" :class="{ collapsed: sidebarCollapsed }">
|
||||
<div class="content-wrapper">
|
||||
<router-view />
|
||||
</div>
|
||||
</main>
|
||||
<a-layout class="app-wrapper" :class="layoutClass">
|
||||
<!-- 默认布局：左侧双栏布局 -->
|
||||
<template v-if="layoutMode === 'default'">
|
||||
<a-layout-sider theme="dark" width="70"></a-layout-sider>
|
||||
<a-layout-sider theme="light"></a-layout-sider>
|
||||
<a-layout>
|
||||
<a-layout-header class="app-header">
|
||||
<breadcrumb />
|
||||
</a-layout-header>
|
||||
<a-layout-content><router-view></router-view></a-layout-content>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<!-- 模式2: 顶部导航模式 (顶部导航 + 下方内容) -->
|
||||
<template v-else-if="layoutMode === 'top-nav'">
|
||||
<Header />
|
||||
<main class="main-content top-nav-mode">
|
||||
<div class="content-wrapper">
|
||||
<router-view />
|
||||
</div>
|
||||
</main>
|
||||
<!-- Menu布局：左侧菜单栏布局 -->
|
||||
<template v-else-if="layoutMode === 'menu'">
|
||||
</template>
|
||||
|
||||
<!-- 模式3: 组合布局 (顶部导航 + 侧边栏 + 内容) -->
|
||||
<template v-else-if="layoutMode === 'sidebar-top'">
|
||||
<Header />
|
||||
<div class="sidebar-top-container">
|
||||
<Sidebar :collapsed="sidebarCollapsed" />
|
||||
<main class="main-content" :class="{ collapsed: sidebarCollapsed, 'sidebar-top': true }">
|
||||
<div class="content-wrapper">
|
||||
<router-view />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<!-- Top布局：顶部菜单栏布局 -->
|
||||
<template v-else-if="layoutMode === 'top'">
|
||||
</template>
|
||||
|
||||
<!-- 模式4: 经典布局 (顶部header + 侧边栏 + 内容，类似传统后台) -->
|
||||
<template v-else-if="layoutMode === 'classic'">
|
||||
<div class="classic-header">
|
||||
<div class="classic-logo">Admin</div>
|
||||
<div class="classic-title">管理系统</div>
|
||||
</div>
|
||||
<div class="classic-container">
|
||||
<Sidebar :collapsed="sidebarCollapsed" />
|
||||
<main class="main-content" :class="{ collapsed: sidebarCollapsed, classic: true }">
|
||||
<div class="content-wrapper">
|
||||
<router-view />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.layout {
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { RouterView } from 'vue-router'
|
||||
import breadcrumb from './components/breadcrumb.vue';
|
||||
|
||||
const layoutMode = ref('default')
|
||||
const layoutClass = ref('layout-default')
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 侧边栏模式 */
|
||||
.layout-sidebar .main-content {
|
||||
flex: 1;
|
||||
margin-left: 0;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
.layout-sidebar .main-content.collapsed {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* 顶部导航模式 */
|
||||
.layout-top-nav .main-content.top-nav-mode {
|
||||
flex: 1;
|
||||
margin-top: 60px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 组合布局 */
|
||||
.sidebar-top-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
.layout-sidebar-top .main-content.sidebar-top {
|
||||
flex: 1;
|
||||
margin-left: 0;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
.layout-sidebar-top .main-content.sidebar-top.collapsed {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* 经典布局 */
|
||||
.classic-header {
|
||||
height: 50px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
color: white;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.classic-logo {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.classic-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.classic-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
|
||||
.layout-classic .main-content.classic {
|
||||
flex: 1;
|
||||
margin-left: 0;
|
||||
background: #f0f2f5;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
.layout-classic .main-content.classic.collapsed {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* 通用主内容区域样式 */
|
||||
.main-content {
|
||||
overflow-y: auto;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
padding: 24px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.layout-sidebar .main-content,
|
||||
.layout-sidebar-top .main-content.sidebar-top,
|
||||
.layout-classic .main-content.classic {
|
||||
margin-left: 0 !important;
|
||||
.app-header {
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
padding-inline: 20px;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
padding: 16px;
|
||||
/* 默认布局 */
|
||||
&.layout-default {
|
||||
flex-direction: row;
|
||||
|
||||
.main-container {
|
||||
margin-left: 200px;
|
||||
|
||||
&.has-sidebar {
|
||||
margin-left: 200px;
|
||||
}
|
||||
|
||||
.fixed-header {
|
||||
width: calc(100% - 200px);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-collapse {
|
||||
.main-container {
|
||||
margin-left: 64px;
|
||||
|
||||
.fixed-header {
|
||||
width: calc(100% - 64px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Menu布局 */
|
||||
&.layout-menu {
|
||||
.main-container {
|
||||
margin-left: 200px;
|
||||
|
||||
&.has-sidebar {
|
||||
margin-left: 200px;
|
||||
}
|
||||
|
||||
.fixed-header {
|
||||
width: calc(100% - 200px);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-collapse {
|
||||
.main-container {
|
||||
margin-left: 64px;
|
||||
|
||||
.fixed-header {
|
||||
width: calc(100% - 64px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Top布局 */
|
||||
&.layout-top {
|
||||
.top-layout-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.top-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
.top-main {
|
||||
padding-top: 50px;
|
||||
|
||||
.top-userbar {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
z-index: 1001;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
padding-top: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
<script setup>
|
||||
import LayoutSwitcher from '@/layouts/components/LayoutSwitcher.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<h1 class="page-title">欢迎回来，管理员！</h1>
|
||||
|
||||
<LayoutSwitcher />
|
||||
|
||||
<div class="dashboard-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">👥</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import i18n from '@/i18n'
|
||||
import { customStorage } from '../persist'
|
||||
|
||||
export const useI18nStore = defineStore(
|
||||
'i18n',
|
||||
@@ -28,7 +29,7 @@ export const useI18nStore = defineStore(
|
||||
|
||||
persist: {
|
||||
key: 'i18n-store',
|
||||
storage: localStorage,
|
||||
storage: customStorage,
|
||||
pick: ['currentLocale']
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { customStorage } from '../persist'
|
||||
|
||||
export const useLayoutStore = defineStore(
|
||||
'layout',
|
||||
() => {
|
||||
// 布局模式：'sidebar', 'top-nav', 'sidebar-top', 'classic'
|
||||
const layoutMode = ref('sidebar')
|
||||
// 布局模式：'default', 'menu', 'top'
|
||||
const layoutMode = ref('default')
|
||||
|
||||
// 侧边栏折叠状态
|
||||
const sidebarCollapsed = ref(false)
|
||||
@@ -60,7 +61,7 @@ export const useLayoutStore = defineStore(
|
||||
{
|
||||
persist: {
|
||||
key: 'layout-store',
|
||||
storage: localStorage,
|
||||
storage: customStorage,
|
||||
pick: ['layoutMode', 'sidebarCollapsed']
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import { resetRouter } from '../../router'
|
||||
import { customStorage } from '../persist'
|
||||
|
||||
export const useUserStore = defineStore(
|
||||
'user',
|
||||
@@ -74,7 +75,7 @@ export const useUserStore = defineStore(
|
||||
{
|
||||
persist: {
|
||||
key: 'user-store',
|
||||
storage: localStorage,
|
||||
storage: customStorage,
|
||||
pick: ['token', 'refreshToken', 'userInfo', 'menu']
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
/*
|
||||
* @Descripttion: Pinia 持久化存储适配器 - 使用 tool.data 封装的 localStorage
|
||||
* @version: 1.0
|
||||
*/
|
||||
|
||||
import tool from '@/utils/tool'
|
||||
|
||||
/**
|
||||
* 自定义存储适配器
|
||||
* 使用 tool.data 的 set/get/remove 方法，支持加密和过期时间
|
||||
*/
|
||||
export const customStorage = {
|
||||
/**
|
||||
* 获取数据
|
||||
* @param {string} key - 存储键
|
||||
* @returns {any} - 存储的数据
|
||||
*/
|
||||
getItem: (key) => {
|
||||
return tool.data.get(key)
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置数据
|
||||
* @param {string} key - 存储键
|
||||
* @param {any} value - 要存储的值
|
||||
*/
|
||||
setItem: (key, value) => {
|
||||
tool.data.set(key, value)
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除数据
|
||||
* @param {string} key - 存储键
|
||||
*/
|
||||
removeItem: (key) => {
|
||||
tool.data.remove(key)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 默认持久化配置
|
||||
*/
|
||||
export const defaultPersistConfig = {
|
||||
storage: customStorage,
|
||||
// 可以在这里添加其他全局配置，如过期时间等
|
||||
// serializer: {
|
||||
// serialize: (state) => JSON.stringify(state),
|
||||
// deserialize: (value) => JSON.parse(value)
|
||||
// }
|
||||
}
|
||||
@@ -1,136 +0,0 @@
|
||||
import routesConfig from '../config/routes'
|
||||
|
||||
/**
|
||||
* 合并静态菜单和后端菜单
|
||||
* @param {Array} backendMenus - 后端返回的菜单
|
||||
* @returns {Array} 合并后的菜单
|
||||
*/
|
||||
export function mergeMenus(backendMenus = []) {
|
||||
// 深拷贝静态菜单
|
||||
const staticMenus = JSON.parse(JSON.stringify(routesConfig.userRoutes || []))
|
||||
|
||||
// 如果后端菜单为空，直接返回静态菜单
|
||||
if (!backendMenus || backendMenus.length === 0) {
|
||||
return staticMenus
|
||||
}
|
||||
|
||||
// 创建菜单映射，用于去重
|
||||
const menuMap = new Map()
|
||||
|
||||
// 添加静态菜单
|
||||
staticMenus.forEach(menu => {
|
||||
menuMap.set(menu.path, menu)
|
||||
})
|
||||
|
||||
// 添加后端菜单，如果路径重复则覆盖
|
||||
backendMenus.forEach(menu => {
|
||||
if (menu.path) {
|
||||
menuMap.set(menu.path, menu)
|
||||
}
|
||||
})
|
||||
|
||||
// 返回合并后的菜单数组
|
||||
return Array.from(menuMap.values())
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据路由生成菜单树
|
||||
* @param {Array} routes - 路由数组
|
||||
* @returns {Array} 菜单树
|
||||
*/
|
||||
export function generateMenuTree(routes) {
|
||||
if (!routes || !Array.isArray(routes)) {
|
||||
return []
|
||||
}
|
||||
|
||||
return routes
|
||||
.filter(route => {
|
||||
// 过滤掉隐藏的路由和没有 meta 的路由
|
||||
return !route.meta?.hidden && route.meta?.title
|
||||
})
|
||||
.map(route => {
|
||||
const menu = {
|
||||
path: route.path,
|
||||
name: route.name,
|
||||
meta: {
|
||||
title: route.meta.title,
|
||||
icon: route.meta.icon
|
||||
}
|
||||
}
|
||||
|
||||
// 处理子路由
|
||||
if (route.children && route.children.length > 0) {
|
||||
const children = generateMenuTree(route.children)
|
||||
if (children.length > 0) {
|
||||
menu.children = children
|
||||
}
|
||||
}
|
||||
|
||||
return menu
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据权限过滤菜单
|
||||
* @param {Array} menus - 菜单数组
|
||||
* @param {Array} roles - 用户角色
|
||||
* @returns {Array} 过滤后的菜单
|
||||
*/
|
||||
export function filterMenusByRole(menus, roles = []) {
|
||||
if (!menus || !Array.isArray(menus)) {
|
||||
return []
|
||||
}
|
||||
|
||||
return menus
|
||||
.filter(menu => {
|
||||
// 如果菜单没有角色要求，直接显示
|
||||
if (!menu.meta?.role || menu.meta.role.length === 0) {
|
||||
return true
|
||||
}
|
||||
|
||||
// 检查用户是否有菜单要求的任一角色
|
||||
return menu.meta.role.some(role => roles.includes(role))
|
||||
})
|
||||
.map(menu => {
|
||||
// 递归处理子菜单
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
const filteredChildren = filterMenusByRole(menu.children, roles)
|
||||
menu.children = filteredChildren
|
||||
|
||||
// 如果过滤后没有子菜单，且菜单本身没有组件，则隐藏此菜单
|
||||
if (filteredChildren.length === 0 && !menu.component) {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
return menu
|
||||
})
|
||||
.filter(menu => menu !== null)
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据路径查找菜单
|
||||
* @param {Array} menus - 菜单数组
|
||||
* @param {string} path - 路径
|
||||
* @returns {Object|null} 找到的菜单对象
|
||||
*/
|
||||
export function findMenuByPath(menus, path) {
|
||||
if (!menus || !Array.isArray(menus)) {
|
||||
return null
|
||||
}
|
||||
|
||||
for (const menu of menus) {
|
||||
if (menu.path === path) {
|
||||
return menu
|
||||
}
|
||||
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
const found = findMenuByPath(menu.children, path)
|
||||
if (found) {
|
||||
return found
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
Reference in New Issue
Block a user