bug: 添加环境变量及修改侧边栏和顶部bug

.env.development

@@ -0,0 +1,3 @@
+VUE_APP_API_DOMAIN="http://test-pdf-pro.kdan.cn:3034"
+VUE_APP_PDFSDK_DOMAIN="http://test-pdf-pro.kdan.cn:3026"
+VUE_APP_MODE_ENV="development"

.env.preparing

@@ -0,0 +1,3 @@
+VUE_APP_API_DOMAIN="http://test-pdf-pro.kdan.cn:3034"
+VUE_APP_PDFSDK_DOMAIN="http://test-pdf-pro.kdan.cn:3026"
+VUE_APP_MODE_ENV="preparing"

.env.production

@@ -0,0 +1,3 @@
+VUE_APP_API_DOMAIN="https://api.compdf.com"
+VUE_APP_PDFSDK_DOMAIN="https://www.compdf.com"
+VUE_APP_MODE_ENV="production"

package.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "cross-env MODE_ENV=development vue-cli-service serve",
-    "build:preparing": "cross-env MODE_ENV=preparing vue-cli-service build",
-    "build": "cross-env MODE_ENV=production vue-cli-service build",
+    "dev": "cross-env MODE_ENV=development vue-cli-service serve --mode development",
+    "build:preparing": "cross-env MODE_ENV=preparing vue-cli-service build --mode preparing",
+    "build": "cross-env MODE_ENV=production vue-cli-service build --mode production",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

src/assets/scss/element-variables.scss

@@ -51,7 +51,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 }
 // 按钮
 .el-button--primary {
-  background-color: #1665FF;
+  background: #1665FF;
 }
 // 勾选框
 .el-checkbox {
@@ -162,6 +162,14 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
       border-radius: 6px;
       font-size: 16px;
     }
+    .el-button--primary {
+      &:focus {
+        background: #1665FF;
+      }
+      &:hover {
+        background: #66b1ff;
+      }
+    }
   }
 }
 // 删除弹框

src/components/common/Aside.vue

@@ -38,7 +38,7 @@
             <span>Support</span>
           </template>
           <el-menu-item index="">
-            <a href="/download/ComPDFKit API Reference v0.2.0.md" download="ComPDFKit API Reference v0.2.0.md" class="downloadDoc">
+            <a :href="apiDomain + '/api/docs/introduction'" class="downloadDoc">
               Documentation
             </a>
           </el-menu-item>
@@ -65,7 +65,7 @@
       <el-submenu index="4">
         <template slot="title"><span>Support</span></template>
         <el-menu-item index="">
-          <a href="/download/ComPDFKit API Reference v0.2.0.md" download="ComPDFKit API Reference v0.2.0.md" class="downloadDoc">
+          <a :href="apiDomain + '/api/docs/introduction'" class="downloadDoc">
             Documentation
           </a>
         </el-menu-item>
