邮件列表加载动画优化和打包拆分

mail-vue/src/views/all-email/index.vue

@@ -205,8 +205,8 @@ function getEmailList(emailId, size) {
 }
 
 .search-input {
-
-  width: min(280px,calc(100vw - 140px));
+  width: 100%;
+  max-width: 280px;
   height: 28px;
   .setting-icon {
     position: relative;

mail-vue/src/views/draft/index.vue

@@ -9,15 +9,16 @@
                @jump="jumpContent"
                actionLeft="6px"
                :show-account-icon="false"
+               :show-first-loading="false"
                :showStar="false"
                @delete-draft="deleteDraft"
                :type="'draft'"
   >
     <template #name="props">
-      <span class="send-email" >{{props.email.receiveEmail.join(',') || '('+$t('noRecipient')+')'}}</span>
+      <span class="send-email">{{ props.email.receiveEmail.join(',') || '(' + $t('noRecipient') + ')' }}</span>
     </template>
-    <template #subject="props" >
-      {{props.email.subject || '('+$t('noSubject')+')'}}
+    <template #subject="props">
+      {{ props.email.subject || '(' + $t('noSubject') + ')' }}
     </template>
   </emailScroll>
 </template>
@@ -53,19 +54,21 @@ watch(() => draftStore.setDraft, async () => {
   if (!draft.content && !draft.subject && !(draft.receiveEmail.length > 0)) {
     await db.value.draft.delete(draftId);
     await db.value.att.delete(draftId);
-    scroll.value.refreshList();
+    draftStore.refreshList++
     return;
   }
 
   await db.value.draft.update(draftId, draft);
   await db.value.att.update(draftId, {attachments: attachments});
-  scroll.value.refreshList();
-},{
+  draftStore.refreshList++
+}, {
   deep: true
 })
 
-watch(() => draftStore.refreshList,() => {
-  scroll.value.refreshList();
+watch(() => draftStore.refreshList, async () => {
+  const {list} = await getEmailList();
+    scroll.value.emailList.length = 0
+    scroll.value.emailList.push(...list)
 })
 
 function getEmailList() {
@@ -78,7 +81,7 @@ function getEmailList() {
 
 async function deleteDraft(draftIds) {
   await db.value.draft.bulkDelete(draftIds);
-  scroll.value.refreshList();
+  draftStore.refreshList++
 }
 
 async function jumpContent(email) {
@@ -101,4 +104,4 @@ onMounted(() => {
 .send-email {
   font-weight: normal;
 }
-</style>
+</style>

mail-vue/src/views/reg-key/index.vue

@@ -503,7 +503,7 @@ function openAdd() {
 
 .loading-hide {
   pointer-events: none;
-  transition: all 200ms;
+  transition: var(--loading-hide-transition);
   opacity: 0;
 }
 

mail-vue/src/views/role/index.vue

@@ -500,7 +500,7 @@ window.onresize = () => {
 
 .loading-hide {
   pointer-events: none;
-  transition: all 200ms;
+  transition: var(--loading-hide-transition);
   opacity: 0;
 }
 

mail-vue/src/views/sys-setting/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="settings-container">
-    <div v-if="firstLoading" class="loading">
+    <div class="loading" :class="firstLoading ? 'loading-show' : 'loading-hide'" >
       <loading/>
     </div>
-    <el-scrollbar class="scroll" v-else>
+    <el-scrollbar class="scroll" v-if="!firstLoading">
       <div class="scroll-body">
         <div class="card-grid">
           <!-- Website Settings Card -->
@@ -660,7 +660,7 @@ defineOptions({
   name: 'sys-setting'
 })
 
-const currentVersion = 'v1.7.0'
+const currentVersion = 'v1.8.0'
 const hasUpdate = ref(false)
 let getUpdateErrorCount = 1;
 const {t, locale} = useI18n();
@@ -1172,12 +1172,28 @@ function editSetting(settingForm, refreshStatus = true) {
   height: 100%;
   overflow: hidden;
   background: var(--extra-light-fill) !important;
-
+  position: relative;
   .loading {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
+    z-index: 2;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .loading-show {
+    transition: all 200ms ease 200ms;
+    opacity: 1;
+  }
+
+  .loading-hide {
+    transition: var(--loading-hide-transition);
+    pointer-events: none;
+    opacity: 0;
   }
 }
 

mail-vue/src/views/user/index.vue

@@ -957,7 +957,7 @@ function adjustWidth() {
 
 .loading-hide {
   pointer-events: none;
-  transition: all 200ms;
+  transition: var(--loading-hide-transition);
   opacity: 0;
 }