更新
This commit is contained in:
@@ -1,15 +1,17 @@
|
||||
<template><el-breadcrumb separator="/">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
|
||||
<span v-if="index === breadcrumbs.length - 1" class="no-redirect">
|
||||
{{ item.meta?.title }}
|
||||
</span>
|
||||
<a v-else class="redirect" @click.prevent="handleLink(item)">
|
||||
{{ item.meta?.title }}
|
||||
</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
</el-breadcrumb></template>
|
||||
<template>
|
||||
<el-breadcrumb separator="/">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
|
||||
<span v-if="index === breadcrumbs.length - 1" class="no-redirect">
|
||||
{{ item.meta?.title }}
|
||||
</span>
|
||||
<a v-else class="redirect" @click.prevent="handleLink(item)">
|
||||
{{ item.meta?.title }}
|
||||
</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
@@ -1,26 +1,28 @@
|
||||
<template><template v-for="menu in menuList" :key="menu.path">
|
||||
<!-- 有子菜单 -->
|
||||
<el-sub-menu v-if="hasChildren(menu) && !menu.meta?.hidden" :index="menu.path">
|
||||
<template #title>
|
||||
<template>
|
||||
<template v-for="menu in menuList" :key="menu.path">
|
||||
<!-- 有子菜单 -->
|
||||
<el-sub-menu v-if="hasChildren(menu) && !menu.meta?.hidden" :index="menu.path">
|
||||
<template #title>
|
||||
<el-icon v-if="menu.meta?.icon">
|
||||
<component :is="menu.meta.icon" />
|
||||
</el-icon>
|
||||
<span>{{ menu.meta?.title }}</span>
|
||||
</template>
|
||||
<!-- 递归渲染子菜单 -->
|
||||
<menu-item :menu-list="menu.children" :parent-path="menu.path" />
|
||||
</el-sub-menu>
|
||||
|
||||
<!-- 无子菜单 -->
|
||||
<el-menu-item v-else-if="!menu.meta?.hidden" :index="menu.path">
|
||||
<el-icon v-if="menu.meta?.icon">
|
||||
<component :is="menu.meta.icon" />
|
||||
</el-icon>
|
||||
<span>{{ menu.meta?.title }}</span>
|
||||
</template>
|
||||
<!-- 递归渲染子菜单 -->
|
||||
<menu-item :menu-list="menu.children" :parent-path="menu.path" />
|
||||
</el-sub-menu>
|
||||
|
||||
<!-- 无子菜单 -->
|
||||
<el-menu-item v-else-if="!menu.meta?.hidden" :index="menu.path">
|
||||
<el-icon v-if="menu.meta?.icon">
|
||||
<component :is="menu.meta.icon" />
|
||||
</el-icon>
|
||||
<template #title>
|
||||
<span>{{ menu.meta?.title }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template></template>
|
||||
<template #title>
|
||||
<span>{{ menu.meta?.title }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineOptions({
|
||||
|
||||
@@ -1,29 +1,30 @@
|
||||
<template><el-menu :default-active="activeMenu" :mode="menuMode" :collapse="isCollapse" :unique-opened="uniqueOpened"
|
||||
:router="true" :collapse-transition="false" @select="handleSelect">
|
||||
<template v-for="menu in menuList" :key="menu.path">
|
||||
<!-- 有子菜单 -->
|
||||
<el-sub-menu v-if="hasChildren(menu) && !menu.meta?.hidden" :index="menu.path">
|
||||
<template #title>
|
||||
<template>
|
||||
<el-menu :default-active="activeMenu" :mode="menuMode" :collapse="isCollapse" :unique-opened="uniqueOpened" :router="true" :collapse-transition="false" @select="handleSelect">
|
||||
<template v-for="menu in menuList" :key="menu.path">
|
||||
<!-- 有子菜单 -->
|
||||
<el-sub-menu v-if="hasChildren(menu) && !menu.meta?.hidden" :index="menu.path">
|
||||
<template #title>
|
||||
<el-icon v-if="menu.meta?.icon">
|
||||
<component :is="menu.meta.icon" />
|
||||
</el-icon>
|
||||
<span>{{ menu.meta?.title }}</span>
|
||||
</template>
|
||||
<!-- 递归渲染子菜单 -->
|
||||
<menu-item :menu-list="menu.children" :parent-path="menu.path" />
|
||||
</el-sub-menu>
|
||||
|
||||
<!-- 无子菜单 -->
|
||||
<el-menu-item v-else-if="!menu.meta?.hidden" :index="menu.path">
|
||||
<el-icon v-if="menu.meta?.icon">
|
||||
<component :is="menu.meta.icon" />
|
||||
</el-icon>
|
||||
<span>{{ menu.meta?.title }}</span>
|
||||
</template>
|
||||
<!-- 递归渲染子菜单 -->
|
||||
<menu-item :menu-list="menu.children" :parent-path="menu.path" />
|
||||
</el-sub-menu>
|
||||
|
||||
<!-- 无子菜单 -->
|
||||
<el-menu-item v-else-if="!menu.meta?.hidden" :index="menu.path">
|
||||
<el-icon v-if="menu.meta?.icon">
|
||||
<component :is="menu.meta.icon" />
|
||||
</el-icon>
|
||||
<template #title>
|
||||
<span>{{ menu.meta?.title }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-menu></template>
|
||||
<template #title>
|
||||
<span>{{ menu.meta?.title }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
@@ -1,150 +1,140 @@
|
||||
<template>
|
||||
<div class="setting-container">
|
||||
<!-- 设置按钮 -->
|
||||
<div class="setting-btn" @click="showDrawer = true">
|
||||
<el-icon>
|
||||
<Setting />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<!-- 设置抽屉 -->
|
||||
<el-drawer v-model="showDrawer" title="系统设置" :size="300" :close-on-click-modal="false">
|
||||
<div class="setting-content">
|
||||
<!-- 布局模式 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">布局模式</div>
|
||||
<div class="setting-value">
|
||||
<el-radio-group v-model="layoutMode" @change="handleLayoutModeChange">
|
||||
<el-radio label="default">
|
||||
<div class="layout-option">
|
||||
<div class="layout-preview layout-default">
|
||||
<div class="layout-aside-left"></div>
|
||||
<div class="layout-aside-right"></div>
|
||||
<div class="layout-main"></div>
|
||||
</div>
|
||||
<span>双栏布局</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
<el-radio label="menu">
|
||||
<div class="layout-option">
|
||||
<div class="layout-preview layout-menu">
|
||||
<div class="layout-aside"></div>
|
||||
<div class="layout-main"></div>
|
||||
</div>
|
||||
<span>菜单布局</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
<el-radio label="top">
|
||||
<div class="layout-option">
|
||||
<div class="layout-preview layout-top">
|
||||
<div class="layout-header"></div>
|
||||
<div class="layout-main"></div>
|
||||
</div>
|
||||
<span>顶部布局</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主题色 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">主题色</div>
|
||||
<div class="setting-value">
|
||||
<div class="color-picker-wrapper">
|
||||
<el-color-picker v-model="themeColor" show-alpha :predefine="predefineColors"
|
||||
@change="handleThemeColorChange" />
|
||||
</div>
|
||||
<div class="color-presets">
|
||||
<div v-for="color in predefineColors" :key="color" class="color-preset"
|
||||
:class="{ active: themeColor === color }" :style="{ backgroundColor: color }"
|
||||
@click="handleColorPresetClick(color)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主题模式 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">主题模式</div>
|
||||
<div class="setting-value">
|
||||
<el-radio-group v-model="isDark" @change="handleThemeModeChange">
|
||||
<el-radio :label="false">
|
||||
<el-icon>
|
||||
<Sunny />
|
||||
</el-icon>
|
||||
浅色
|
||||
</el-radio>
|
||||
<el-radio :label="true">
|
||||
<el-icon>
|
||||
<Moon />
|
||||
</el-icon>
|
||||
深色
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签栏 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">
|
||||
<span>显示标签栏</span>
|
||||
<el-tooltip content="开启后页面顶部显示标签页" placement="top">
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="setting-value">
|
||||
<el-switch v-model="showTags" @change="handleShowTagsChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 面包屑 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">
|
||||
<span>显示面包屑</span>
|
||||
<el-tooltip content="开启后页面顶部显示面包屑导航" placement="top">
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="setting-value">
|
||||
<el-switch v-model="showBreadcrumb" @change="handleShowBreadcrumbChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="setting-actions">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<Check />
|
||||
</el-icon>
|
||||
保存配置
|
||||
</el-button>
|
||||
<el-button @click="handleReset">
|
||||
<el-icon>
|
||||
<RefreshLeft />
|
||||
</el-icon>
|
||||
重置默认
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="setting-container">
|
||||
<!-- 设置按钮 -->
|
||||
<div class="setting-btn" @click="showDrawer = true">
|
||||
<el-icon>
|
||||
<Setting />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
|
||||
<!-- 设置抽屉 -->
|
||||
<el-drawer v-model="showDrawer" title="系统设置" :size="300" :close-on-click-modal="false">
|
||||
<div class="setting-content">
|
||||
<!-- 布局模式 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">布局模式</div>
|
||||
<div class="setting-value">
|
||||
<el-radio-group v-model="layoutMode" @change="handleLayoutModeChange">
|
||||
<el-radio label="default">
|
||||
<div class="layout-option">
|
||||
<div class="layout-preview layout-default">
|
||||
<div class="layout-aside-left"></div>
|
||||
<div class="layout-aside-right"></div>
|
||||
<div class="layout-main"></div>
|
||||
</div>
|
||||
<span>双栏布局</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
<el-radio label="menu">
|
||||
<div class="layout-option">
|
||||
<div class="layout-preview layout-menu">
|
||||
<div class="layout-aside"></div>
|
||||
<div class="layout-main"></div>
|
||||
</div>
|
||||
<span>菜单布局</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
<el-radio label="top">
|
||||
<div class="layout-option">
|
||||
<div class="layout-preview layout-top">
|
||||
<div class="layout-header"></div>
|
||||
<div class="layout-main"></div>
|
||||
</div>
|
||||
<span>顶部布局</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主题色 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">主题色</div>
|
||||
<div class="setting-value">
|
||||
<div class="color-picker-wrapper">
|
||||
<el-color-picker v-model="themeColor" show-alpha :predefine="predefineColors" @change="handleThemeColorChange" />
|
||||
</div>
|
||||
<div class="color-presets">
|
||||
<div v-for="color in predefineColors" :key="color" class="color-preset" :class="{ active: themeColor === color }" :style="{ backgroundColor: color }" @click="handleColorPresetClick(color)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主题模式 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">主题模式</div>
|
||||
<div class="setting-value">
|
||||
<el-radio-group v-model="isDark" @change="handleThemeModeChange">
|
||||
<el-radio :label="false">
|
||||
<el-icon>
|
||||
<Sunny />
|
||||
</el-icon>
|
||||
浅色
|
||||
</el-radio>
|
||||
<el-radio :label="true">
|
||||
<el-icon>
|
||||
<Moon />
|
||||
</el-icon>
|
||||
深色
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签栏 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">
|
||||
<span>显示标签栏</span>
|
||||
<el-tooltip content="开启后页面顶部显示标签页" placement="top">
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="setting-value">
|
||||
<el-switch v-model="showTags" @change="handleShowTagsChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 面包屑 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">
|
||||
<span>显示面包屑</span>
|
||||
<el-tooltip content="开启后页面顶部显示面包屑导航" placement="top">
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="setting-value">
|
||||
<el-switch v-model="showBreadcrumb" @change="handleShowBreadcrumbChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="setting-actions">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<Check />
|
||||
</el-icon>
|
||||
保存配置
|
||||
</el-button>
|
||||
<el-button @click="handleReset">
|
||||
<el-icon>
|
||||
<RefreshLeft />
|
||||
</el-icon>
|
||||
重置默认
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
Setting,
|
||||
Sunny,
|
||||
Moon,
|
||||
QuestionFilled,
|
||||
Check,
|
||||
RefreshLeft,
|
||||
} from '@element-plus/icons-vue'
|
||||
import { Setting, Sunny, Moon, QuestionFilled, Check, RefreshLeft } from '@element-plus/icons-vue'
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
|
||||
defineOptions({
|
||||
@@ -267,7 +257,6 @@ onMounted(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.setting-container {
|
||||
|
||||
// 设置按钮
|
||||
.setting-btn {
|
||||
position: fixed;
|
||||
@@ -321,7 +310,6 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.setting-value {
|
||||
|
||||
// 布局选项
|
||||
:deep(.el-radio-group) {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,43 +1,41 @@
|
||||
<template>
|
||||
<div class="tags-view-container">
|
||||
<el-scrollbar class="tags-view-wrapper">
|
||||
<router-link v-for="tag in visibleTags" :key="tag.fullPath" :class="isActive(tag) ? 'active' : ''"
|
||||
class="tags-view-item" :to="{ path: tag.fullPath }" @click.middle="closeTag(tag)"
|
||||
@contextmenu.prevent="openMenu(tag, $event)">
|
||||
{{ tag.title || tag.meta?.title }}
|
||||
<el-icon v-if="!tag.meta?.affix" class="el-icon-close" @click.prevent.stop="closeTag(tag)">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</router-link>
|
||||
</el-scrollbar>
|
||||
<div class="tags-view-container">
|
||||
<el-scrollbar class="tags-view-wrapper">
|
||||
<router-link v-for="tag in visibleTags" :key="tag.fullPath" :class="isActive(tag) ? 'active' : ''" class="tags-view-item" :to="{ path: tag.fullPath }" @click.middle="closeTag(tag)" @contextmenu.prevent="openMenu(tag, $event)">
|
||||
{{ tag.title || tag.meta?.title }}
|
||||
<el-icon v-if="!tag.meta?.affix" class="el-icon-close" @click.prevent.stop="closeTag(tag)">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</router-link>
|
||||
</el-scrollbar>
|
||||
|
||||
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
|
||||
<li @click="refreshSelectedTag(selectedTag)">
|
||||
<el-icon>
|
||||
<Refresh />
|
||||
</el-icon>
|
||||
刷新
|
||||
</li>
|
||||
<li v-if="!selectedTag?.meta?.affix" @click="closeSelectedTag(selectedTag)">
|
||||
<el-icon>
|
||||
<Close />
|
||||
</el-icon>
|
||||
关闭
|
||||
</li>
|
||||
<li @click="closeOthersTags">
|
||||
<el-icon>
|
||||
<CircleClose />
|
||||
</el-icon>
|
||||
关闭其他
|
||||
</li>
|
||||
<li @click="closeAllTags(selectedTag)">
|
||||
<el-icon>
|
||||
<CircleCloseFilled />
|
||||
</el-icon>
|
||||
关闭全部
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
|
||||
<li @click="refreshSelectedTag(selectedTag)">
|
||||
<el-icon>
|
||||
<Refresh />
|
||||
</el-icon>
|
||||
刷新
|
||||
</li>
|
||||
<li v-if="!selectedTag?.meta?.affix" @click="closeSelectedTag(selectedTag)">
|
||||
<el-icon>
|
||||
<Close />
|
||||
</el-icon>
|
||||
关闭
|
||||
</li>
|
||||
<li @click="closeOthersTags">
|
||||
<el-icon>
|
||||
<CircleClose />
|
||||
</el-icon>
|
||||
关闭其他
|
||||
</li>
|
||||
<li @click="closeAllTags(selectedTag)">
|
||||
<el-icon>
|
||||
<CircleCloseFilled />
|
||||
</el-icon>
|
||||
关闭全部
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@@ -1,132 +1,115 @@
|
||||
<template>
|
||||
<div class="userbar-container">
|
||||
<!-- 全屏切换 -->
|
||||
<el-tooltip content="全屏" placement="bottom">
|
||||
<div class="icon-btn" @click="toggleFullScreen">
|
||||
<el-icon v-if="!isFullScreen">
|
||||
<FullScreen />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<Aim />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 语言切换 -->
|
||||
<el-dropdown trigger="click" @command="handleLanguageChange">
|
||||
<div class="icon-btn">
|
||||
<el-icon>
|
||||
<Location />
|
||||
</el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :disabled="currentLanguage === 'zh-CN'" command="zh-CN">
|
||||
简体中文
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :disabled="currentLanguage === 'en-US'" command="en-US">
|
||||
English
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<!-- 主题设置 -->
|
||||
<el-dropdown trigger="click">
|
||||
<div class="icon-btn">
|
||||
<el-icon>
|
||||
<Sunny />
|
||||
</el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="setTheme('light')">
|
||||
<el-icon>
|
||||
<Sunny />
|
||||
</el-icon>
|
||||
浅色主题
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="setTheme('dark')">
|
||||
<el-icon>
|
||||
<Moon />
|
||||
</el-icon>
|
||||
深色主题
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<!-- 消息通知 -->
|
||||
<el-tooltip content="消息" placement="bottom">
|
||||
<div class="icon-btn">
|
||||
<el-badge :value="messageCount" :hidden="messageCount === 0" :max="99">
|
||||
<el-icon>
|
||||
<Bell />
|
||||
<div class="userbar-container">
|
||||
<!-- 全屏切换 -->
|
||||
<el-tooltip content="全屏" placement="bottom">
|
||||
<div class="icon-btn" @click="toggleFullScreen">
|
||||
<el-icon v-if="!isFullScreen">
|
||||
<FullScreen />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-dropdown trigger="click" @command="handleCommand">
|
||||
<div class="avatar-wrapper">
|
||||
<el-avatar v-if="userStore.userInfo?.avatar" :src="userStore.userInfo.avatar" />
|
||||
<el-avatar v-else>
|
||||
<UserFilled />
|
||||
</el-avatar>
|
||||
<span class="username">{{ userStore.userInfo?.username || 'Admin' }}</span>
|
||||
<el-icon class="el-icon-caret-bottom">
|
||||
<ArrowDown />
|
||||
</el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="home">
|
||||
<el-icon v-else>
|
||||
<Aim />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 语言切换 -->
|
||||
<el-dropdown trigger="click" @command="handleLanguageChange">
|
||||
<div class="icon-btn">
|
||||
<el-icon>
|
||||
<Location />
|
||||
</el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :disabled="currentLanguage === 'zh-CN'" command="zh-CN"> 简体中文 </el-dropdown-item>
|
||||
<el-dropdown-item :disabled="currentLanguage === 'en-US'" command="en-US"> English </el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<!-- 主题设置 -->
|
||||
<el-dropdown trigger="click">
|
||||
<div class="icon-btn">
|
||||
<el-icon>
|
||||
<Sunny />
|
||||
</el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="setTheme('light')">
|
||||
<el-icon>
|
||||
<Sunny />
|
||||
</el-icon>
|
||||
浅色主题
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="setTheme('dark')">
|
||||
<el-icon>
|
||||
<Moon />
|
||||
</el-icon>
|
||||
深色主题
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<!-- 消息通知 -->
|
||||
<el-tooltip content="消息" placement="bottom">
|
||||
<div class="icon-btn">
|
||||
<el-badge :value="messageCount" :hidden="messageCount === 0" :max="99">
|
||||
<el-icon>
|
||||
<HomeFilled />
|
||||
<Bell />
|
||||
</el-icon>
|
||||
首页
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="profile">
|
||||
<el-icon>
|
||||
<User />
|
||||
</el-icon>
|
||||
个人中心
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided 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>
|
||||
</el-badge>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-dropdown trigger="click" @command="handleCommand">
|
||||
<div class="avatar-wrapper">
|
||||
<el-avatar v-if="userStore.userInfo?.avatar" :src="userStore.userInfo.avatar" />
|
||||
<el-avatar v-else>
|
||||
<UserFilled />
|
||||
</el-avatar>
|
||||
<span class="username">{{ userStore.userInfo?.username || 'Admin' }}</span>
|
||||
<el-icon class="el-icon-caret-bottom">
|
||||
<ArrowDown />
|
||||
</el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="home">
|
||||
<el-icon>
|
||||
<HomeFilled />
|
||||
</el-icon>
|
||||
首页
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="profile">
|
||||
<el-icon>
|
||||
<User />
|
||||
</el-icon>
|
||||
个人中心
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided 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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import {
|
||||
ArrowDown,
|
||||
HomeFilled,
|
||||
User,
|
||||
Setting,
|
||||
SwitchButton,
|
||||
FullScreen,
|
||||
Aim,
|
||||
Location,
|
||||
Sunny,
|
||||
Moon,
|
||||
Bell,
|
||||
UserFilled,
|
||||
} from '@element-plus/icons-vue'
|
||||
import { ArrowDown, HomeFilled, User, Setting, SwitchButton, FullScreen, Aim, Location, Sunny, Moon, Bell, UserFilled } from '@element-plus/icons-vue'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import { useI18nStore } from '@/stores/modules/i18n'
|
||||
|
||||
|
||||
@@ -1,124 +1,124 @@
|
||||
<template><el-container class="app-wrapper" :class="layoutClass">
|
||||
<!-- 默认布局：左侧双栏布局 -->
|
||||
<template v-if="layoutMode === 'default'">
|
||||
<!-- 一级菜单栏 (窄侧边栏) -->
|
||||
<el-aside width="60px" class="first-sidebar">
|
||||
<div class="logo-mini">
|
||||
<img v-if="logo" :src="logo" alt="logo" />
|
||||
<span v-else class="logo-text-mini">{{ logoText }}</span>
|
||||
</div>
|
||||
<div class="menu-list">
|
||||
<div v-for="menu in parentMenus" :key="menu.path" class="menu-item"
|
||||
:class="{ active: selectedParentMenu?.path === menu.path }" @click="handleParentMenuClick(menu)">
|
||||
<el-icon v-if="menu.meta?.icon">
|
||||
<component :is="menu.meta.icon" />
|
||||
</el-icon>
|
||||
<span class="menu-text">{{ menu.meta?.title }}</span>
|
||||
<template>
|
||||
<el-container class="app-wrapper" :class="layoutClass">
|
||||
<!-- 默认布局：左侧双栏布局 -->
|
||||
<template v-if="layoutMode === 'default'">
|
||||
<!-- 一级菜单栏 (窄侧边栏) -->
|
||||
<el-aside width="60px" class="first-sidebar">
|
||||
<div class="logo-mini">
|
||||
<img v-if="logo" :src="logo" alt="logo" />
|
||||
<span v-else class="logo-text-mini">{{ logoText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-aside>
|
||||
|
||||
<!-- 二级菜单栏 -->
|
||||
<el-aside :width="sidebarCollapsed ? '60px' : '220px'" class="second-sidebar">
|
||||
<div v-if="!sidebarCollapsed" class="logo">
|
||||
<img v-if="logo" :src="logo" alt="logo" />
|
||||
<span class="logo-text">{{ logoText }}</span>
|
||||
</div>
|
||||
<el-scrollbar class="menu-scrollbar">
|
||||
<menu-component />
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<el-container class="main-container">
|
||||
<el-header class="app-header">
|
||||
<div class="header-left">
|
||||
<el-icon class="collapse-icon" @click="toggleSidebar">
|
||||
<component :is="sidebarCollapsed ? 'Expand' : 'Fold'" />
|
||||
</el-icon>
|
||||
<breadcrumb v-if="showBreadcrumb" />
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<userbar />
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="app-main">
|
||||
<tags v-if="showTags" />
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component v-if="!route.meta.link" :is="Component" :key="refreshKey" />
|
||||
<iframe v-else :src="route.meta.link" class="iframe-container" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<!-- Menu布局：左侧菜单栏布局 -->
|
||||
<template v-else-if="layoutMode === 'menu'">
|
||||
<el-aside :width="sidebarCollapsed ? '60px' : '220px'" class="menu-sidebar">
|
||||
<div v-if="!sidebarCollapsed" class="logo">
|
||||
<img v-if="logo" :src="logo" alt="logo" />
|
||||
<span class="logo-text">{{ logoText }}</span>
|
||||
</div>
|
||||
<el-scrollbar class="menu-scrollbar">
|
||||
<menu-component />
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
<el-container class="main-container">
|
||||
<el-header class="app-header">
|
||||
<div class="header-left">
|
||||
<el-icon class="collapse-icon" @click="toggleSidebar">
|
||||
<component :is="sidebarCollapsed ? 'Expand' : 'Fold'" />
|
||||
</el-icon>
|
||||
<breadcrumb v-if="showBreadcrumb" />
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<tags v-if="showTags" />
|
||||
<userbar />
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="app-main">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component v-if="!route.meta.link" :is="Component" :key="refreshKey" />
|
||||
<iframe v-else :src="route.meta.link" class="iframe-container" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<!-- Top布局：顶部菜单栏布局 -->
|
||||
<template v-else-if="layoutMode === 'top'">
|
||||
<el-container class="main-container">
|
||||
<el-header class="top-header">
|
||||
<div class="header-left">
|
||||
<div class="logo">
|
||||
<img v-if="logo" :src="logo" alt="logo" />
|
||||
<span class="logo-text">{{ logoText }}</span>
|
||||
<div class="menu-list">
|
||||
<div v-for="menu in parentMenus" :key="menu.path" class="menu-item" :class="{ active: selectedParentMenu?.path === menu.path }" @click="handleParentMenuClick(menu)">
|
||||
<el-icon v-if="menu.meta?.icon">
|
||||
<component :is="menu.meta.icon" />
|
||||
</el-icon>
|
||||
<span class="menu-text">{{ menu.meta?.title }}</span>
|
||||
</div>
|
||||
<menu-component mode="horizontal" />
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<tags v-if="showTags" />
|
||||
<userbar />
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="app-main">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component v-if="!route.meta.link" :is="Component" :key="refreshKey" />
|
||||
<iframe v-else :src="route.meta.link" class="iframe-container" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
|
||||
<!-- 设置组件 -->
|
||||
<setting />
|
||||
<!-- 二级菜单栏 -->
|
||||
<el-aside :width="sidebarCollapsed ? '60px' : '220px'" class="second-sidebar">
|
||||
<div v-if="!sidebarCollapsed" class="logo">
|
||||
<img v-if="logo" :src="logo" alt="logo" />
|
||||
<span class="logo-text">{{ logoText }}</span>
|
||||
</div>
|
||||
<el-scrollbar class="menu-scrollbar">
|
||||
<menu-component />
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<el-container class="main-container">
|
||||
<el-header class="app-header">
|
||||
<div class="header-left">
|
||||
<el-icon class="collapse-icon" @click="toggleSidebar">
|
||||
<component :is="sidebarCollapsed ? 'Expand' : 'Fold'" />
|
||||
</el-icon>
|
||||
<breadcrumb v-if="showBreadcrumb" />
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<userbar />
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="app-main">
|
||||
<tags v-if="showTags" />
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component v-if="!route.meta.link" :is="Component" :key="refreshKey" />
|
||||
<iframe v-else :src="route.meta.link" class="iframe-container" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<!-- Menu布局：左侧菜单栏布局 -->
|
||||
<template v-else-if="layoutMode === 'menu'">
|
||||
<el-aside :width="sidebarCollapsed ? '60px' : '220px'" class="menu-sidebar">
|
||||
<div v-if="!sidebarCollapsed" class="logo">
|
||||
<img v-if="logo" :src="logo" alt="logo" />
|
||||
<span class="logo-text">{{ logoText }}</span>
|
||||
</div>
|
||||
<el-scrollbar class="menu-scrollbar">
|
||||
<menu-component />
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
<el-container class="main-container">
|
||||
<el-header class="app-header">
|
||||
<div class="header-left">
|
||||
<el-icon class="collapse-icon" @click="toggleSidebar">
|
||||
<component :is="sidebarCollapsed ? 'Expand' : 'Fold'" />
|
||||
</el-icon>
|
||||
<breadcrumb v-if="showBreadcrumb" />
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<tags v-if="showTags" />
|
||||
<userbar />
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="app-main">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component v-if="!route.meta.link" :is="Component" :key="refreshKey" />
|
||||
<iframe v-else :src="route.meta.link" class="iframe-container" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<!-- Top布局：顶部菜单栏布局 -->
|
||||
<template v-else-if="layoutMode === 'top'">
|
||||
<el-container class="main-container">
|
||||
<el-header class="top-header">
|
||||
<div class="header-left">
|
||||
<div class="logo">
|
||||
<img v-if="logo" :src="logo" alt="logo" />
|
||||
<span class="logo-text">{{ logoText }}</span>
|
||||
</div>
|
||||
<menu-component mode="horizontal" />
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<tags v-if="showTags" />
|
||||
<userbar />
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="app-main">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component v-if="!route.meta.link" :is="Component" :key="refreshKey" />
|
||||
<iframe v-else :src="route.meta.link" class="iframe-container" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
</el-container>
|
||||
|
||||
<!-- 设置组件 -->
|
||||
<setting />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -165,9 +165,7 @@ const layoutClass = computed(() => {
|
||||
|
||||
// 缓存的视图
|
||||
const cachedViews = computed(() => {
|
||||
return viewTags.value
|
||||
.filter((tag) => tag.meta?.keepAlive)
|
||||
.map((tag) => tag.name)
|
||||
return viewTags.value.filter((tag) => tag.meta?.keepAlive).map((tag) => tag.name)
|
||||
})
|
||||
|
||||
// 父级菜单（一级菜单）
|
||||
@@ -213,10 +211,7 @@ watch(
|
||||
if (layoutMode.value === 'default') {
|
||||
const menus = userStore.getMenu() || []
|
||||
for (const parentMenu of menus) {
|
||||
if (
|
||||
parentMenu.children &&
|
||||
parentMenu.children.some((child) => route.path.startsWith(child.path))
|
||||
) {
|
||||
if (parentMenu.children && parentMenu.children.some((child) => route.path.startsWith(child.path))) {
|
||||
layoutStore.setSelectedParentMenu(parentMenu)
|
||||
break
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</template>
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'HomeIndex'
|
||||
name: 'HomeIndex',
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,58 +1,56 @@
|
||||
<template>
|
||||
<div class="auth-container">
|
||||
<div class="tech-decoration">
|
||||
<div class="tech-circle"></div>
|
||||
<div class="tech-circle"></div>
|
||||
<div class="tech-circle"></div>
|
||||
</div>
|
||||
|
||||
<div class="auth-card">
|
||||
<div class="auth-header">
|
||||
<h1 class="auth-title">欢迎回来</h1>
|
||||
<p class="auth-subtitle">登录您的账户继续探索科技世界</p>
|
||||
<div class="auth-container">
|
||||
<div class="tech-decoration">
|
||||
<div class="tech-circle"></div>
|
||||
<div class="tech-circle"></div>
|
||||
<div class="tech-circle"></div>
|
||||
</div>
|
||||
|
||||
<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="auth-form"
|
||||
@submit.prevent="handleLogin">
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" placeholder="请输入用户名/邮箱" size="large" clearable>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<User />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" placeholder="请输入密码" size="large" clearable
|
||||
show-password @keyup.enter="handleLogin">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div class="auth-links">
|
||||
<el-checkbox v-model="loginForm.rememberMe" class="remember-me"> 记住我 </el-checkbox>
|
||||
<router-link to="/forgot-password" class="forgot-password"> 忘记密码？ </router-link>
|
||||
<div class="auth-card">
|
||||
<div class="auth-header">
|
||||
<h1 class="auth-title">欢迎回来</h1>
|
||||
<p class="auth-subtitle">登录您的账户继续探索科技世界</p>
|
||||
</div>
|
||||
|
||||
<el-button type="primary" :loading="loading" size="large" style="width: 100%" @click="handleLogin">
|
||||
{{ loading ? '登录中...' : '登录' }}
|
||||
</el-button>
|
||||
</el-form>
|
||||
<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="auth-form" @submit.prevent="handleLogin">
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" placeholder="请输入用户名/邮箱" size="large" clearable>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<User />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div class="auth-footer">
|
||||
<p class="auth-footer-text">
|
||||
还没有账户？
|
||||
<router-link to="/register" class="auth-link"> 立即注册 </router-link>
|
||||
</p>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" placeholder="请输入密码" size="large" clearable show-password @keyup.enter="handleLogin">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div class="auth-links">
|
||||
<el-checkbox v-model="loginForm.rememberMe" class="remember-me"> 记住我 </el-checkbox>
|
||||
<router-link to="/forgot-password" class="forgot-password"> 忘记密码？ </router-link>
|
||||
</div>
|
||||
|
||||
<el-button type="primary" :loading="loading" size="large" style="width: 100%" @click="handleLogin">
|
||||
{{ loading ? '登录中...' : '登录' }}
|
||||
</el-button>
|
||||
</el-form>
|
||||
|
||||
<div class="auth-footer">
|
||||
<p class="auth-footer-text">
|
||||
还没有账户？
|
||||
<router-link to="/register" class="auth-link"> 立即注册 </router-link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
Reference in New Issue
Block a user