自测bug修复

.env.development

@@ -1,4 +1,4 @@
 VUE_APP_API_DOMAIN="http://test-pdf-pro.kdan.cn:3034"
 VUE_APP_PDFSdk_DOMAIN="http://test-pdf-pro.kdan.cn:3026"
-VUE_APP_SaaS_DOMAIN="http://localhost"
+VUE_APP_SaaS_DOMAIN="localhost"
 VUE_APP_MODE_ENV="development"

.env.preparing

@@ -1,4 +1,4 @@
 VUE_APP_API_DOMAIN="http://test-pdf-pro.kdan.cn:3034"
 VUE_APP_PDFSdk_DOMAIN="http://test-pdf-pro.kdan.cn:3026"
-VUE_APP_SaaS_DOMAIN="http://test-pdf-pro.kdan.cn:3036"
+VUE_APP_SaaS_DOMAIN="test-pdf-pro.kdan.cn"
 VUE_APP_MODE_ENV="preparing"

.env.production

@@ -1,4 +1,4 @@
 VUE_APP_API_DOMAIN="https://api.compdf.com"
 VUE_APP_PDFSdk_DOMAIN="https://www.compdf.com"
-VUE_APP_SaaS_DOMAIN="https://api-dashboard.compdf.com/"
+VUE_APP_SaaS_DOMAIN="compdf.com"
 VUE_APP_MODE_ENV="production"

src/assets/scss/common.scss

@@ -132,35 +132,53 @@ select {
     padding-right: 20px;
   }
 }
-// @media (min-width: 360px) and (max-width: 575px) {
-//   .container {
-//     padding-left: 16px;
-//     padding-right: 16px;
-//   }
-// }
-// @media (min-width: 576px) {
-//   .container {
-//     max-width: 540px;
-//     padding-left: 10px;
-//     padding-right: 10px;
-//   }
-// }
-// @media (min-width: 768px) {
-//   .container {
-//     max-width: 720px;
-//   }
-// }
-// @media (min-width: 930px) {
-//   .container {
-//     max-width: 960px;
-//     min-width: 900px;
-//   }
-// }
-// @media (min-width: 1280px) {
-//   .container {
-//     max-width: 1200px;
-//   }
-// }
+/*滚动条样式*/
+::-webkit-scrollbar {
+  width: 4px;
+  height: 5px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #F4F8FF;
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+}
+::-webkit-scrollbar-track {
+  display: none;
+}
+input::placeholder {
+  font-size: 14px;
+  color: #CCCCCC;
+  line-height: 20px;
+  font-family: 'Poppins';
+}
+input::-webkit-input-placeholder {
+  /* WebKit browsers，webkit内核浏览器 */
+  font-size: 14px;
+  color: #CCCCCC;
+  line-height: 20px;
+  font-family: 'Poppins';
+} 
+input:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */ 
+  font-size: 14px;
+  color: #CCCCCC;
+  line-height: 20px;
+  font-family: 'Poppins';
+} 
+input::-moz-placeholder {
+  /* Mozilla Firefox 19+ */ 
+  font-size: 14px;
+  color: #CCCCCC;
+  line-height: 20px;
+  font-family: 'Poppins';
+} 
+input:-ms-input-placeholder {
+  /* Internet Explorer 10+ */ 
+  font-size: 14px;
+  color: #CCCCCC;
+  line-height: 20px;
+  font-family: 'Poppins';
+}
 // 阴影块div
 .block {
   width: 100%;

src/assets/scss/element-variables.scss

@@ -219,6 +219,13 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 }
 // 表格 - API Keys页
 .el-table {
+  .el-table__body-wrapper {
+    .el-table__body .el-table__row:last-child {
+      .el-table__cell {
+        border: none;
+      }
+    }
+  }
   th.el-table__cell {
     padding: 16px 0;
     font-size: 14px;
@@ -231,7 +238,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
     }
   }
   .el-table__cell {
-    padding: 16px 0;
+    padding: 16px;
     .cell {
       position: relative;
       padding: 0;
@@ -240,6 +247,9 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
       overflow: visible;
     }
   }
