新增邮箱列表置顶排序

mail-vue/src/components/email-scroll/index.vue

@@ -227,8 +227,7 @@ let skeletonRows = 0
 const timePaddingRight = ref('');
 const keyCount = ref(0)
 const queryParam = reactive({
-  emailId: 0,
-  size: 50,
+  size: 50
 });
 
 defineExpose({
@@ -507,7 +506,7 @@ function addItem(email) {
       emailList.push(email);
     }
 
-    if (email.emailId > latestEmail.value.emailId) {
+    if (email.emailId > latestEmail.value?.emailId) {
       latestEmail.value = email
     }
 
@@ -528,7 +527,7 @@ function addItem(email) {
     }
   }
 
-  if (email.emailId > latestEmail.value.emailId) {
+  if (email.emailId > latestEmail.value?.emailId) {
     latestEmail.value = email
   }
 
@@ -566,6 +565,8 @@ function getEmailList(refresh = false) {
 
   if (reqLock) return;
 
+  let emailId = emailList.length > 0 ? emailList.at(-1).emailId : 0;
+
   reqLock = true
 
   if (!refresh) {
@@ -577,6 +578,7 @@ function getEmailList(refresh = false) {
 
   } else {
     getSkeletonRows()
+    emailId = 0
     loading.value = true
     scrollTop = 0
   }
@@ -587,10 +589,11 @@ function getEmailList(refresh = false) {
     followLoading.value = !refresh;
   }
   let start = Date.now();
-  props.getEmailList(queryParam.emailId, queryParam.size).then(async data => {
+
+  props.getEmailList(emailId, queryParam.size).then(async data => {
     let end = Date.now();
     let duration = end - start;
-    if (duration < 300 && !queryParam.emailId) {
+    if (duration < 300 && !emailId) {
         await sleep(300 - duration)
     }
     firstLoad.value = false
@@ -615,7 +618,6 @@ function getEmailList(refresh = false) {
     followLoading.value = data.list.length >= queryParam.size;
 
     total.value = data.total;
-    queryParam.emailId = data.list.length > 0 ? data.list.at(-1).emailId : 0
   }).finally(() => {
     loading.value = false
     reqLock = false
@@ -653,7 +655,6 @@ function refresh() {
 function refreshList() {
   checkAll.value = false;
   isIndeterminate.value = false;
-  queryParam.emailId = 0;
   getEmailList(true);
 }
 

mail-vue/src/layout/account/index.vue

@@ -6,7 +6,7 @@
     </div>
     <el-scrollbar class="scrollbar" ref="scrollbarRef">
       <div v-infinite-scroll="getAccountList" :infinite-scroll-distance="600" :infinite-scroll-immediate="false">
-        <el-card class="item" :class="itemBg(item.accountId)" v-for="item in accounts" :key="item.accountId"
+        <el-card class="item" :class="itemBg(item.accountId)" v-for="(item, index) in accounts" :key="item.accountId"
                  @click="changeAccount(item)">
           <div class="account">
             {{ item.email }}
@@ -24,8 +24,8 @@
                 <Icon icon="fluent:settings-24-filled" width="21" height="21" color="#909399"/>
                 <template #dropdown>
                   <el-dropdown-menu>
-                    <el-dropdown-item v-if="hasPerm('email:send')" @click="openSetName(item)">{{ $t('rename') }}
-                    </el-dropdown-item>
+                    <el-dropdown-item v-if="hasPerm('email:send')" @click="openSetName(item)">{{ $t('rename') }}</el-dropdown-item>
+                    <el-dropdown-item v-if="item.accountId !== userStore.user.account.accountId" @click="setAsTop(item, index)">{{ $t('置顶') }}</el-dropdown-item>
                     <el-dropdown-item v-if="item.accountId !== userStore.user.account.accountId && hasPerm('account:delete')"
                                       @click="remove(item)">{{ $t('delete') }}
                     </el-dropdown-item>
@@ -128,7 +128,14 @@
 <script setup>
 import {Icon} from "@iconify/vue";
 import {nextTick, reactive, ref, watch} from "vue";
-import {accountList, accountAdd, accountDelete, accountSetName, accountSetAllReceive} from "@/request/account.js";
+import {
+  accountList,
+  accountAdd,
+  accountDelete,
+  accountSetName,
+  accountSetAllReceive,
+  accountSetAsTop
+} from "@/request/account.js";
 import {sleep} from "@/utils/time-utils.js"
 import {isEmail} from "@/utils/verify-utils.js";
 import {useSettingStore} from "@/store/setting.js";
@@ -169,8 +176,7 @@ const addForm = reactive({
 })
 let skeletonRows = 10
 const queryParams = {
-  accountId: 0,
-  size: 20
+  size: 10
 }
 
 const mySelect = ref()
@@ -288,6 +294,8 @@ function itemBg(accountId) {
   return accountStore.currentAccountId === accountId ? 'item-choose' : ''
 }
 
+
+
 function remove(account) {
   ElMessageBox.confirm(t('delConfirm', {msg: account.email}), {
     confirmButtonText: t('confirm'),
@@ -317,6 +325,7 @@ function refresh() {
   followLoading.value = false
   noLoading.value = false
   queryParams.accountId = 0
+  queryParams.lastSort = null
   getSkeletonRows();
   scrollbarRef.value.setScrollTop(0)
   accounts.splice(0, accounts.length)
@@ -335,6 +344,20 @@ function add() {
   }, 100)
 }
 
+function setAsTop(account, index) {
+  accountSetAsTop(account.accountId).then(() => {
+    ElMessage({
+      message: t('setSuccess'),
+      type: 'success',
+      plain: true,
+    })
+
+    const [item] = accounts.splice(index, 1);
+    accounts.splice(1, 0, item);
+
+  });
+}
+
 async function copyAccount(account) {
   try {
     await navigator.clipboard.writeText(account);
@@ -365,7 +388,10 @@ function getAccountList() {
 
   let start = Date.now();
 
-  accountList(queryParams.accountId, queryParams.size).then(async list => {
+  const accountId = accounts.length > 0 ? accounts.at(-1).accountId : 0;
+  const lastSort = accounts.length > 0 ? accounts.at(-1).sort : null;
+
+  accountList(accountId, queryParams.size, lastSort).then(async list => {
 
     let end = Date.now();
     let duration = end - start;
@@ -379,7 +405,7 @@ function getAccountList() {
     if (accounts.length === 0) {
       accountStore.currentAccount = list[0]
     }
-    queryParams.accountId = list.at(-1).accountId
+
     accounts.push(...list)
 
     loading.value = false

mail-vue/src/request/account.js

@@ -1,7 +1,7 @@
 import http from '@/axios/index.js'
 
-export function accountList(accountId, size) {
-    return http.get('/account/list', {params: {accountId, size}});
+export function accountList(accountId, size, lastSort) {
+    return http.get('/account/list', {params: {accountId, size, lastSort}});
 }
 
 export function accountAdd(email,token) {
@@ -20,3 +20,6 @@ export function accountSetAllReceive(accountId) {
     return http.put('/account/setAllReceive', {accountId})
 }
 
+export function accountSetAsTop(accountId) {
+    return http.put('/account/setAsTop', {accountId})
+}