@@ -91,6 +91,9 @@ import Support from '@/components/icon/menu_support.vue'
   }
 })
 export default class Aside extends Vue {
+  // data
+  apiDomain = process.env.VUE_APP_API_DOMAIN
+
   user = loginStore().user
   get path () {
     if (this.$route.path === '/api/keys/new-project') {

src/components/common/Header.vue

@@ -2,7 +2,7 @@
   <div class="header" :class="show && 'active'">
     <div class="nav-content">
       <div class="nav-left">
-        <router-link :to="{name: 'home'}">
+        <a :href="apiDomain">
           <div class="logo-title">
             <picture>
               <source type="image/png" media="(min-width: 430px)" srcset="../../../static/images/common/logo@2x.png">
@@ -11,21 +11,27 @@
             </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>
+        </a>
+        <div class="min-nav-right">
+          <span @click="toggleDropdown">{{ user && user.name.slice(0, 1) }}</span>
+          <div class="line-container" :class="show && 'active'" @click="toggleMenu">
+            <div class="line"></div>
+            <div class="line"></div>
+            <div class="line"></div>
+          </div>
         </div>
       </div>
       <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>
+        <a class="link" :href="apiDomain">API Tools</a>
+        <a class="link" :href="apiDomain + '/api/docs/introduction'">Documentation</a>
+        <a class="link" :href="apiDomain + '/api/contact'">Pricing</a>
+        <a class="link btn" :href="apiDomain + '/api/contact'">Contact Us</a>
       </nav>
     </div>
-    <div class=""></div>
+    <div v-show="dropdownShow" class="dropdown-menu" :class="dropdownShow && 'active'">
+      <router-link @click.native="toggleDropdown" to="/dashboard" class="dropdown-item"><Dashboard /><span>Dashboard</span></router-link>
+      <div class="dropdown-item login-out" @click="loginOut"><Logout /><span>Log out</span></div>
+    </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>
@@ -34,7 +40,7 @@
         </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>
+      <a class="link btn" :href="apiDomain + '/api/contact'">Contact Us</a>
     </div>
   </div>
 </template>
@@ -63,10 +69,15 @@ export default Vue.extend({
   data () {
     return {
       show: false,
-      dropdownShow: false
+      dropdownShow: false,
+      apiDomain: process.env.VUE_APP_API_DOMAIN
     }
   },
   methods: {
+    toggleDropdown () {
+      this.dropdownShow = !this.dropdownShow
+      this.show = false
+    },
     toggleMenu () {
       this.show = !this.show
       this.dropdownShow = false
@@ -75,7 +86,7 @@ export default Vue.extend({
       apiLoginOut({}).then(res => {
         loginStore().setAuth(false)
         Cookie.remove('access_token')
-        window.location.href = 'http://test-pdf-pro.kdan.cn:3034'
+        window.location.href = this.apiDomain
       })
     }
   }
@@ -181,6 +192,25 @@ export default Vue.extend({
       }
     }
   }
+  .min-nav-right {
+    display: flex;
+    align-items: center;
+    span {
+      flex: none;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 32px;
+      margin-right: 16px;
+      font-weight: 700;
+      font-size: 22px;
+      line-height: 32px;
+      color: #000000;
+      border-radius: 50%;
+      cursor: pointer;
+      background-color: #FFE248;
+    }
+  }
   .nav-content {
     .nav-left {
       align-items: center;
@@ -249,6 +279,44 @@ export default Vue.extend({
       }
     }
   }
+  .dropdown-menu {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 22px;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+    background-color: #FFF;
+    border-bottom-right-radius: 8px;
+    border-bottom-left-radius: 8px;
+    .dropdown-item {
+      display: flex;
+      align-items: center;
+      & + .dropdown-item {
+        margin-top: 10px;
+      }
+      cursor: pointer;
+      color: #43474D;
+      &.router-link-active {
+        color: #1460F3;
+      }
+      svg {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+      }
+      span {
+        margin-left: 12px;
+        font-size: 16px;
+        line-height: 24px;
+      }
+      &:active {
+        color: #1460F3;
+        background: rgba(20, 96, 243, 0.1);
+        border-radius: 6px;
+      }
+    }
+  }
 }
 @media screen and (max-width: 767px) {
   .header {
@@ -259,7 +327,6 @@ export default Vue.extend({
 }
 @media screen and (max-width: 429px) {
   .header {
-    padding: 21px 16px 21px 27px;
     .logo-title {
       img {
         width: 18.5px;
@@ -286,8 +353,8 @@ export default Vue.extend({
     justify-content: space-between;
     padding: 20px 40px;
   }
-  .line-container {
-    display: none;
+  .min-nav-right, .dropdown-menu {
+    display: none !important;
   }
   .nav-content {
     nav {

src/components/progress/Progress.vue

@@ -34,7 +34,6 @@ export default class Progress extends Vue {
   isShow = true
 
   created () {
-    console.log(this.init)
     if (this.init) {
       this.getFileAmount()
     }

src/request/api.ts

@@ -1,7 +1,7 @@
 import { get, post, put, del, getWithConfig } from './http'
 
 let baseUrl = 'https://wms.compdf.com'
-if (process.env.MODE_ENV !== 'production') {
+if (process.env.VUE_APP_MODE_ENV !== 'production') {
   baseUrl = 'http://test-compdf.kdan.cn:3060'
 }
 // 登录

src/request/http.ts

@@ -13,7 +13,7 @@ import router from '../router'
 const store = loginStore(pinia)
 
 // 环境的切换
-if (process.env.MODE_ENV === 'production') {
+if (process.env.VUE_APP_MODE_ENV === 'production') {
   axios.defaults.baseURL = 'https://api-backend.compdf.com'
 } else {
   axios.defaults.baseURL = 'http://101.132.103.13:8088'
@@ -55,7 +55,7 @@ axios.interceptors.response.use(
         // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
         setTimeout(() => {
           const url = window.location.href
-          window.location.href = 'http://test-pdf-pro.kdan.cn:3026/login?from=api&redirect=' + url
+          window.location.href = process.env.VUE_APP_PDFSDK_DOMAIN + '/login?from=api&redirect=' + url
         }, 1000)
       }
       return Promise.resolve(response)

src/router/index.ts

@@ -125,7 +125,7 @@ router.beforeEach(async (to, from, next) => {
     next()
   } else {
     const url = window.location.href
-    window.location.href = 'http://test-pdf-pro.kdan.cn:3026/login?from=api&redirect=' + url
+    window.location.href = process.env.VUE_APP_PDFSDK_DOMAIN + '/login?from=api&redirect=' + url
   }
 })
 

src/store/loginStore.ts

@@ -3,10 +3,11 @@ import Cookie from 'js-cookie'
 
 const rawUser = Cookie.get('user')
 const user = rawUser && JSON.parse(rawUser)
+
 export const loginStore = defineStore('login', {
   state: () => ({
     isAuthenticated: false,
-    token: Cookie.get('access_token') || '',
+    token: (user && user.access_token) || '',
     user: user || null
   }),
   getters: {

src/views/accountSettings/security.vue

@@ -83,6 +83,8 @@ export default class Security extends Vue {
     ]
   }
 
+  pdfsdkDomain = process.env.VUE_APP_PDFSDK_DOMAIN
+
   passwordType = false
   passwordType2 = false
   passwordType3 = false
@@ -185,10 +187,10 @@ export default class Security extends Vue {
         localStorage.removeItem('isRemenber')
       }
       const url = window.location.href
-      window.location.href = 'http://test-pdf-pro.kdan.cn:3026/login?from=api&redirect=' + url
+      window.location.href = this.pdfsdkDomain + '/login?from=api&redirect=' + url
     }).catch(() => {
       const url = window.location.href
-      window.location.href = 'http://test-pdf-pro.kdan.cn:3026/login?from=api&redirect=' + url
+      window.location.href = this.pdfsdkDomain + '/login?from=api&redirect=' + url
     })
   }