feat: save

src/view/layout/nav.vue

@@ -9,23 +9,43 @@
           @click="router.back()"
           v-if="showBack"
         />
-        <span v-if="!name">不可移动文物管理平台</span>
-      </span>
-      <el-dropdown placement="bottom-end" class="avatar" v-if="user">
-        <span class="avatar-left-label">
-          <span class="org"> {{ user.orgName }}</span>
-          <span class="name"> {{ user.nickName }}</span>
-          <el-avatar :src="user.head || avatarDefault" />
+
+        <span v-if="!name" class="logo-wrapper">
+          <img class="sp" src="/image/logo_sp.png" alt="logo" />
+          <span>不可移动文物管理平台</span>
         </span>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item @click="passwordHandler"
-              >修改密码</el-dropdown-item
-            >
-            <el-dropdown-item @click="logoutHandler">退出登录</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
+      </span>
+      <div class="right-panel" v-if="user && !['pano', 'map'].includes(name)">
+        <a
+          target="_blank"
+          class="helper"
+          href="https://showdoc.4dage.com/web/#/179?page_id=1007"
+        >
+          <el-icon>
+            <QuestionFilled />
+          </el-icon>
+          帮助
+        </a>
+        <el-dropdown placement="bottom-start" class="avatar" v-if="user">
+          <span class="avatar-left-label">
+            <el-avatar class="avatar" :src="user.head || avatarDefault" />
+          </span>
+
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="passwordHandler"
+                >修改密码</el-dropdown-item
+              >
+              <el-dropdown-item @click="logoutHandler"
+                >退出登录</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+
+        <span class="name" v-if="user"> {{ user.nickName }}</span>
+        <span class="org" v-if="user"> {{ user.orgName }}</span>
+      </div>
     </div>
     <div class="content">
       <ly-slide class="slide" v-if="user && !['pano', 'map'].includes(name)" />
@@ -41,7 +61,7 @@
 </template>
 
 <script setup lang="ts">
-import { Back } from "@element-plus/icons-vue";
+import { Back, QuestionFilled } from "@element-plus/icons-vue";
 import { router } from "@/router";
 import { computed, reactive } from "vue";
 import { user, logout } from "@/store/user";
@@ -117,19 +137,34 @@ const showBack = computed(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: 60px;
   padding: 4px 10px;
 
-  .avatar-left-label {
+  .right-panel {
     display: inline-flex;
     align-items: center;
-    outline: none;
-
+    .avatar {
+      margin-right: 10px;
+      width: 22px;
+      height: 22px;
+      &:hover {
+        cursor: pointer;
+      }
+    }
     .name,
     .org {
       padding-right: 10px;
+      font-size: 14px;
+      color: #606266;
     }
   }
 
+  .avatar-left-label {
+    display: inline-flex;
+    align-items: center;
+    outline: none;
+  }
+
   &:not(.pano, .map) {
     border-bottom: 1px solid var(--border-color);
     flex: 0 0 auto;
@@ -197,4 +232,36 @@ const showBack = computed(() => {
     margin-left: 10px;
   }
 }
+.logo-wrapper {
+  display: inline-flex;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: 20px;
+  color: #303133;
+  line-height: 23px;
+  letter-spacing: 2px;
+  text-align: left;
+  font-style: normal;
+  justify-content: center;
+  align-items: center;
+  .sp {
+    height: 23px;
+    width: auto;
+    margin-right: 16px;
+  }
+}
+.helper {
+  font-size: 14px;
+  color: #177ddc;
+  margin-right: 16px;
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  i {
+    margin-right: 3px;
+  }
+  &:hover {
+    color: #0b467d;
+  }
+}
 </style>