修改bug

src/assets/images/common/dashboard.svg

@@ -0,0 +1,13 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8448_91963)">
+<path d="M14.6666 2.46669C14.6666 2.02486 14.3084 1.66669 13.8666 1.66669H2.13325C1.69142 1.66669 1.33325 2.02486 1.33325 2.46669V4.86669H14.6666V2.46669Z" stroke="#43474D" stroke-width="1.6" stroke-linejoin="round"/>
+<path d="M1.33325 13.6767L5.39179 9.57646L7.58489 11.6767L10.266 7.40002L11.7595 10.456" stroke="#43474D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.33325 4.59064V10.0573" stroke="#43474D" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M4.33838 14.3334H13.8665C14.3084 14.3334 14.6665 13.9752 14.6665 13.5334V5.20001" stroke="#43474D" stroke-width="1.6" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_8448_91963">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/scss/element-variables.scss

@@ -49,6 +49,10 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
     }
   }
 }
+// 按钮
+.el-button--primary {
+  background-color: #1665FF;
+}
 // 勾选框
 .el-checkbox {
   .el-checkbox__inner {
@@ -90,42 +94,39 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 }
 // 登出提示框
 .el-popover {
+  &.dropdown-content {
+    margin-top: 18px;
+  }
   padding: 16px 24px;
   border-radius: 8px;
-  .login-out {
+  .dropdown-item {
     display: flex;
     align-items: center;
     padding: 4px 32px 4px 12px;
     cursor: pointer;
-    div {
+    color: #43474D;
+    & + .dropdown-item {
+      margin-top: 14px;
+    }
+    &.router-link-active {
+      color: #1460F3;
+    }
+    svg {
       display: inline-block;
       width: 16px;
       height: 16px;
-      background-image: url('@/assets/images/common/login_out.svg');
-      background-repeat: no-repeat;
-      background-size: auto;
-      background-position: center;
     }
     span {
       margin-left: 12px;
       font-size: 16px;
       line-height: 24px;
-      color: #43474D;
     }
-  }
-  .login-out:hover {
-    background: rgba(20, 96, 243, 0.1);
-    border-radius: 6px;
-    div {
-      background-image: url('@/assets/images/common/login_out_hover.svg');
-    }
-    span {
+    &:hover {
       color: #1460F3;
+      background: rgba(20, 96, 243, 0.1);
+      border-radius: 6px;
     }
   }
-  .popper__arrow {
-    display: none;
-  }
 }
 // 侧边栏菜单角标
 .el-icon-arrow-down:before {

src/components/common/Header.vue

@@ -1,23 +1,40 @@
 <template>
-  <div class="header">
-    <router-link :to="{name: 'home'}">
-      <div class="logo-title">
-        <picture>
-          <source type="image/png" media="(min-width: 430px)" srcset="../../../static/images/common/logo@2x.png">
-          <source type="image/png" media="(max-width: 429px)" srcset="../../../static/images/common/logo.png">
-          <img src="../../../static/images/common/logo@2x.png" alt="logo">
-        </picture>
-        <span>ComPDFKit API</span>
+  <div class="header" :class="show && 'active'">
+    <div class="nav-content">
+      <div class="nav-left">
+        <router-link :to="{name: 'home'}">
+          <div class="logo-title">
+            <picture>
+              <source type="image/png" media="(min-width: 430px)" srcset="../../../static/images/common/logo@2x.png">
+              <source type="image/png" media="(max-width: 429px)" srcset="../../../static/images/common/logo.png">
+              <img src="../../../static/images/common/logo@2x.png" alt="logo">
+            </picture>
+            <span>ComPDFKit API</span>
+          </div>
+        </router-link>
+        <div class="line-container" :class="show && 'active'" @click="toggleMenu">
+          <div class="line"></div>
+          <div class="line"></div>
+          <div class="line"></div>
+        </div>
       </div>
-    </router-link>
-    <div v-if="$route.name !== 'login'">
-      <el-popover ref="popover" placement="bottom-end" trigger="hover">
-        <div class="login-out" @click="loginOut">
-          <div></div>
-          <span>Log out</span>
+      <nav>
+        <a class="link" href="http://test-pdf-pro.kdan.cn:3034">API Tools</a>
+        <a class="link" href="http://test-pdf-pro.kdan.cn:3034/api/docs/introduction">Documentation</a>
+        <a class="link" href="http://test-pdf-pro.kdan.cn:3034/api/contact">Pricing</a>
+        <a class="link btn" href="http://test-pdf-pro.kdan.cn:3034/api/contact">Contact Us</a>
+      </nav>
+    </div>
+    <div class=""></div>
+    <div v-if="$route.name !== 'login'" class="nav-right">
+      <el-popover ref="popover" placement="bottom-start" popper-class="dropdown-content" trigger="hover" :visible-arrow="false">
+        <router-link class="dropdown-item" to="/dashboard"><Dashboard /><span>Dashboard</span></router-link>
+        <div class="dropdown-item login-out" @click="loginOut">
+          <Logout /><span>Log out</span>
         </div>
       </el-popover>
       <div class="user-photo" v-popover:popover><p>{{ user && user.name.slice(0, 1) }}</p></div>
+      <a class="link btn" href="http://test-pdf-pro.kdan.cn:3034/api/contact">Contact Us</a>
     </div>
   </div>
 </template>
@@ -28,8 +45,14 @@ import Cookie from 'js-cookie'
 import { loginStore } from '@/store/loginStore'
 import { apiLoginOut } from '@/request/api'
 import { storeToRefs } from 'pinia'
+import Dashboard from '@/components/icon/dashboard.vue'
+import Logout from '@/components/icon/logout.vue'
 
 export default Vue.extend({
+  components: {
+    Dashboard,
+    Logout
+  },
   setup () {
     const store = loginStore()
     const { user } = storeToRefs(store)
@@ -37,12 +60,22 @@ export default Vue.extend({
       user
     }
   },
+  data () {
+    return {
+      show: false,
+      dropdownShow: false
+    }
+  },
   methods: {
+    toggleMenu () {
+      this.show = !this.show
+      this.dropdownShow = false
+    },
     loginOut () {
       apiLoginOut({}).then(res => {
         loginStore().setAuth(false)
         Cookie.remove('access_token')
-        this.$router.push('/login')
+        window.location.href = 'http://test-pdf-pro.kdan.cn:3034'
       })
     }
   }
@@ -51,12 +84,8 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   width: 100%;
   height: 80px;
-  padding: 20px 40px;
   background-color: #fff;
   box-shadow: 0px 4px 10px rgba(78, 89, 105, 0.06);
   position: fixed;
@@ -78,6 +107,7 @@ export default Vue.extend({
     }
   }
   .user-photo {
+    flex: none;
     width: 42px;
     height: 42px;
     border-radius: 50%;
@@ -91,6 +121,135 @@ export default Vue.extend({
     }
   }
 }
+.nav-content {
+  display: flex;
+  align-items: center;
+  .nav-left {
+    display: flex;
+  }
+  .link {
+    padding: 28px 0;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 24px;
+    color: #18191B;
+    &:hover {
+      color: #1460F3;
+    }
+  }
+}
+.nav-right {
+  display: flex;
+  align-items: center;
+}
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 138px;
+  height: 42px;
+  margin-left: 24px;
+  color: #1460F3;
+  border: 1px solid #1460F3;
+  border-radius: 6px;
+}
+@media screen and (max-width: 929.9px) {
+  .nav-right {
+    display: none;
+  }
+  .header {
+    &.active {
+      height: 100vh;
+      background-color: #000;
+      nav {
+        display: flex;
+      }
+      .logo-title span {
+        color: #FFF;
+      }
+      .nav-left {
+        border-bottom: 1px solid rgba(47, 47, 47, 1);
+      }
+    }
+    .logo-title {
+      img {
+        width: 18px;
+      }
+      span {
+        margin-left: 10px;
+        font-size: 20px;
+      }
+    }
+  }
+  .nav-content {
+    .nav-left {
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      padding: 17px 20px;
+    }
+    nav {
+      position: fixed;
+      top: 74px;
+      display: none;
+      flex-direction: column;
+      width: 100%;
+    }
+    .link {
+      color: #FFF;
+      padding: 20px;
+      font-size: 14px;
+      line-height: 20px;
+      border-bottom: 1px solid rgba(47, 47, 47, 1);
+      text-align: left;
+      &.btn {
+        width: 100%;
+        max-width: 242px;
+        margin: 50px auto 0;
+        height: 42px;
+        border: 1px solid #1460F3;
+        color: #1460F3;
+        &:active {
+          color: #FFF;
+          background-color: #1460F3;
+        }
+      }
+    }
+  }
+  .line-container {
+    width: 14px;
+    height: 14px;
+    .line {
+      position: relative;
+      width: 14px;
+      height: 2px;
+      background-color: #000;
+      transition: transform 0.2s linear 0s, top 0.2s linear 0s;
+      &:nth-child(2) {
+        top: 4px;
+      }
+      &:nth-child(3) {
+        top: 8px;
+      }
+    }
+    &.active {
+      .line {
+        background-color: #FFF;
+        &:first-child {
+          transform: rotate(45deg);
+          top: 6px;
+        }
+        &:nth-child(2) {
+          opacity: 0;
+        }
+        &:nth-child(3) {
+          top: 2px;
+          transform: rotate(-45deg);
+        }
+      }
+    }
+  }
+}
 @media screen and (max-width: 767px) {
   .header {
     height: 66px;
@@ -120,4 +279,32 @@ export default Vue.extend({
     }
   }
 }
+@media screen and (min-width: 930px) {
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 40px;
+  }
+  .line-container {
+    display: none;
+  }
+  .nav-content {
+    nav {
+      padding: 0 10px;
+    }
+    a {
+      margin-right: 28px;
+    }
+    .link.btn {
+      display: none;
+    }
+  }
+  .btn {
+    &:hover {
+      background-color: #1460F3;
+      color: #FFFFFF;
+    }
+  }
+}
 </style>

src/components/icon/dashboard.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_8448_91963)">
+    <path d="M14.6666 2.46669C14.6666 2.02486 14.3084 1.66669 13.8666 1.66669H2.13325C1.69142 1.66669 1.33325 2.02486 1.33325 2.46669V4.86669H14.6666V2.46669Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
+    <path d="M1.33325 13.6767L5.39179 9.57646L7.58489 11.6767L10.266 7.40002L11.7595 10.456" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M1.33325 4.59064V10.0573" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+    <path d="M4.33838 14.3334H13.8665C14.3084 14.3334 14.6665 13.9752 14.6665 13.5334V5.20001" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_8448_91963">
+      <rect width="16" height="16" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+</template>

src/request/http.ts

@@ -54,12 +54,8 @@ axios.interceptors.response.use(
         store.clearToken()
         // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
         setTimeout(() => {
-          router.replace({
-            path: '/login',
-            query: {
-              redirect: router.currentRoute.fullPath
-            }
-          })
+          const url = window.location.href
+          window.location.href = 'http://test-pdf-pro.kdan.cn:3026/login?from=api&redirect=' + url
         }, 1000)
       }
       return Promise.resolve(response)

src/router/index.ts

@@ -121,18 +121,11 @@ const router = new VueRouter({
 // 是否登录，未登录跳转登录页
 router.beforeEach(async (to, from, next) => {
   const user = loginStore().user
-  if (to.path === '/login') {
+  if (user) {
     next()
   } else {
-    if (from.path === '/login' && user) {
-      next()
-    } else {
-      if (user) {
-        next()
-      } else {
-        next('/login')
-      }
-    }
+    const url = window.location.href
+    window.location.href = 'http://test-pdf-pro.kdan.cn:3026/login?from=api&redirect=' + url
   }
 })
 

src/views/accountSettings/security.vue

@@ -63,8 +63,6 @@ interface IruleForm{
 }
 @Component
 export default class Security extends Vue {
-  password:string = crypto.get(localStorage.getItem('password'))
-
   ruleForm:IruleForm = {
     oldPassword: '',
     newPassword: '',
@@ -127,16 +125,19 @@ export default class Security extends Vue {
         this.validPassword()
         if (!this.showErrTipOld && !this.showErrTipNotMatch) {
           apiChangePassword({
-            old_password: crypto.get(localStorage.getItem('password')),
+            old_password: this.ruleForm.oldPassword,
             new_password: this.ruleForm.newPassword,
             password_confirm: this.ruleForm.comfirmPassword
           }, {}).then((res: any) => {
             if (res.code === 200) {
-              // const SECRET_PWD = crypto.set(this.ruleForm.comfirmPassword) // 加密
-              // localStorage.setItem('password', SECRET_PWD)
               this.changedSuccessBox()
-            } else if (res.code === 500 && res.message === 'The Password and Confirm Password do not match.') {
-              this.$message.error('New password cannot be the same as your old password.')
+            } else if (res.code === 500) {
+              if (res.message === 'Incorrect Old Password.' || res.message === 'Cannot Match Old Password.') {
+                this.showErrTipOld = true
+              } else if (res.message === 'The Password and Confirm Password do not match.') {
+                this.$message.error('New password cannot be the same as your old password.')
+              }
+              this.$message.error('Changed Failed!')
             } else {
               this.$message.error('Changed Failed!')
             }
@@ -183,29 +184,16 @@ export default class Security extends Vue {
       if (!isRemenber) {
         localStorage.removeItem('isRemenber')
       }
-      localStorage.removeItem('password')
-      this.$router.replace({
-        path: '/login',
-        query: {
-          redirect: this.$router.currentRoute.fullPath
-        }
-      })
+      const url = window.location.href
+      window.location.href = 'http://test-pdf-pro.kdan.cn:3026/login?from=api&redirect=' + url
     }).catch(() => {
-      this.$router.replace({
-        path: '/login',
-        query: {
-          redirect: this.$router.currentRoute.fullPath
-        }
-      })
+      const url = window.location.href
+      window.location.href = 'http://test-pdf-pro.kdan.cn:3026/login?from=api&redirect=' + url
     })
   }
 
   // 校验密码是否与确认密码相同
   validPassword () {
-    if (this.password !== this.ruleForm.oldPassword) {
-      this.showErrTipOld = true
-      this.$message.error('Changed Failed!')
-    }
     if (this.ruleForm.newPassword !== this.ruleForm.comfirmPassword) {
       this.showErrTipNotMatch = true
       this.$message.error('Changed Failed!')