feat: 个人信息

src/components/header/Login.vue

@@ -45,7 +45,7 @@
 import { ref, onMounted } from 'vue'
 import { http } from '@/utils/request'
 import common from '@/utils/common'
-const emits = defineEmits(['close','user'])
+const emits = defineEmits(['close', 'user'])
 const showpass = ref(false)
 const remember = ref(false)
 const username = ref('')
@@ -83,8 +83,12 @@ const onLogin = () => {
                     localStorage.removeItem('username')
                     localStorage.removeItem('password')
                 }
-                localStorage.setItem('token',response.data.token)
-                emits('user',response.data.user)
+                localStorage.setItem('token', response.data.token)
+                emits('user', {
+                    head: response.data.user.head,
+                    nickName: response.data.user.nickName,
+                })
+                emits('close')
             } else {
                 errors.value.message = response.message
             }

src/components/header/index.vue

@@ -1,5 +1,8 @@
 <template>
-    <header>
+    <header v-if="showAdjust">
+        <div v-if="project">{{ project.projectName }}</div>
+    </header>
+    <header v-else>
         <div v-if="project">{{ project.projectName }}</div>
         <div class="user">
             <ul>
@@ -7,24 +10,42 @@
                     <i class="iconfont icon-share"></i>
                 </li>
                 <li><em></em></li>
-                <li class="login" @click="showLogin = true"><span>登录</span></li>
+                <li v-if="user" class="uinfo" @click="showDrop = true">
+                    <img :src="user.head + '&x-oss-process=image/resize,m_fill,w_64,h_64/quality,q_70'" alt="" />
+                    <div class="menu">
+                        <ul>
+                            <li><a href="">个人信息</a></li>
+                            <li class="split"></li>
+                            <li><span>退出登录</span></li>
+                        </ul>
+                    </div>
+                </li>
+                <li v-else class="login" @click="showLogin = true"><span>登录</span></li>
             </ul>
         </div>
-        <Login v-if="showLogin" @close="showLogin = false" />
+        <Login v-if="showLogin" @close="showLogin = false" @user="info => (user = info)" />
     </header>
 </template>
 <script setup>
-import { ref,defineProps, onMounted } from 'vue'
+import { ref, defineProps, onMounted } from 'vue'
 import { http } from '@/utils/request'
+import browser from '@/utils/browser'
 import Login from './Login'
 const props = defineProps({
     project: Object,
 })
+
+const user = ref(null)
 const showLogin = ref(false)
+const showAdjust = ref(browser.urlHasValue('adjust'))
 const getUserInfo = () => {
     http.post(`smart-site/getUserInfo`)
         .then(response => {
             if (response.success) {
+                user.value = {
+                    head: response.data.head,
+                    nickName: response.data.nickName,
+                }
             } else {
                 if (response.code == 4008) {
                     // 未登录
@@ -33,7 +54,11 @@ const getUserInfo = () => {
         })
         .catch(() => {})
 }
-onMounted(() => {})
+onMounted(() => {
+    if (localStorage.getItem('token')) {
+        getUserInfo()
+    }
+})
 </script>
 <style lang="scss" scoped>
 ul,
@@ -77,9 +102,69 @@ header {
         background-color: rgba(255, 255, 255, 0.16);
     }
 
-    .login{
+    .login {
         cursor: pointer;
-        color:rgba(0, 118, 246, 1) ;
+        color: rgba(0, 118, 246, 1);
+    }
+    .uinfo {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        font-size: 14px;
+        &::after {
+            content: '';
+            position: absolute;
+            right: 3px;
+            bottom: 4px;
+            width: 0;
+            height: 0;
+            border-color: rgba(255, 255, 255, 0.6) transparent;
+            border-width: 0 0 5px 5px;
+            border-style: solid;
+        }
+        &:hover{
+            .menu{
+                display: block;
+            }
+        }
+        img {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background-size: cover;
+            border: none;
+            outline: none;
+            overflow: hidden;
+            cursor: pointer;
+        }
+        .menu {
+            display: none;
+            position: absolute;
+            top: 40px;
+            right: 0;
+            z-index: 2000;
+            a {
+                color: #fff;
+                text-decoration: none;
+            }
+            ul {
+                background-color: #343535;
+                width: 128px;
+                flex-direction: column;
+                border-radius: 4px;
+                box-shadow: 0 0 4px #333;
+                padding: 0 10px;
+                margin-top: 15px
+            }
+            li {
+                height: 45px;
+                line-height: 45px;
+                text-align: center;
+            }
+        }
     }
 }
 </style>

src/pages/Viewer.vue

@@ -48,7 +48,7 @@ import { http } from '@/utils/request'
 import browser from '@/utils/browser'
 import AppHeader from '@/components/header'
 import Calendar from '@/components/calendar'
-import sync,{ loadSourceScene, loadTargetScene } from '@/utils/sync'
+import sync, { loadSourceScene, loadTargetScene } from '@/utils/sync'
 
 const bimChecked = ref(null)
 const dbsChecked = ref(null)
@@ -153,13 +153,13 @@ const onLoadSource = () => {
         return
     }
 
-    loadSourceScene(sourceFrame,source.value.type < 2 ? 'kankan' : 'laser')
+    loadSourceScene(sourceFrame, source.value.type < 2 ? 'kankan' : 'laser')
 }
 const onLoadTarget = () => {
     if (bimChecked.value) {
-        loadTargetScene(targetFrame,'bim')
+        loadTargetScene(targetFrame, 'bim')
     } else {
-        loadTargetScene(targetFrame,target.value.type < 2 ? 'kankan' : 'laser')
+        loadTargetScene(targetFrame, target.value.type < 2 ? 'kankan' : 'laser')
     }
 }