mirror of
https://github.com/jekip/naive-ui-admin.git
synced 2026-02-15 10:42:28 +08:00
fix Bug or esLink formatting
This commit is contained in:
Ah jung
@@ -7,24 +7,24 @@
|
||||
<div class="drawer-setting-item justify-center dark-switch">
|
||||
<n-tooltip placement="bottom">
|
||||
<template #trigger>
|
||||
<n-switch v-model:value="designStore.darkTheme"/>
|
||||
<n-switch v-model:value="designStore.darkTheme" />
|
||||
</template>
|
||||
<span>深色主题</span>
|
||||
</n-tooltip>
|
||||
|
||||
</div>
|
||||
|
||||
<n-divider title-placement="center">系统主题</n-divider>
|
||||
|
||||
<div class="drawer-setting-item align-items-top">
|
||||
<span class="theme-item"
|
||||
v-for="(item, index) in appThemeList"
|
||||
:key="index"
|
||||
:style="{'background-color':item}"
|
||||
@click="togTheme(item)"
|
||||
<span
|
||||
class="theme-item"
|
||||
v-for="(item, index) in appThemeList"
|
||||
:key="index"
|
||||
:style="{ 'background-color': item }"
|
||||
@click="togTheme(item)"
|
||||
>
|
||||
<n-icon size="12" v-if="item === designStore.appTheme">
|
||||
<CheckOutlined/>
|
||||
<CheckOutlined />
|
||||
</n-icon>
|
||||
</span>
|
||||
</div>
|
||||
@@ -35,46 +35,45 @@
|
||||
<div class="drawer-setting-item-style align-items-top">
|
||||
<n-tooltip placement="top">
|
||||
<template #trigger>
|
||||
<img src="~@/assets/images/nav-theme-dark.svg" @click="togNavMode('vertical')"/>
|
||||
<img src="~@/assets/images/nav-theme-dark.svg" @click="togNavMode('vertical')" />
|
||||
</template>
|
||||
<span>左侧菜单模式</span>
|
||||
</n-tooltip>
|
||||
<n-badge dot color="#19be6b" v-show="settingStore.navMode === 'vertical'"/>
|
||||
<n-badge dot color="#19be6b" v-show="settingStore.navMode === 'vertical'" />
|
||||
</div>
|
||||
|
||||
<div class="drawer-setting-item-style">
|
||||
<n-tooltip placement="top">
|
||||
<template #trigger>
|
||||
<img src="~@/assets/images/nav-horizontal.svg" @click="togNavMode('horizontal')"/>
|
||||
<img src="~@/assets/images/nav-horizontal.svg" @click="togNavMode('horizontal')" />
|
||||
</template>
|
||||
<span>顶部菜单模式</span>
|
||||
</n-tooltip>
|
||||
<n-badge dot color="#19be6b" v-show="settingStore.navMode === 'horizontal'"/>
|
||||
<n-badge dot color="#19be6b" v-show="settingStore.navMode === 'horizontal'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<n-divider title-placement="center">导航栏风格</n-divider>
|
||||
|
||||
<div class="drawer-setting-item align-items-top">
|
||||
<div class="drawer-setting-item-style align-items-top">
|
||||
<n-tooltip placement="top">
|
||||
<template #trigger>
|
||||
<img src="~@/assets/images/nav-theme-dark.svg" @click="togNavTheme('dark')"/>
|
||||
<img src="~@/assets/images/nav-theme-dark.svg" @click="togNavTheme('dark')" />
|
||||
</template>
|
||||
<span>暗色侧边栏</span>
|
||||
</n-tooltip>
|
||||
<n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'dark'"/>
|
||||
<n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'dark'" />
|
||||
</div>
|
||||
|
||||
<div class="drawer-setting-item-style">
|
||||
<n-tooltip placement="top">
|
||||
<template #trigger>
|
||||
<img src="~@/assets/images/nav-theme-light.svg" @click="togNavTheme('light')"/>
|
||||
<img src="~@/assets/images/nav-theme-light.svg" @click="togNavTheme('light')" />
|
||||
</template>
|
||||
<span>白色侧边栏</span>
|
||||
</n-tooltip>
|
||||
<n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'light'"/>
|
||||
<n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'light'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -82,22 +81,23 @@
|
||||
<div class="drawer-setting-item-style">
|
||||
<n-tooltip placement="top">
|
||||
<template #trigger>
|
||||
<img src="~@/assets/images/header-theme-dark.svg" @click="togNavTheme('header-dark')"/>
|
||||
<img
|
||||
src="~@/assets/images/header-theme-dark.svg"
|
||||
@click="togNavTheme('header-dark')"
|
||||
/>
|
||||
</template>
|
||||
<span>暗色顶栏</span>
|
||||
</n-tooltip>
|
||||
<n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'header-dark'"/>
|
||||
<n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'header-dark'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<n-divider title-placement="center">界面功能</n-divider>
|
||||
|
||||
<div class="drawer-setting-item">
|
||||
<div class="drawer-setting-item-title">
|
||||
固定顶栏
|
||||
</div>
|
||||
<div class="drawer-setting-item-title"> 固定顶栏 </div>
|
||||
<div class="drawer-setting-item-action">
|
||||
<n-switch v-model:value="settingStore.headerSetting.fixed"/>
|
||||
<n-switch v-model:value="settingStore.headerSetting.fixed" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -111,214 +111,200 @@
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="drawer-setting-item">
|
||||
<div class="drawer-setting-item-title">
|
||||
固定多页签
|
||||
</div>
|
||||
<div class="drawer-setting-item-title"> 固定多页签 </div>
|
||||
<div class="drawer-setting-item-action">
|
||||
<n-switch v-model:value="settingStore.multiTabsSetting.fixed"/>
|
||||
<n-switch v-model:value="settingStore.multiTabsSetting.fixed" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<n-divider title-placement="center">界面显示</n-divider>
|
||||
|
||||
<div class="drawer-setting-item">
|
||||
<div class="drawer-setting-item-title">
|
||||
显示重载页面按钮
|
||||
</div>
|
||||
<div class="drawer-setting-item-title"> 显示重载页面按钮 </div>
|
||||
<div class="drawer-setting-item-action">
|
||||
<n-switch v-model:value="settingStore.headerSetting.isReload"/>
|
||||
<n-switch v-model:value="settingStore.headerSetting.isReload" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="drawer-setting-item">
|
||||
<div class="drawer-setting-item-title">
|
||||
显示面包屑导航
|
||||
</div>
|
||||
<div class="drawer-setting-item-title"> 显示面包屑导航 </div>
|
||||
<div class="drawer-setting-item-action">
|
||||
<n-switch v-model:value="settingStore.crumbsSetting.show"/>
|
||||
<n-switch v-model:value="settingStore.crumbsSetting.show" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="drawer-setting-item">
|
||||
<div class="drawer-setting-item-title">
|
||||
显示面包屑显示图标
|
||||
</div>
|
||||
<div class="drawer-setting-item-title"> 显示面包屑显示图标 </div>
|
||||
<div class="drawer-setting-item-action">
|
||||
<n-switch v-model:value="settingStore.crumbsSetting.showIcon"/>
|
||||
<n-switch v-model:value="settingStore.crumbsSetting.showIcon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="drawer-setting-item">
|
||||
<div class="drawer-setting-item-title">
|
||||
显示多页签
|
||||
</div>
|
||||
<div class="drawer-setting-item-title"> 显示多页签 </div>
|
||||
<div class="drawer-setting-item-action">
|
||||
<n-switch v-model:value="settingStore.multiTabsSetting.show"/>
|
||||
<n-switch v-model:value="settingStore.multiTabsSetting.show" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="drawer-setting-item">
|
||||
<div class="drawer-setting-item-title">
|
||||
显示页脚
|
||||
</div>
|
||||
<div class="drawer-setting-item-title"> 显示页脚 </div>
|
||||
<div class="drawer-setting-item-action">
|
||||
<n-switch v-model:value="settingStore.showFooter"/>
|
||||
<n-switch v-model:value="settingStore.showFooter" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="drawer-setting-item">
|
||||
<n-alert type="warning" :showIcon="false">
|
||||
<p>{{ alertText }}</p>
|
||||
</n-alert>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</n-drawer-content>
|
||||
</n-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, watch, createVNode, computed, unref } from 'vue'
|
||||
import { useProjectSettingStore } from "@/store/modules/projectSetting";
|
||||
import { useDesignSettingStore } from "@/store/modules/designSetting";
|
||||
import { CheckOutlined } from '@vicons/antd'
|
||||
import { darkTheme } from 'naive-ui'
|
||||
import { defineComponent, reactive, toRefs, watch } from 'vue';
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
import { useDesignSettingStore } from '@/store/modules/designSetting';
|
||||
import { CheckOutlined } from '@vicons/antd';
|
||||
import { darkTheme } from 'naive-ui';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ProjectSetting',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '项目配置'
|
||||
export default defineComponent({
|
||||
name: 'ProjectSetting',
|
||||
components: { CheckOutlined },
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '项目配置',
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 280,
|
||||
},
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 280
|
||||
},
|
||||
},
|
||||
components: { CheckOutlined },
|
||||
setup(props, { emit }) {
|
||||
const settingStore = useProjectSettingStore()
|
||||
const designStore = useDesignSettingStore()
|
||||
const { width, title } = props
|
||||
const state = reactive({
|
||||
width,
|
||||
title,
|
||||
isDrawer: false,
|
||||
placement: "right",
|
||||
alertText: '该功能主要实时预览各种布局效果，更多完整配置在 projectSetting.ts 中设置，建议在生产环境关闭该布局预览功能。',
|
||||
appThemeList: designStore.appThemeList
|
||||
})
|
||||
setup(props) {
|
||||
const settingStore = useProjectSettingStore();
|
||||
const designStore = useDesignSettingStore();
|
||||
const state = reactive({
|
||||
width: props.width,
|
||||
title: props.title,
|
||||
isDrawer: false,
|
||||
placement: 'right',
|
||||
alertText:
|
||||
'该功能主要实时预览各种布局效果，更多完整配置在 projectSetting.ts 中设置，建议在生产环境关闭该布局预览功能。',
|
||||
appThemeList: designStore.appThemeList,
|
||||
});
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => designStore.darkTheme,
|
||||
(to) => {
|
||||
settingStore.navTheme = to ? 'header-dark' : 'dark'
|
||||
settingStore.navTheme = to ? 'header-dark' : 'dark';
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
function openDrawer(isDrawer) {
|
||||
state.isDrawer = true
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
state.isDrawer = false
|
||||
}
|
||||
|
||||
function togNavTheme(theme) {
|
||||
settingStore.navTheme = theme
|
||||
if (settingStore.navMode === 'horizontal' && theme === 'light') {
|
||||
designStore.navTheme = 'dark'
|
||||
function openDrawer() {
|
||||
state.isDrawer = true;
|
||||
}
|
||||
}
|
||||
|
||||
function togTheme(color) {
|
||||
designStore.appTheme = color
|
||||
}
|
||||
|
||||
function togNavMode(mode) {
|
||||
settingStore.navMode = mode
|
||||
if (mode === 'horizontal') {
|
||||
settingStore.setNavTheme('light')
|
||||
} else {
|
||||
settingStore.setNavTheme('dark')
|
||||
function closeDrawer() {
|
||||
state.isDrawer = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
settingStore,
|
||||
designStore,
|
||||
togNavTheme,
|
||||
togNavMode,
|
||||
togTheme,
|
||||
darkTheme,
|
||||
openDrawer,
|
||||
closeDrawer,
|
||||
}
|
||||
}
|
||||
})
|
||||
function togNavTheme(theme) {
|
||||
settingStore.navTheme = theme;
|
||||
if (settingStore.navMode === 'horizontal' && theme === 'light') {
|
||||
settingStore.navTheme = 'dark';
|
||||
}
|
||||
}
|
||||
|
||||
function togTheme(color) {
|
||||
designStore.appTheme = color;
|
||||
}
|
||||
|
||||
function togNavMode(mode) {
|
||||
settingStore.navMode = mode;
|
||||
if (mode === 'horizontal') {
|
||||
settingStore.setNavTheme('light');
|
||||
} else {
|
||||
settingStore.setNavTheme('dark');
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
settingStore,
|
||||
designStore,
|
||||
togNavTheme,
|
||||
togNavMode,
|
||||
togTheme,
|
||||
darkTheme,
|
||||
openDrawer,
|
||||
closeDrawer,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.drawer {
|
||||
.n-divider:not(.n-divider--vertical) {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
&-setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-style {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-right: 16px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
.drawer {
|
||||
.n-divider:not(.n-divider--vertical) {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
&-title {
|
||||
flex: 1 1;
|
||||
font-size: 14px;
|
||||
&-setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-style {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-right: 16px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-title {
|
||||
flex: 1 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&-action {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.theme-item {
|
||||
width: 20px;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 2px;
|
||||
margin: 0 5px 5px 0;
|
||||
text-align: center;
|
||||
|
||||
.n-icon {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-action {
|
||||
flex: 0 0 auto;
|
||||
.align-items-top {
|
||||
align-items: flex-start;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.theme-item {
|
||||
width: 20px;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 2px;
|
||||
margin: 0 5px 5px 0;
|
||||
text-align: center;
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.n-icon {
|
||||
color: #fff
|
||||
.dark-switch .n-switch--active {
|
||||
::v-deep(.n-switch__rail) {
|
||||
background-color: #000e1c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.align-items-top {
|
||||
align-items: flex-start;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dark-switch .n-switch--active {
|
||||
::v-deep(.n-switch__rail) {
|
||||
background-color: #000e1c;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
import {
|
||||
SettingOutlined,
|
||||
SearchOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined,
|
||||
PoweroffOutlined,
|
||||
GithubOutlined,
|
||||
LockOutlined,
|
||||
ReloadOutlined,
|
||||
LogoutOutlined,
|
||||
UserOutlined,
|
||||
CheckOutlined
|
||||
} from '@vicons/antd'
|
||||
SettingOutlined,
|
||||
SearchOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined,
|
||||
PoweroffOutlined,
|
||||
GithubOutlined,
|
||||
LockOutlined,
|
||||
ReloadOutlined,
|
||||
LogoutOutlined,
|
||||
UserOutlined,
|
||||
CheckOutlined,
|
||||
} from '@vicons/antd';
|
||||
|
||||
export default {
|
||||
SettingOutlined,
|
||||
LockOutlined,
|
||||
GithubOutlined,
|
||||
SearchOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined,
|
||||
PoweroffOutlined,
|
||||
ReloadOutlined,
|
||||
LogoutOutlined,
|
||||
UserOutlined,
|
||||
CheckOutlined
|
||||
}
|
||||
SettingOutlined,
|
||||
LockOutlined,
|
||||
GithubOutlined,
|
||||
SearchOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined,
|
||||
PoweroffOutlined,
|
||||
ReloadOutlined,
|
||||
LogoutOutlined,
|
||||
UserOutlined,
|
||||
CheckOutlined,
|
||||
};
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import PageHeader from './index.vue'
|
||||
import PageHeader from './index.vue';
|
||||
|
||||
export { PageHeader }
|
||||
export { PageHeader };
|
||||
|
||||
@@ -1,26 +1,31 @@
|
||||
<template>
|
||||
<div class="layout-header" :class="{'layout-header-light':!(navTheme == 'header-dark')}">
|
||||
<div class="layout-header" :class="{ 'layout-header-light': !(navTheme == 'header-dark') }">
|
||||
<!--顶部菜单-->
|
||||
<div class="layout-header-left" v-if="navMode==='horizontal'">
|
||||
<AsideMenu v-model:collapsed="collapsed" mode="horizontal" class="n-menu-horizontal-light"/>
|
||||
<div class="layout-header-left" v-if="navMode === 'horizontal'">
|
||||
<AsideMenu v-model:collapsed="collapsed" mode="horizontal" class="n-menu-horizontal-light" />
|
||||
</div>
|
||||
<!--左侧菜单-->
|
||||
<div class="layout-header-left" v-else>
|
||||
<!-- 菜单收起 -->
|
||||
<div class="ml-1 layout-header-trigger layout-header-trigger-min"
|
||||
@click="() => $emit('update:collapsed', !collapsed)">
|
||||
<div
|
||||
class="ml-1 layout-header-trigger layout-header-trigger-min"
|
||||
@click="() => $emit('update:collapsed', !collapsed)"
|
||||
>
|
||||
<n-icon size="18" v-if="collapsed">
|
||||
<MenuUnfoldOutlined/>
|
||||
<MenuUnfoldOutlined />
|
||||
</n-icon>
|
||||
<n-icon size="18" v-else>
|
||||
<MenuFoldOutlined/>
|
||||
<MenuFoldOutlined />
|
||||
</n-icon>
|
||||
</div>
|
||||
<!-- 刷新 -->
|
||||
<div class="mr-1 layout-header-trigger layout-header-trigger-min" v-if="headerSetting.isReload"
|
||||
@click="reloadPage">
|
||||
<div
|
||||
class="mr-1 layout-header-trigger layout-header-trigger-min"
|
||||
v-if="headerSetting.isReload"
|
||||
@click="reloadPage"
|
||||
>
|
||||
<n-icon size="18">
|
||||
<ReloadOutlined/>
|
||||
<ReloadOutlined />
|
||||
</n-icon>
|
||||
</div>
|
||||
<!-- 面包屑 -->
|
||||
@@ -28,29 +33,39 @@
|
||||
<template v-for="routeItem in breadcrumbList" :key="routeItem.name">
|
||||
<n-breadcrumb-item>
|
||||
<n-dropdown
|
||||
v-if="routeItem.children.length"
|
||||
:options="routeItem.children"
|
||||
@select="dropdownSelect"
|
||||
v-if="routeItem.children.length"
|
||||
:options="routeItem.children"
|
||||
@select="dropdownSelect"
|
||||
>
|
||||
<span class="link-text">
|
||||
<component v-if="crumbsSetting.showIcon && routeItem.meta.icon" :is="routeItem.meta.icon"></component>
|
||||
{{ routeItem.meta.title }}
|
||||
</span>
|
||||
</n-dropdown>
|
||||
<span class="link-text" v-else>
|
||||
<component v-if="crumbsSetting.showIcon && routeItem.meta.icon" :is="routeItem.meta.icon"></component>
|
||||
<span class="link-text">
|
||||
<component
|
||||
v-if="crumbsSetting.showIcon && routeItem.meta.icon"
|
||||
:is="routeItem.meta.icon"
|
||||
/>
|
||||
{{ routeItem.meta.title }}
|
||||
</span>
|
||||
</n-dropdown>
|
||||
<span class="link-text" v-else>
|
||||
<component
|
||||
v-if="crumbsSetting.showIcon && routeItem.meta.icon"
|
||||
:is="routeItem.meta.icon"
|
||||
/>
|
||||
{{ routeItem.meta.title }}
|
||||
</span>
|
||||
</n-breadcrumb-item>
|
||||
</template>
|
||||
</n-breadcrumb>
|
||||
</div>
|
||||
<div class="layout-header-right">
|
||||
<div class="layout-header-trigger layout-header-trigger-min" v-for="item in iconList" :key="item.icon.name">
|
||||
<div
|
||||
class="layout-header-trigger layout-header-trigger-min"
|
||||
v-for="item in iconList"
|
||||
:key="item.icon.name"
|
||||
>
|
||||
<n-tooltip placement="bottom">
|
||||
<template #trigger>
|
||||
<n-icon size="18">
|
||||
<component :is="item.icon" v-on="item.eventObject || {}"/>
|
||||
<component :is="item.icon" v-on="item.eventObject || {}" />
|
||||
</n-icon>
|
||||
</template>
|
||||
<span>{{ item.tips }}</span>
|
||||
@@ -61,7 +76,7 @@
|
||||
<n-tooltip placement="bottom">
|
||||
<template #trigger>
|
||||
<n-icon size="18">
|
||||
<component :is="fullscreenIcon" @click="toggleFullScreen"/>
|
||||
<component :is="fullscreenIcon" @click="toggleFullScreen" />
|
||||
</n-icon>
|
||||
</template>
|
||||
<span>全屏</span>
|
||||
@@ -74,7 +89,7 @@
|
||||
<n-avatar>
|
||||
{{ username }}
|
||||
<template #icon>
|
||||
<UserOutlined/>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</n-avatar>
|
||||
</div>
|
||||
@@ -85,7 +100,7 @@
|
||||
<n-tooltip placement="bottom-end">
|
||||
<template #trigger>
|
||||
<n-icon size="18" style="font-weight: bold">
|
||||
<SettingOutlined/>
|
||||
<SettingOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
<span>项目配置</span>
|
||||
@@ -94,330 +109,322 @@
|
||||
</div>
|
||||
</div>
|
||||
<!--项目配置-->
|
||||
<ProjectSetting ref="drawerSetting"/>
|
||||
<ProjectSetting ref="drawerSetting" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, ref, computed, unref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import components from './components'
|
||||
import { NDialogProvider, useDialog, useMessage, useNotification } from 'naive-ui'
|
||||
import { TABS_ROUTES } from '@/store/mutation-types'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { useLockscreenStore } from '@/store/modules/lockscreen'
|
||||
import ProjectSetting from './ProjectSetting.vue'
|
||||
import { AsideMenu } from '@/layout/components/Menu'
|
||||
import { useProjectSetting } from "@/hooks/setting/useProjectSetting";
|
||||
import { defineComponent, reactive, toRefs, ref, computed, unref } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import components from './components';
|
||||
import { NDialogProvider, useDialog, useMessage } from 'naive-ui';
|
||||
import { TABS_ROUTES } from '@/store/mutation-types';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { useLockscreenStore } from '@/store/modules/lockscreen';
|
||||
import ProjectSetting from './ProjectSetting.vue';
|
||||
import { AsideMenu } from '@/layout/components/Menu';
|
||||
import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PageHeader',
|
||||
components: { ...components, NDialogProvider, ProjectSetting, AsideMenu },
|
||||
props: {
|
||||
collapsed: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const userStore = useUserStore()
|
||||
const useLockscreen = useLockscreenStore()
|
||||
const message = useMessage()
|
||||
const notification = useNotification()
|
||||
const dialog = useDialog()
|
||||
const {
|
||||
getNavMode,
|
||||
getNavTheme,
|
||||
getHeaderSetting,
|
||||
getMenuSetting,
|
||||
getCrumbsSetting
|
||||
} = useProjectSetting()
|
||||
export default defineComponent({
|
||||
name: 'PageHeader',
|
||||
components: { ...components, NDialogProvider, ProjectSetting, AsideMenu },
|
||||
props: {
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const userStore = useUserStore();
|
||||
const useLockscreen = useLockscreenStore();
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
const { getNavMode, getNavTheme, getHeaderSetting, getMenuSetting, getCrumbsSetting } =
|
||||
useProjectSetting();
|
||||
|
||||
const { username } = userStore?.info || {}
|
||||
const { username } = userStore?.info || {};
|
||||
|
||||
const drawerSetting = ref()
|
||||
const drawerSetting = ref();
|
||||
|
||||
const state = reactive({
|
||||
username: username || '',
|
||||
fullscreenIcon: 'FullscreenOutlined',
|
||||
navMode: getNavMode,
|
||||
navTheme: getNavTheme,
|
||||
headerSetting: getHeaderSetting,
|
||||
crumbsSetting: getCrumbsSetting,
|
||||
})
|
||||
const state = reactive({
|
||||
username: username || '',
|
||||
fullscreenIcon: 'FullscreenOutlined',
|
||||
navMode: getNavMode,
|
||||
navTheme: getNavTheme,
|
||||
headerSetting: getHeaderSetting,
|
||||
crumbsSetting: getCrumbsSetting,
|
||||
});
|
||||
|
||||
const getChangeStyle = computed(() => {
|
||||
const { collapsed } = props
|
||||
const { minMenuWidth, menuWidth }: any = unref(getMenuSetting)
|
||||
return {
|
||||
'left': collapsed ? `${ minMenuWidth }px` : `${ menuWidth }px`,
|
||||
'width': `calc(100% - ${ collapsed ? `${ minMenuWidth }px` : `${ menuWidth }px` })`
|
||||
}
|
||||
})
|
||||
const getChangeStyle = computed(() => {
|
||||
const { collapsed } = props;
|
||||
const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
|
||||
return {
|
||||
left: collapsed ? `${minMenuWidth}px` : `${menuWidth}px`,
|
||||
width: `calc(100% - ${collapsed ? `${minMenuWidth}px` : `${menuWidth}px`})`,
|
||||
};
|
||||
});
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const generator: any = (routerMap, parent) => {
|
||||
return routerMap.map((item, key) => {
|
||||
const currentMenu = {
|
||||
...item,
|
||||
label: item.meta.title,
|
||||
key: item.name,
|
||||
disabled: item.path === '/',
|
||||
}
|
||||
// 是否有子菜单，并递归处理
|
||||
if (item.children && item.children.length > 0) {
|
||||
// Recursion
|
||||
currentMenu.children = generator(item.children, currentMenu)
|
||||
}
|
||||
return currentMenu
|
||||
})
|
||||
}
|
||||
const generator: any = (routerMap) => {
|
||||
return routerMap.map((item) => {
|
||||
const currentMenu = {
|
||||
...item,
|
||||
label: item.meta.title,
|
||||
key: item.name,
|
||||
disabled: item.path === '/',
|
||||
};
|
||||
// 是否有子菜单，并递归处理
|
||||
if (item.children && item.children.length > 0) {
|
||||
// Recursion
|
||||
currentMenu.children = generator(item.children, currentMenu);
|
||||
}
|
||||
return currentMenu;
|
||||
});
|
||||
};
|
||||
|
||||
const breadcrumbList = computed(() => {
|
||||
return generator(route.matched)
|
||||
})
|
||||
const breadcrumbList = computed(() => {
|
||||
return generator(route.matched);
|
||||
});
|
||||
|
||||
const dropdownSelect = (key) => {
|
||||
router.push({ name: key })
|
||||
}
|
||||
const dropdownSelect = (key) => {
|
||||
router.push({ name: key });
|
||||
};
|
||||
|
||||
// 刷新页面
|
||||
const reloadPage = () => {
|
||||
router.push({
|
||||
path: '/redirect' + unref(route).fullPath
|
||||
})
|
||||
}
|
||||
// 刷新页面
|
||||
const reloadPage = () => {
|
||||
router.push({
|
||||
path: '/redirect' + unref(route).fullPath,
|
||||
});
|
||||
};
|
||||
|
||||
// 退出登录
|
||||
const doLogout = () => {
|
||||
dialog.info({
|
||||
title: '提示',
|
||||
content: '您确定要退出登录吗',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => {
|
||||
userStore.logout().then((res) => {
|
||||
message.success('成功退出登录')
|
||||
// 移除标签页
|
||||
localStorage.removeItem(TABS_ROUTES)
|
||||
router
|
||||
// 退出登录
|
||||
const doLogout = () => {
|
||||
dialog.info({
|
||||
title: '提示',
|
||||
content: '您确定要退出登录吗',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => {
|
||||
userStore.logout().then(() => {
|
||||
message.success('成功退出登录');
|
||||
// 移除标签页
|
||||
localStorage.removeItem(TABS_ROUTES);
|
||||
router
|
||||
.replace({
|
||||
name: 'Login',
|
||||
query: {
|
||||
redirect: route.fullPath
|
||||
}
|
||||
redirect: route.fullPath,
|
||||
},
|
||||
})
|
||||
.finally(() => location.reload())
|
||||
})
|
||||
},
|
||||
onNegativeClick: () => {
|
||||
.finally(() => location.reload());
|
||||
});
|
||||
},
|
||||
onNegativeClick: () => {},
|
||||
});
|
||||
};
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 切换全屏图标
|
||||
const toggleFullscreenIcon = () =>
|
||||
// 切换全屏图标
|
||||
const toggleFullscreenIcon = () =>
|
||||
(state.fullscreenIcon =
|
||||
document.fullscreenElement !== null ? 'FullscreenExitOutlined' : 'FullscreenOutlined')
|
||||
document.fullscreenElement !== null ? 'FullscreenExitOutlined' : 'FullscreenOutlined');
|
||||
|
||||
// 监听全屏切换事件
|
||||
document.addEventListener('fullscreenchange', toggleFullscreenIcon)
|
||||
// 监听全屏切换事件
|
||||
document.addEventListener('fullscreenchange', toggleFullscreenIcon);
|
||||
|
||||
// 全屏切换
|
||||
const toggleFullScreen = () => {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen()
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
// 全屏切换
|
||||
const toggleFullScreen = () => {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen();
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 图标列表
|
||||
const iconList = [
|
||||
{
|
||||
icon: 'SearchOutlined',
|
||||
tips: '搜索'
|
||||
},
|
||||
{
|
||||
icon: 'GithubOutlined',
|
||||
tips: 'github',
|
||||
eventObject: {
|
||||
click: () => window.open('https://github.com/jekip/naive-ui-admin')
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: 'LockOutlined',
|
||||
tips: '锁屏',
|
||||
eventObject: {
|
||||
click: () => useLockscreen.setLock(true)
|
||||
// 图标列表
|
||||
const iconList = [
|
||||
{
|
||||
icon: 'SearchOutlined',
|
||||
tips: '搜索',
|
||||
},
|
||||
{
|
||||
icon: 'GithubOutlined',
|
||||
tips: 'github',
|
||||
eventObject: {
|
||||
click: () => window.open('https://github.com/jekip/naive-ui-admin'),
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: 'LockOutlined',
|
||||
tips: '锁屏',
|
||||
eventObject: {
|
||||
click: () => useLockscreen.setLock(true),
|
||||
},
|
||||
},
|
||||
];
|
||||
const avatarOptions = [
|
||||
{
|
||||
label: '个人设置',
|
||||
key: 1,
|
||||
},
|
||||
{
|
||||
label: '退出登录',
|
||||
key: 2,
|
||||
},
|
||||
];
|
||||
|
||||
//头像下拉菜单
|
||||
const avatarSelect = (key) => {
|
||||
switch (key) {
|
||||
case 1:
|
||||
router.push({ name: 'Setting' });
|
||||
break;
|
||||
case 2:
|
||||
doLogout();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
function openSetting() {
|
||||
const { openDrawer } = drawerSetting.value;
|
||||
openDrawer();
|
||||
}
|
||||
]
|
||||
const avatarOptions = [
|
||||
{
|
||||
label: '个人设置',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
label: '退出登录',
|
||||
key: 2
|
||||
},
|
||||
]
|
||||
|
||||
//头像下拉菜单
|
||||
const avatarSelect = (key) => {
|
||||
switch (key) {
|
||||
case 1:
|
||||
router.push({ name: 'Setting' })
|
||||
break;
|
||||
case 2:
|
||||
doLogout()
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function openSetting() {
|
||||
const { openDrawer } = drawerSetting.value
|
||||
openDrawer()
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
iconList,
|
||||
toggleFullScreen,
|
||||
doLogout,
|
||||
route,
|
||||
dropdownSelect,
|
||||
avatarOptions,
|
||||
getChangeStyle,
|
||||
avatarSelect,
|
||||
breadcrumbList,
|
||||
reloadPage,
|
||||
drawerSetting,
|
||||
openSetting,
|
||||
}
|
||||
}
|
||||
})
|
||||
return {
|
||||
...toRefs(state),
|
||||
iconList,
|
||||
toggleFullScreen,
|
||||
doLogout,
|
||||
route,
|
||||
dropdownSelect,
|
||||
avatarOptions,
|
||||
getChangeStyle,
|
||||
avatarSelect,
|
||||
breadcrumbList,
|
||||
reloadPage,
|
||||
drawerSetting,
|
||||
openSetting,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.layout-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
height: @header-height;
|
||||
box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
|
||||
transition: all .2s ease-in-out;
|
||||
width: 100%;
|
||||
z-index: 11;
|
||||
//color: #fff;
|
||||
|
||||
//.n-icon {
|
||||
// color: #fff
|
||||
//}
|
||||
|
||||
&-left {
|
||||
.layout-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
height: @header-height;
|
||||
box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
|
||||
transition: all 0.2s ease-in-out;
|
||||
width: 100%;
|
||||
z-index: 11;
|
||||
//color: #fff;
|
||||
|
||||
::v-deep(.ant-breadcrumb span:last-child .link-text) {
|
||||
color: #515a6e;
|
||||
}
|
||||
//.n-icon {
|
||||
// color: #fff
|
||||
//}
|
||||
|
||||
::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.n-breadcrumb {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
|
||||
.avatar {
|
||||
&-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
|
||||
::v-deep(.ant-breadcrumb span:last-child .link-text) {
|
||||
color: #515a6e;
|
||||
}
|
||||
|
||||
::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.n-breadcrumb {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
&-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
> * {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-trigger {
|
||||
display: inline-block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
.n-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: hsla(0, 0%, 100%, 0.08);
|
||||
}
|
||||
|
||||
.anticon {
|
||||
font-size: 16px;
|
||||
color: #515a6e;
|
||||
}
|
||||
}
|
||||
|
||||
&-trigger-min {
|
||||
width: auto;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-trigger {
|
||||
display: inline-block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
.layout-header-light {
|
||||
background: #fff;
|
||||
color: #515a6e;
|
||||
|
||||
.n-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: hsla(0, 0%, 100%, .08);
|
||||
}
|
||||
|
||||
.anticon {
|
||||
font-size: 16px;
|
||||
color: #515a6e;
|
||||
}
|
||||
}
|
||||
|
||||
&-trigger-min {
|
||||
width: auto;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
.layout-header-left {
|
||||
::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
|
||||
color: #515a6e;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-header-light {
|
||||
background: #fff;
|
||||
color: #515a6e;
|
||||
|
||||
.n-icon {
|
||||
color: #515a6e
|
||||
}
|
||||
|
||||
.layout-header-left {
|
||||
::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
|
||||
color: #515a6e;
|
||||
.layout-header-trigger {
|
||||
&:hover {
|
||||
background: #f8f8f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-header-trigger {
|
||||
&:hover {
|
||||
background: #f8f8f9;
|
||||
}
|
||||
.layout-header-fix {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 200px;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-header-fix {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 200px;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
//::v-deep(.menu-router-link) {
|
||||
// color: #515a6e;
|
||||
//
|
||||
// &:hover {
|
||||
// color: #1890ff;
|
||||
// }
|
||||
//}
|
||||
//::v-deep(.menu-router-link) {
|
||||
// color: #515a6e;
|
||||
//
|
||||
// &:hover {
|
||||
// color: #1890ff;
|
||||
// }
|
||||
//}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user