modify navbar

src/components/customPic/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <span class="headerAvatar">
+    <template v-if="picType === 'avatar'">
+      <el-avatar v-if="useTenantStore.tenant.headerImg" :size="30" :src="avatar" />
+      <el-avatar v-else :size="30" :src="noAvatar" />
+    </template>
+    <template v-if="picType === 'img'">
+      <img v-if="useTenantStore.tenant.headerImg" :src="avatar" class="avatar">
+      <img v-else :src="noAvatar" class="avatar">
+    </template>
+    <template v-if="picType === 'file'">
+      <img :src="file" class="file">
+    </template>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { tenantStore } from '@/store/modules/tenant'
+import noAvatarPng from '@/assets/noBody.png'
+
+const props = defineProps({
+  picType: {
+    type: String,
+    required: false,
+    default: 'avatar'
+  },
+  picSrc: {
+    type: String,
+    required: false,
+    default: ''
+  }
+})
+const path = ref(import.meta.env.VITE_BASE_API + '/')
+const noAvatar = ref(noAvatarPng)
+const useTenantStore = tenantStore()
+const avatar = computed(() => {
+  if (props.picSrc === '') {
+    if (useTenantStore.tenant.headerImg !== '' && useTenantStore.tenant.headerImg.slice(0, 4) === 'http') {
+      return useTenantStore.tenant.headerImg
+    }
+    return path.value + useTenantStore.tenant.headerImg
+  } else {
+    if (props.picSrc !== '' && props.picSrc.slice(0, 4) === 'http') {
+      return props.picSrc
+    }
+    return path.value + props.picSrc
+  }
+})
+const file = computed(() => {
+  if (props.picSrc && props.picSrc.slice(0, 4) !== 'http') {
+    return path.value + props.picSrc
+  }
+  return props.picSrc
+})
+</script>
+<style scoped>
+.headerAvatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 8px;
+}
+
+.file {
+  width: 80px;
+  height: 80px;
+  position: relative;
+}
+</style>

src/components/layout/NavBar.vue

@@ -1,5 +1,58 @@
 <template>
-  <div class="nav-main">
+  <el-row class="pd-0">
+    <el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1" style="z-index:100">
+      <!-- <div class="menu-total" @click="totalCollapse">
+        <div v-if="isCollapse" class="gvaIcon gvaIcon-arrow-double-right" />
+        <div v-else class="gvaIcon gvaIcon-arrow-double-left" />
+      </div> -->
+    </el-col>
+    <el-col :xs="10" :lg="14" :md="14" :sm="9" :xl="14" :pull="1">
+      <!-- 修改为手机端不显示顶部标签 -->
+      <!-- <el-breadcrumb v-show="!isMobile" class="breadcrumb">
+        <el-breadcrumb-item
+          v-for="item in matched.slice(1,matched.length)"
+          :key="item.path"
+        >{{ fmtTitle(item.meta.title,route) }}</el-breadcrumb-item>
+      </el-breadcrumb> -->
+    </el-col>
+    <el-col :xs="12" :lg="9" :md="9" :sm="14" :xl="9">
+      <div class="right-box">
+        <!-- <Search /> -->
+        <el-dropdown>
+          <div class="dp-flex justify-content-center align-items height-full width-full">
+            <span class="header-avatar" style="cursor: pointer">
+              <CustomPic />
+              <span v-show="!useSettingsStore.isMobile" style="margin-left: 5px">{{
+                useTenantStore.tenant.account
+              }}</span>
+              <el-icon>
+                <arrow-down />
+              </el-icon>
+            </span>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu class="dropdown-group">
+              <el-dropdown-item>
+                <span style="font-weight: 600;">
+                  当前角色：{{ useTenantStore.tenant.account }}
+                </span>
+              </el-dropdown-item>
+              <template v-if="useTenantStore.tenant.account">
+                <!-- <el-dropdown-item v-for="item in userStore.userInfo.authorities.filter(i=>i.authorityId!==userStore.userInfo.authorityId)" :key="item.authorityId" @click="changeUserAuth(item.authorityId)">
+                  <span>
+                    切换为：{{ item.authorityName }}
+                  </span>
+                </el-dropdown-item> -->
+              </template>
+              <el-dropdown-item icon="avatar" @click="toPerson">个人信息</el-dropdown-item>
+              <el-dropdown-item icon="reading-lamp" @click="useTenantStore.logout">登 出</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </el-col>
+  </el-row>
+  <!-- <div class="nav-main">
     <div style="width: 800px;">
       <div>
         当前时间：{{ time }}
@@ -36,27 +89,37 @@
       </span>
     </template>
   </el-dialog>
-  <span @click="doLogin" v-show="!useTenantStore.tenant.account">登录</span>
+  <span @click="doLogin" v-show="!useTenantStore.tenant.account">登录</span> -->
 </template>
 
 <script setup lang='ts'>
-import $moment from "moment";
+import { reactive, ref } from "vue"
-import { reactive, ref } from "vue";
+import $moment from "moment"
-import router from '../../router'
+import router from '@/router/index'
-import { tenantStore } from '../../store/modules/tenant'
+import CustomPic from "@/components/customPic/index.vue";
-import { logout } from '../../api/user'
+import { tenantStore } from '@/store/modules/tenant'
-// obtain user infomation 
+import { settingsStore } from '@/store/modules/settings'
+import { logout } from '@/api/user'
+
+// -- IMPORT --
 const useTenantStore = tenantStore()
-useTenantStore.reflush()
+const useSettingsStore = settingsStore()
+
+// -- REACTIVE OBJECT --
+
+// -- REF OBJECT --
 const dialogVisible = ref(false)
 
-// show time 
-let time = ref<String>($moment().format("YYYY年MM月DD日  HH:mm:ss"));
-setInterval(() => {
-  time.value = $moment().format("YYYY年MM月DD日  HH:mm:ss");
-}, 1000);
 
-// login logout function
+// obtain user infomation 
+
+useTenantStore.reflush()
+
+// -- EVENT DEFINITION
+const toPerson = () => {
+
+}
+
 const doLogin = () => {
   router.push({
     path: '/login'
@@ -71,9 +134,18 @@ const doLogout = () => {
     })
   })
 }
+
+
+// show time 
+let time = ref<String>($moment().format("YYYY年MM月DD日  HH:mm:ss"));
+setInterval(() => {
+  time.value = $moment().format("YYYY年MM月DD日  HH:mm:ss");
+}, 1000);
+
+
 </script>
 
-<style>
+<style lang="scss" scoped>
 .open_side {
   background: url("../../assets/logo.png") center no-repeat;
   background-size: cover;
@@ -85,4 +157,23 @@ const doLogout = () => {
   justify-content: space-between;
   /* background-color: bisque; */
 }
+
+.right-box {
+  padding-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  img {
+    vertical-align: middle;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+  }
+}
+
+.header-avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>

src/store/modules/tenant.ts

@@ -9,7 +9,7 @@ export const tenantStore = defineStore('tenant', () => {
     account: '',
     token: '',
     id: '',
-    headerImg: '',
+    headerImg: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
   })
 
   const login = async (tenant: Tenant, token: string) => {