给web界面增加全选和反选按钮 (#348)

fe/src/i18n/i18n.js

@@ -86,6 +86,8 @@ let lang = {
     "del_email_confirm": "Are you sure you want to delete them?",
     "move_email_confirm": "Are you sure you want to move them?",
     "del_btn": "Delete",
+    "select_all_btn": "Select all",
+    "invert_selection_btn": "Invert",
     "move_btn": "Move",
     "read_btn": "Readed",
     "dangerous": "The content of this email is not secure!",
@@ -216,6 +218,8 @@ const zhCN = {
     "del_email_confirm": "你确定要删除吗?",
     "move_email_confirm": "你确定要移动这些邮件吗?",
     "del_btn": "删除",
+    "select_all_btn": "全选",
+    "invert_selection_btn": "反选",
     "move_btn": "移动",
     "read_btn": "已读",
     "dangerous": "该邮件内容不安全！",
@@ -262,4 +266,4 @@ if (browserLang.toLowerCase().startsWith("zh")) {
     lang = zhCN;
 }
 
-export default lang;
+export default lang;

fe/src/views/ListView.vue

@@ -5,6 +5,14 @@
         <h2>{{ groupStore.name }}</h2>
       </div>
       <div class="header-actions">
+        <div class="selection-actions">
+          <el-button @click="selectAll" class="action-btn selection-btn" plain :disabled="data.length === 0">
+            <el-icon><CircleCheck /></el-icon> {{ lang.select_all_btn }}
+          </el-button>
+          <el-button @click="invertSelection" class="action-btn selection-btn" plain :disabled="data.length === 0">
+            <el-icon><Switch /></el-icon> {{ lang.invert_selection_btn }}
+          </el-button>
+        </div>
         <el-button @click="del" class="action-btn" plain>
           <el-icon><Delete /></el-icon> {{ lang.del_btn }}
         </el-button>
@@ -37,6 +45,7 @@
                 :show-header="false"
                 class="modern-mail-table"
                 @row-click="rowClick"
+                @selection-change="selectionChange"
                 :row-style="rowStyle"
       >
         <el-table-column type="selection" width="40"/>
@@ -87,7 +96,7 @@
 
 <script setup>
 import {EpArrowDownBold} from "vue-icons-plus/ep";
-import {Delete, View, Folder, EditPen, Warning} from "@element-plus/icons-vue";
+import {Delete, View, Folder, EditPen, Warning, CircleCheck, Switch} from "@element-plus/icons-vue";
 import {useRouter} from 'vue-router'
 import {ref, watch} from 'vue'
 import useGroupStore from '../stores/group'
@@ -99,6 +108,7 @@ const router = useRouter();
 const groupStore = useGroupStore()
 const groupList = ref([])
 const taskTableDataRef = ref(null)
+const selectedRows = ref([])
 let tag = groupStore.tag;
 
 if (tag === "") {
@@ -147,6 +157,22 @@ const formatShortDate = (dateStr) => {
   return d.toLocaleDateString([], {month: 'short', day: 'numeric'});
 }
 
+const selectionChange = (rows) => {
+  selectedRows.value = rows
+}
+
+const selectAll = () => {
+  taskTableDataRef.value?.clearSelection()
+  data.value.forEach(row => taskTableDataRef.value?.toggleRowSelection(row, true))
+}
+
+const invertSelection = () => {
+  const selectedIds = new Set(selectedRows.value.map(row => row.id))
+  data.value.forEach(row => {
+    taskTableDataRef.value?.toggleRowSelection(row, !selectedIds.has(row.id))
+  })
+}
+
 const markRead = function () {
   let rows = taskTableDataRef.value?.getSelectionRows()
   if (!rows || rows.length === 0) {
@@ -262,6 +288,17 @@ const pageChange = function (p) {
   flex-wrap: wrap;
 }
 
+.selection-actions {
+  display: flex;
+  padding-right: 8px;
+  margin-right: 2px;
+  border-right: 1px solid var(--pm-border-color);
+}
+
+.selection-actions .selection-btn + .selection-btn {
+  margin-left: 8px;
+}
+
 .action-btn {
   border-radius: 999px;
   border-color: var(--pm-border-color);
@@ -445,4 +482,4 @@ const pageChange = function (p) {
     padding-top: 2px;
   }
 }
-</style>
+</style>