|
|
@@ -1,16 +1,15 @@
|
|
|
<template>
|
|
|
- <a-layout-header class="header">
|
|
|
+ <a-layout-header class="header" :style="{backgroundColor: headerBgColor}">
|
|
|
<a-row style="width: 100%;" >
|
|
|
- <a-col :span="3" >
|
|
|
+ <!-- <a-col :span="3" >
|
|
|
<div class="logo" >
|
|
|
<img :src="logoPng" alt="">
|
|
|
</div>
|
|
|
- </a-col>
|
|
|
- <a-col :span="19" >
|
|
|
+ </a-col> -->
|
|
|
+ <a-col :span="18" >
|
|
|
<a-menu
|
|
|
- theme="dark"
|
|
|
mode="horizontal"
|
|
|
- :style="{ lineHeight: '64px' }"
|
|
|
+ :style="{ lineHeight: '64px', border: 'none' }"
|
|
|
:selectedKeys="selectedKeys"
|
|
|
>
|
|
|
<a-menu-item
|
|
|
@@ -22,8 +21,15 @@
|
|
|
</a-menu-item>
|
|
|
</a-menu>
|
|
|
</a-col>
|
|
|
- <a-col :span="1" >
|
|
|
- <user />
|
|
|
+ <a-col :span="4" >
|
|
|
+ <a-row :gutter="[8, 8]" justify="end" >
|
|
|
+ <a-col class="df-center" >
|
|
|
+ <a-button type="text" @click="changeTheme" > <IconTsx :name="iconName" /></a-button>
|
|
|
+ </a-col>
|
|
|
+ <a-col class="df-center" >
|
|
|
+ <user />
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
|
|
|
@@ -31,11 +37,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup >
|
|
|
-import { onMounted, ref } from 'vue'
|
|
|
+import { computed, onMounted, ref } from 'vue'
|
|
|
import { useAppRouter } from '@/store/router'
|
|
|
import user from './user.vue'
|
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
|
import { routes } from '@/router/index'
|
|
|
+import { IconTsx } from '@/components/MicroComponents/index'
|
|
|
+import { useDesignStore } from '@/store'
|
|
|
|
|
|
const logoPng = require('@/assets/logo.jpg')
|
|
|
|
|
|
@@ -47,6 +55,18 @@ const appRouter = useAppRouter()
|
|
|
|
|
|
const selectedKeys = ref<string[]>()
|
|
|
|
|
|
+const designStore = useDesignStore()
|
|
|
+
|
|
|
+console.log('designStore:', !!designStore.theme, designStore.theme)
|
|
|
+
|
|
|
+const iconName = computed(() => designStore.theme ? 'sun' : 'moon')
|
|
|
+
|
|
|
+const headerBgColor = computed(() => designStore.theme ? '#141414' : '#fff')
|
|
|
+
|
|
|
+const changeTheme = () => {
|
|
|
+ designStore.changeModeltheme()
|
|
|
+}
|
|
|
+
|
|
|
const changeRouter = (route: ROUTER.RoutesProps) => {
|
|
|
if (route.link) {
|
|
|
window.open(route.path)
|
|
|
@@ -91,6 +111,7 @@ onMounted(() => {
|
|
|
.header {
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
+ background-color: #fff;
|
|
|
}
|
|
|
|
|
|
.logo {
|
|
|
@@ -101,4 +122,10 @@ onMounted(() => {
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.df-center {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
</style>
|
lvkun996