+  &::before {
+    display: none;
+  }
 }
 // 消息提示 成功/失败
 .el-message {
@@ -357,15 +367,15 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
     border-right: none;
   }
   .el-submenu__title {
-    display: flex;
-    align-items: center;
     height: 40px;
-    padding: 0;
-    padding-left: 0 !important;
-    margin-bottom: 8px;
-    font-weight: 700;
+    display: flex;
     font-size: 16px;
+    font-weight: 700;
     line-height: 28px;
+    margin-bottom: 8px;
+    align-items: center;
+    padding: 0 !important;
+    color: #232748 !important;
     svg {
       margin-right: 18px;
     }
@@ -373,6 +383,11 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
       color: #43474D;
     }
   }
+  .el-menu--inline {
+    .el-menu-item {
+      color: #52555F;
+    }
+  }
   .el-submenu__icon-arrow {
     font-size: 14px;
   }
@@ -387,8 +402,9 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
     white-space: normal;
   }
   .el-menu-item:hover, .el-menu-item:focus, .el-menu-item.is-active {
-    background-color: #e7effe;
     border-radius: 6px;
+    background-color: #e7effe;
+    color: rgb(20, 96, 243) !important;
   }
   .el-submenu__title:hover {
     background-color: unset;

src/components/common/Aside.vue

@@ -51,11 +51,11 @@
       <div @click.stop="changeLangEvent" class="switch">
         <div class="choose" :class="languageActive && 'chooseActive'">
           <p  @click.stop="changeLangEvent('en')">English</p>
-          <p @click.stop="changeLangEvent('zh-cn')">Chinese</p>
+          <p @click.stop="changeLangEvent('zh-cn')">简体中文</p>
         </div>
         <div :class="languageActive && 'active'" class="sideBox">
           <Language />
-          {{ $i18n.locale === 'en' ? 'English' : 'Chinese' }}
+          {{ $i18n.locale === 'en' ? 'English' : '简体中文' }}
         </div>
       </div>
     </div>
@@ -63,34 +63,36 @@
     <el-menu class="min" :default-active="path" mode="horizontal" menu-trigger="click" unique-opened
     active-text-color="#1460F3" text-color="#6A6F77" router>
       <el-submenu index="1">
-        <template slot="title"><span>Projects</span></template>
-        <el-menu-item index="/dashboard">Dashboard</el-menu-item>
-        <el-menu-item index="/api/keys">API Keys</el-menu-item>
-        <el-menu-item index="/user/webhooks">Webhooks</el-menu-item>
+        <template slot="title"><span>{{ $t('aside.project') }}</span></template>
+        <el-menu-item index="/dashboard">{{ $t('aside.dashboard') }}</el-menu-item>
+        <el-menu-item index="/api/keys">{{ $t('aside.apiKeys') }}</el-menu-item>
+        <el-menu-item index="/user/webhooks">{{ $t('aside.webhook') }}</el-menu-item>
       </el-submenu>
       <el-submenu index="2">
-        <template slot="title"><span>Account</span></template>
-        <el-menu-item index="/user/password">Security</el-menu-item>
+        <template slot="title"><span>{{ $t('aside.setting') }}</span></template>
+        <el-menu-item index="/user/password">{{ $t('aside.security') }}</el-menu-item>
       </el-submenu>
       <el-submenu index="3">
-        <template slot="title"><span>Billing</span></template>
-        <el-menu-item index="/billing/plan">Plan</el-menu-item>
+        <template slot="title"><span>{{ $t('aside.billing') }}</span></template>
+        <el-menu-item index="/billing/plan">{{ $t('aside.plan') }}</el-menu-item>
+          <el-menu-item index="/billing/information">{{ $t('aside.information') }}</el-menu-item>
+          <el-menu-item index="/billing/invoices">{{ $t('aside.invoices') }}</el-menu-item>
       </el-submenu>
       <el-submenu index="4">
-        <template slot="title"><span>Support</span></template>
+        <template slot="title"><span>{{ $t('aside.support') }}</span></template>
         <el-menu-item index="">
           <a :href="apiDomain + '/api/docs/introduction'" class="downloadDoc">
-            Documentation
+            {{ $t('aside.document') }}
           </a>
         </el-menu-item>
       </el-submenu>
       <el-submenu index="5">
-        <template slot="title"><span>{{ $i18n.locale === 'en' ? 'English' : 'Chinese' }}</span></template>
+        <template slot="title"><span>{{ $i18n.locale === 'en' ? 'English' : '简体中文' }}</span></template>
         <el-menu-item  @click="changeLangEvent('en')">
           English
         </el-menu-item>
         <el-menu-item @click="changeLangEvent('zh-cn')">
-          Chinese
+          简体中文
         </el-menu-item>
       </el-submenu>
     </el-menu>
@@ -193,10 +195,14 @@ export default class Aside extends Vue {
       .sideBox {
         display: flex;
         max-width: 120px;
-        border-radius: 6px;
         padding: 8px 15px;
+        border-radius: 6px;
+        white-space: nowrap;
         align-items: center;
         justify-content: center;
+        &:hover {
+          background-color: #EBF1FE;
+        }
       }
       .choose {
         top: -101px;
@@ -266,11 +272,15 @@ export default class Aside extends Vue {
       word-wrap: break-word;
       word-break: break-all;
       & p:first-child {
-        margin-bottom: 4px;
-        font-weight: 700;
+        width: 151px;
         font-size: 20px;
-        line-height: 24px;
+        overflow: hidden;
+        font-weight: 700;
         color: #18191B;
+        line-height: 24px;
+        margin-bottom: 4px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
       & p:last-child {
         font-size: 14px;
@@ -286,8 +296,15 @@ export default class Aside extends Vue {
   color: rgb(102, 102, 102);
 }
 @media screen and (max-width: 767px) {
-  .aside .max {
-    display: none;
+  .aside {
+    .max {
+      display: none;
+    }
+    .desktop {
+      .switch {
+        display: none;
+      }
+    }
   }
   .aside .min {
     display: flex;

src/components/common/Header.vue

@@ -111,19 +111,20 @@ export default Vue.extend({
       width: 32px;
     }
     span {
-      margin-left: 24px;
-      font-weight: 700;
       font-size: 22px;
+      font-weight: 700;
+      color: #232748;
+      margin-left: 24px;
       line-height: 40px;
-      color: #000;
+      white-space: nowrap;
     }
   }
   .user-photo {
     flex: none;
     width: 42px;
     height: 42px;
-    border-radius: 50%;
     cursor: pointer;
+    border-radius: 50%;
     background-color: #FFE248;
     p {
       font-weight: 700;
@@ -327,9 +328,10 @@ export default Vue.extend({
   .header {
     .logo-title {
       span {
-        margin-left: 8px;
         font-size: 20px;
+        margin-left: 8px;
         line-height: 24px;
+        white-space: nowrap;
       }
     }
     .user-photo {
@@ -354,6 +356,7 @@ export default Vue.extend({
   .nav-content {
     nav {
       padding: 0 10px;
+      white-space: nowrap;
     }
     a {
       margin-right: 28px;
@@ -369,4 +372,25 @@ export default Vue.extend({
     }
   }
 }
+@media screen and (min-width: 930px) and (max-width: 1024px) {
+  .nav-content {
+    .nav-left {
+      a {
+        .logo-title {
+          span {
+            font-size: 20px;
+            line-height: 28px;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+    nav {
+      white-space: nowrap;
+    }
+    a {
+      margin-right: 12px;
+    }
+  }
+}
 </style>

src/locales/en.ts

@@ -160,7 +160,8 @@ export default {
     delete: 'Delete',
     sureDelete: 'Are you sure you want to delete this information?',
     deleted: 'Deleted!',
-    deleteFail: 'Deleted Failed.'
+    deleteFail: 'Deleted Failed.',
+    noneYet: 'None yet'
   },
   security: {
     title: 'Security',
@@ -207,16 +208,19 @@ export default {
     remainingFiles: 'Remaining Files',
     noData: 'No Data Available',
     'Free Files': 'Free Files',
+    'Free files': 'Free Files',
+    'Free 100 Files(Validity: 30 days)': 'Free Files',
     'Monthly Subscription Files': 'Monthly Subscription Files',
     'Annually Subscription Files': 'Annually Subscription Files',
     'Package Files': 'Package Files',
     'Files Expired': 'Files Expired',
+    'Files consumed': 'Files consumed',
     previous: 'Previous',
     next: 'Next'
   },
   information: {
     title: 'Billing Information',
-    Billing: 'Billing Address',
+    billing: 'Billing Address',
     firstName: 'First Name',
     firstNameTip: 'Please enter your first name',
     firstNameErr: 'Ensure your first name is under 255 characters in length.',
@@ -255,6 +259,7 @@ export default {
     number: 'Invoice Number',
     operation: 'Operation',
     download: 'Download',
+    invoicesName: 'ComPDFKit_API_Invoice_',
     send: 'Send Email',
     apply: 'Apply for an Invoice',
     incomplete: 'Incomplete Billing Information',

src/locales/zh.ts

@@ -160,7 +160,8 @@ export default {
     delete: '删除',
     sureDelete: '您确定要删除此信息吗？',
     deleted: '已删除',
-    deleteFail: '删除失败'
+    deleteFail: '删除失败',
+    noneYet: '暂无响应'
   },
   security: {
     title: '安全',
@@ -207,16 +208,19 @@ export default {
     remainingFiles: '剩余文档数量',
     noData: '无可用数据',
     'Free Files': '免费文档数',
+    'Free files': '免费文档数',
+    'Free 100 Files(Validity: 30 days)': '免费文档数',
     'Monthly Subscription Files': '按月订购文档',
     'Annually Subscription Files': '按年订购文档',
     'Package Files': '套餐包文档数',
     'Files Expired': '文档数已过期',
+    'Files consumed': '已消耗文档数',
     previous: '上一页',
     next: '下一页'
   },
   information: {
     title: '账单信息',
-    Billing: '账单地址',
+    billing: '账单地址',
     firstName: '姓',
     firstNameTip: '请输入您的姓',
     firstNameErr: '请确保输入内容长度不超过255个字符。',
@@ -255,6 +259,7 @@ export default {
     number: '发票号',
     operation: '操作',
     download: '下载 PDF',
+    invoicesName: 'ComPDFKit_API_发票_',
     send: '发送到邮箱',
     apply: '申请开票',
     incomplete: '您的账单信息不完整',

src/store/loginStore.ts

@@ -27,13 +27,13 @@ export const loginStore = defineStore('login', {
     // 设置token
     setToken (token: any) {
       this.token = token
-      Cookie.set('access_token', this.token, { expires: 14 })
+      Cookie.set('access_token', this.token, { expires: 14, domain: process.env.VUE_APP_SaaS_DOMAIN })
     },
     // 获取用户信息
     setUser (user: any) {
       if (user) {
         this.user = user
-        Cookie.set('user', JSON.stringify(user), { expires: 14 })
+        Cookie.set('user', JSON.stringify(user), { expires: 14, domain: process.env.VUE_APP_SaaS_DOMAIN })
       } else {
         this.user = {
           name: ''

src/views/accountSettings/security.vue

@@ -5,8 +5,8 @@
       <h2>{{ $t('security.changeName') }}</h2>
       <el-form :model="userRuleForm" :rules="userRules" ref="userRuleForm" label-position="top" label-width="100px" inline-message>
         <el-form-item prop="userName" :label="$t('security.name')">
-          <el-input v-model.trim="userRuleForm.userName" auto-complete="off" :placeholder="$t('security.nameErr')"
-          @paste.native.capture.prevent="handlePaste"></el-input>
+          <el-input v-model.trim="userRuleForm.userName" @focus="clear('userRuleForm', 'userName')" auto-complete="off" :placeholder="$t('security.nameErr')"
+          ></el-input>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" :disabled="submitBtnState('userRuleForm')" @click="submitUserName('userRuleForm')">{{ $t('security.save') }}</el-button>
@@ -23,6 +23,7 @@
             auto-complete="off"
             :placeholder="$t('security.oldErr')"
             @paste.native.capture.prevent="handlePaste"
+            @focus="clear('ruleForm', 'oldPassword')"
             :class="{'err-border': showErrTipOld}">
           </el-input>
           <span v-show="ruleForm.oldPassword" class="show-password" :class="passwordType ? 'eye-open' : 'eye-close'" @click="passwordType = !passwordType"></span>
@@ -34,7 +35,7 @@
             <span class="rule-tip">{{ $t('security.passwordRule') }}</span>
           </template>
           <el-input :type="passwordType2 ? '' : 'password'" v-model.trim="ruleForm.newPassword" auto-complete="off" :placeholder="$t('security.newPassword')"
-          @paste.native.capture.prevent="handlePaste"></el-input>
+          @paste.native.capture.prevent="handlePaste" @focus="clear('ruleForm', 'newPassword')"></el-input>
           <span v-show="ruleForm.newPassword" class="show-password" :class="passwordType2 ? 'eye-open' : 'eye-close'" @click="passwordType2 = !passwordType2"></span>
         </el-form-item>
         <el-form-item prop="confirmPassword">
@@ -49,6 +50,7 @@
             :placeholder="$t('security.confirmErr')"
             @keyup.enter.native="submitPassword('ruleForm')"
             @paste.native.capture.prevent="handlePaste"
+            @focus="clear('ruleForm', 'confirmPassword')"
             :class="{'err-border': showErrTipNotMatch}">
           </el-input>
           <span v-show="ruleForm.confirmPassword" class="show-password" :class="passwordType3 ? 'eye-open' : 'eye-close'" @click="passwordType3 = !passwordType3"></span>
@@ -85,26 +87,26 @@ export default class Security extends Vue {
   }
 
   userRuleForm:isUserNameRuleForm = {
-    userName: ''
+    userName: loginStore().user.name
   }
 
   rules:any = {
     oldPassword: [
-      { required: true, message: this.$t('security.oldPasswordBlank'), trigger: 'change' }
+      { required: true, message: this.$t('security.oldPasswordBlank'), trigger: 'blur' }
     ],
     newPassword: [
-      { required: true, message: this.$t('security.passwordBlank'), trigger: 'change' },
+      { required: true, message: this.$t('security.passwordBlank'), trigger: 'blur' },
       { min: 6, max: 24, message: this.$t('security.passwordRule'), trigger: 'change' }
     ],
     confirmPassword: [
-      { required: true, message: this.$t('security.passwordBlank'), trigger: 'change' },
+      { required: true, message: this.$t('security.passwordBlank'), trigger: 'blur' },
       { min: 6, max: 24, message: this.$t('security.passwordRule'), trigger: 'change' }
     ]
   }
 
   userRules:any = {
     userName: [
-      { required: true, message: this.$t('security.nameBlank'), trigger: 'change' },
+      { required: true, message: this.$t('security.nameBlank'), trigger: 'blur' },
       { max: 255, message: this.$t('security.nameMax'), trigger: 'change' }
     ]
   }
@@ -188,11 +190,12 @@ export default class Security extends Vue {
         formData.append('fullName', this.userRuleForm.userName)
         apiChangeUserName(formData, {}).then((res: any) => {
           if (res.code === '200') {
-            loginStore().setUser({
-              email: loginStore().user.email,
+            const user = {
               name: this.userRuleForm.userName,
+              email: loginStore().user.email,
               access_token: loginStore().user.access_token
-            })
+            }
+            loginStore().setUser(user)
             this.userChangeSuccessBox()
           } else {
             this.$message.error(fail)
@@ -256,6 +259,10 @@ export default class Security extends Vue {
       this.$message.error('Changed Failed!')
     }
   }
+
+  clear (formName: string, val: string) {
+    (this.$refs[formName] as Form).clearValidate([val])
+  }
 }
 </script>
 

src/views/billing/information.vue

@@ -2,18 +2,18 @@
   <div class="information container">
     <h1>{{ $t('information.title') }}</h1>
     <div class="password-form block">
-      <h2>{{ $t('information.Billing') }}</h2>
+      <h2>{{ $t('information.billing') }}</h2>
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" label-width="100px" inline-message>
         <el-form-item prop="lastName" :label="$t('information.lastName')">
-          <el-input @input="submitBtnState('ruleForm')" v-model.trim="ruleForm.lastName" auto-complete="off" :placeholder="$t('information.lastNameTip')"
+          <el-input @input="submitBtnState('ruleForm')" @focus="clear('ruleForm', 'lastName')" v-model.trim="ruleForm.lastName" auto-complete="off" :placeholder="$t('information.lastNameTip')"
           ></el-input>
         </el-form-item>
         <el-form-item prop="firstName" :label="$t('information.firstName')">
-          <el-input @input="submitBtnState('ruleForm')" v-model.trim="ruleForm.firstName" auto-complete="off" :placeholder="$t('information.firstNameTip')"
+          <el-input @input="submitBtnState('ruleForm')" @focus="clear('ruleForm', 'firstName')" v-model.trim="ruleForm.firstName" auto-complete="off" :placeholder="$t('information.firstNameTip')"
           ></el-input>
         </el-form-item>
         <el-form-item prop="company" :label="$t('information.company')">
-          <el-input @input="submitBtnState('ruleForm')" v-model.trim="ruleForm.company" auto-complete="off" :placeholder="$t('information.companyTip')"
+          <el-input @input="submitBtnState('ruleForm')" @focus="clear('ruleForm', 'company')" v-model.trim="ruleForm.company" auto-complete="off" :placeholder="$t('information.companyTip')"
           ></el-input>
         </el-form-item>
         <el-form-item :label="$t('information.country')">
@@ -22,11 +22,11 @@
           </el-select>
         </el-form-item>
         <el-form-item prop="province" :label="$t('information.province')">
-          <el-input @input="submitBtnState('ruleForm')" v-model.trim="ruleForm.province" auto-complete="off" :placeholder="$t('information.provinceTip')"
+          <el-input @input="submitBtnState('ruleForm')" @focus="clear('ruleForm', 'province')" v-model.trim="ruleForm.province" auto-complete="off" :placeholder="$t('information.provinceTip')"
           ></el-input>
         </el-form-item>
         <el-form-item prop="address" :label="$t('information.address')">
-          <el-input @input="submitBtnState('ruleForm')" v-model.trim="ruleForm.address" auto-complete="off" :placeholder="$t('information.addressTip')"
+          <el-input @input="submitBtnState('ruleForm')" @focus="clear('ruleForm', 'address')" v-model.trim="ruleForm.address" auto-complete="off" :placeholder="$t('information.addressTip')"
           ></el-input>
         </el-form-item>
         <el-form-item :label="$t('information.zip')">
@@ -40,7 +40,7 @@
       <h2>{{ $t('information.mail') }}</h2>
       <el-form :model="emailRuleForm" :rules="emailRules" ref="emailRuleForm" label-position="top" label-width="100px" inline-message>
         <el-form-item prop="email" :label="$t('information.email')">
-          <el-input @input="submitBtnState('emailRuleForm')" v-model.trim="emailRuleForm.email" auto-complete="off" :placeholder="$t('information.emailTip')"
+          <el-input @input="submitBtnState('emailRuleForm')" @focus="clear('emailRuleForm', 'email')" v-model.trim="emailRuleForm.email" auto-complete="off" :placeholder="$t('information.emailTip')"
           ></el-input>
           <div class="tips">{{ $t('information.emailContact')[0] }} <a href="mailto:support@compdf.com">{{ $t('information.emailContact')[1] }}</a></div>
         </el-form-item>
@@ -222,6 +222,10 @@ export default class Security extends Vue {
       console.log(err)
     })
   }
+
+  clear (formName: string, val: string) {
+    (this.$refs[formName] as Form).clearValidate([val])
+  }
 }
 </script>
 

src/views/billing/invoices.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="plan container" v-loading="loading">
-    <h1>{{ $t('invoices.Billing') }}</h1>
+    <h1>{{ $t('invoices.title') }}</h1>
     <div class="block">
       <div class="top">
         <h2>{{ $t('invoices.information') }}</h2>
@@ -9,11 +9,11 @@
         <el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}">
           <el-table-column prop="payTime" :label="$t('invoices.date')" min-width="120"></el-table-column>
           <el-table-column prop="orderNo" :label="$t('invoices.order')" min-width="240"></el-table-column>
-          <el-table-column prop="price" :label="$t('invoices.amount') " min-width="120"></el-table-column>
+          <el-table-column prop="price" :label="$t('invoices.amount') " min-width="60"></el-table-column>
           <el-table-column prop="billNo" :label="$t('invoices.number')" min-width="120">
             <template slot-scope="scope">{{scope.row.billNo ? scope.row.billNo : '-' }}</template>
           </el-table-column>
-          <el-table-column prop="remainingFiles" :label="$t('invoices.operation') " min-width="120">
+          <el-table-column prop="remainingFiles" :label="$t('invoices.operation') " min-width="180">
             <template slot-scope="scope">
               <div class="opera">
                 <template v-if="scope.row.billNo">
@@ -34,10 +34,9 @@
         <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="totalNum" @current-change="handleCurrentChange" class="max-page-btn"></el-pagination>
         <div class="mobile-page-btn">
           <el-button type="primary" plain icon="el-icon-arrow-left" @click="handleCurrentChangeMobile(currentPage - 1)" :class="{'disabledBtn': disabledPrevBtn}">{{ $t('plan.previous') }}</el-button>
-          <el-button type="primary" plain @click="handleCurrentChangeMobile(currentPage + 1)" :class="{'disabledBtn': disabledNextBtn}">{{ $t('information.save') }}<i class="el-icon-arrow-right el-icon--right"></i></el-button>
+          <el-button type="primary" plain @click="handleCurrentChangeMobile(currentPage + 1)" :class="{'disabledBtn': disabledNextBtn}">{{ $t('plan.next') }}<i class="el-icon-arrow-right el-icon--right"></i></el-button>
         </div>
       </div>
-      <iframe :src="link" frameborder="0"></iframe>
     </div>
   </div>
 </template>
@@ -60,7 +59,6 @@ export default class Plan extends Vue {
   disabledNextBtn = false
   totalPageNum = 1
   loading = false
-  link = ''
 
   created () {
     this.getInvoicesList()
@@ -160,22 +158,15 @@ export default class Plan extends Vue {
   }
 
   // 下载发票
-  downloadInvoice (val: string) {
-    const xhr = new XMLHttpRequest()
-    xhr.open('get', val, true)
-    xhr.setRequestHeader('Content-Type', 'application/pdf')
-    xhr.responseType = 'blob'
-    xhr.onload = function () {
-      if (this.status === 200) {
-        const blob = new Blob([this.response], { type: 'application/pdf' })
-        const objectUrl = URL.createObjectURL(blob)
-        const ele = document.createElement('a')
-        ele.href = objectUrl
-        ele.download = 'fileName'
-        ele.click()
-      }
-    }
-    xhr.send()
+  downloadInvoice (val: any) {
+    const a = document.createElement('a')
+    a.style.display = 'none'
+    a.href = val
+    document.body.appendChild(a)
+    // 下载文件
+    a.click()
+    // 释放内存
+    document.body.removeChild(a)
   }
 
   // 发送邮件

src/views/projects/user/webhooks.vue

@@ -30,7 +30,7 @@
               </span>
             </template>
           </el-table-column>
-          <el-table-column prop="status" :label="$t('webhooks.status')" min-width="90">
+          <el-table-column prop="status" :label="$t('webhooks.status')" min-width="80">
             <template slot-scope="scope">
               <el-switch
                 v-model="scope.row.status"
@@ -79,7 +79,7 @@
                 <img src="@/assets/images/common/info_white.svg" alt="info">
               </el-tooltip>
             </template></el-table-column>
-          <el-table-column :label="$t('webhooks.actions')" min-width="80">
+          <el-table-column :label="$t('webhooks.actions')" min-width="90" class-name="actions">
             <template slot-scope="scope">
               <router-link :to="{name: 'editWebhook', params: {id: scope.row.id}}"><img src="@/assets/images/apiKey/edit.svg" alt="edit" class="edit-icon" /></router-link>
               <img src="@/assets/images/apiKey/delete.svg" alt="delete" @click="handleDelete(scope.$index, scope.row)" class="delete-icon" />
@@ -217,7 +217,7 @@ export default class webhooks extends Vue {
   // 日期自定格式
   formatterDate (row: any, column: any) {
     const val = row[column.property]
-    if (!val) return 'None yet'
+    if (!val) return this.$t('webhooks.noneYet')
     const day = this.$i18n.locale === 'en' ? dayjs(val).format('MMM D,YYYY HH:mm') : dayjs(val).format('YYYY年MM月DD日 HH:mm')
     return day
   }
@@ -427,6 +427,11 @@ export default class webhooks extends Vue {
         margin-bottom: 10px;
       }
     }
+    .actions {
+      .cell {
+        white-space: nowrap;
+      }
+    }
     .el-table__body {
       // 使表格兼容safari，不错位
       width: 100%;
@@ -434,12 +439,4 @@ export default class webhooks extends Vue {
     }
   }
 }
-// copy提示框
-// ::v-deep .el-popover {
-//   min-width: 55px;
-//   background: #6A6F77;
-//   border: none;
-//   box-shadow: 0px 8px 14px rgba(47, 59, 90, 0.2);
-//   padding: 4px 8px;
-// }
 </style>