新增删除转存记录功能

app/run.py

@@ -836,6 +836,63 @@ def get_history_records():
     return jsonify({"success": True, "data": result})
 
 
+# 删除转存记录
+@app.route("/delete_history_records", methods=["POST"])
+def delete_history_records():
+    if not is_login():
+        return jsonify({"success": False, "message": "未登录"})
+    
+    # 获取要删除的记录ID列表
+    record_ids = request.json.get("record_ids", [])
+    
+    if not record_ids:
+        return jsonify({"success": False, "message": "未提供要删除的记录ID"})
+    
+    # 初始化数据库
+    db = RecordDB()
+    
+    # 删除记录
+    deleted_count = 0
+    for record_id in record_ids:
+        deleted_count += db.delete_record(record_id)
+    
+    return jsonify({
+        "success": True, 
+        "message": f"成功删除 {deleted_count} 条记录",
+        "deleted_count": deleted_count
+    })
+
+
+# 删除单条转存记录
+@app.route("/delete_history_record", methods=["POST"])
+def delete_history_record():
+    if not is_login():
+        return jsonify({"success": False, "message": "未登录"})
+    
+    # 获取要删除的记录ID
+    record_id = request.json.get("id")
+    
+    if not record_id:
+        return jsonify({"success": False, "message": "未提供要删除的记录ID"})
+    
+    # 初始化数据库
+    db = RecordDB()
+    
+    # 删除记录
+    deleted = db.delete_record(record_id)
+    
+    if deleted:
+        return jsonify({
+            "success": True, 
+            "message": "成功删除 1 条记录",
+        })
+    else:
+        return jsonify({
+            "success": False, 
+            "message": "记录删除失败，可能记录不存在",
+        })
+
+
 # 辅助函数：格式化记录
 def format_records(records):
     for record in records:

app/static/css/main.css

@@ -92,6 +92,8 @@ body.login-page {
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 9999;
+  width: auto;
+  max-width: 80%;
 }
 
 .toast-custom {
@@ -100,13 +102,15 @@ body.login-page {
   box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
   border: none;
   border-radius: 6px;
+  margin: 0 auto;
 }
 
 .toast-body-custom {
   text-align: center;
-  padding: 1rem 0.75rem;
+  padding: 1rem 1.2rem;
   color: #fff;
   font-size: 0.95rem;
+  white-space: nowrap;
 }
 
 /* --------------- 底部按钮 --------------- */
@@ -3764,3 +3768,88 @@ input.no-spinner {
     padding-right: 15px !important;
   }
 }
+
+/* --------------- 转存记录相关样式 --------------- */
+.selected-record {
+  background-color: var(--button-gray-background-color) !important;
+}
+
+/* 删除按钮样式 */
+.delete-record-btn {
+  color: #dc3545;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+  visibility: hidden; /* 默认隐藏 */
+}
+
+/* 删除按钮图标大小 */
+.delete-record-btn .bi-trash3 {
+  font-size: 1rem;
+}
+
+/* 选中行或鼠标悬停行时显示删除按钮 */
+tr.selected-record .delete-record-btn,
+.selectable-records tbody tr:hover .delete-record-btn {
+  visibility: visible;
+}
+
+/* 表头中的删除按钮仅在有选中行时显示 */
+table th .delete-record-btn {
+  visibility: hidden;
+}
+
+/* 禁止在表格中选择文本，以便更好地支持点击选择 */
+table.selectable-records {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+table.selectable-records tbody tr {
+  cursor: pointer;
+}
+
+/* 修改表格行悬停样式，使用变量保持一致性 */
+table.selectable-records tbody tr:hover {
+  background-color: var(--button-gray-background-color);
+}
+
+/* 确保展开按钮在选中状态下仍然可见 */
+tr.selected-record .expand-button {
+  z-index: 2;
+}
+
+/* 当鼠标悬停在展开按钮或删除按钮上时，不改变按钮的背景色 */
+table.selectable-records .expand-button:hover,
+table.selectable-records .delete-record-btn:hover {
+  background-color: transparent !important;
+}
+
+/* 选中行或鼠标悬停行的大小列样式 */
+tr.selected-record .file-size-cell .file-size-value,
+.selectable-records tbody tr:hover .file-size-cell .file-size-value {
+  display: none; /* 隐藏文件大小信息 */
+}
+
+tr.selected-record .file-size-cell .delete-record-btn,
+.selectable-records tbody tr:hover .file-size-cell .delete-record-btn {
+  display: flex;
+  justify-content: flex-start; /* 居左对齐 */
+  align-items: center;
+  width: auto;
+  height: 100%;
+  margin-left: 0; /* 确保没有左边距 */
+  padding-left: 0; /* 确保没有左内边距 */
+}
+
+/* 当鼠标悬停在展开按钮或删除按钮上时，不改变按钮的背景色 */
+table.selectable-records .expand-button:hover {
+  background-color: #fff !important; /* 保持展开按钮原有的白色背景 */
+}

app/templates/index.html

@@ -685,14 +685,14 @@
             </div>
             
             <div class="table-responsive">
-              <table class="table table-hover">
+              <table class="table table-hover selectable-records">
                 <thead>
                   <tr>
                     <th style="width:10%" class="cursor-pointer" @click="sortHistory('transfer_time')">转存日期 <i v-if="historyParams.sortBy === 'transfer_time'" :class="historyParams.order === 'asc' ? 'bi bi-arrow-up' : 'bi bi-arrow-down'"></i></th>
                     <th style="width:18%" class="cursor-pointer" @click="sortHistory('task_name')">任务名称 <i v-if="historyParams.sortBy === 'task_name'" :class="historyParams.order === 'asc' ? 'bi bi-arrow-up' : 'bi bi-arrow-down'"></i></th>
                     <th style="width:25%" class="cursor-pointer" @click="sortHistory('original_name')">原文件 <i v-if="historyParams.sortBy === 'original_name'" :class="historyParams.order === 'asc' ? 'bi bi-arrow-up' : 'bi bi-arrow-down'"></i></th>
                     <th style="width:25%" class="cursor-pointer" @click="sortHistory('renamed_to')">转存为 <i v-if="historyParams.sortBy === 'renamed_to'" :class="historyParams.order === 'asc' ? 'bi bi-arrow-up' : 'bi bi-arrow-down'"></i></th>
-                    <th style="width:7%" class="cursor-pointer" @click="sortHistory('file_size')">大小 <i v-if="historyParams.sortBy === 'file_size'" :class="historyParams.order === 'asc' ? 'bi bi-arrow-up' : 'bi bi-arrow-down'"></i></th>
+                    <th style="width:7%" class="cursor-pointer file-size-column" @click="sortHistory('file_size')">大小 <i v-if="historyParams.sortBy === 'file_size'" :class="historyParams.order === 'asc' ? 'bi bi-arrow-up' : 'bi bi-arrow-down'"></i></th>
                     <th style="width:10%" class="cursor-pointer" @click="sortHistory('modify_date')">修改日期 <i v-if="historyParams.sortBy === 'modify_date'" :class="historyParams.order === 'asc' ? 'bi bi-arrow-up' : 'bi bi-arrow-down'"></i></th>
                   </tr>
                 </thead>
@@ -700,7 +700,9 @@
                   <tr v-if="filteredHistoryRecords.length === 0">
                     <td colspan="6" class="text-center">暂无记录</td>
                   </tr>
-                  <tr v-for="(record, index) in filteredHistoryRecords" :key="record.id">
+                  <tr v-for="(record, index) in filteredHistoryRecords" :key="record.id" 
+                      :class="{'selected-record': selectedRecords.includes(record.id)}" 
+                      @click="selectRecord($event, record.id)">
                     <td>{{ record.transfer_time_readable }}</td>
                     <td class="position-relative">
                       <div v-if="!record._expandedFields || !record._expandedFields.includes('task_name')" 
@@ -709,7 +711,7 @@
                            v-check-overflow="index + '|task_name'">
                         {{ record.task_name }}
                       </div>
-                      <div class="expand-button" v-if="isTextTruncated(record.task_name, index, 'task_name')" @click="toggleExpand(index, 'task_name')">
+                      <div class="expand-button" v-if="isTextTruncated(record.task_name, index, 'task_name')" @click.stop="toggleExpand(index, 'task_name', $event)">
                         <i :class="record._expandedFields && record._expandedFields.length > 0 ? 'bi bi-chevron-up' : 'bi bi-chevron-down'"></i>
                       </div>
                       <div class="expanded-text" v-if="record._expandedFields && record._expandedFields.includes('task_name')">
@@ -723,7 +725,7 @@
                            v-check-overflow="index + '|original_name'">
                         {{ record.original_name }}
                       </div>
-                      <div class="expand-button" v-if="isTextTruncated(record.original_name, index, 'original_name')" @click="toggleExpand(index, 'original_name')">
+                      <div class="expand-button" v-if="isTextTruncated(record.original_name, index, 'original_name')" @click.stop="toggleExpand(index, 'original_name', $event)">
                         <i :class="record._expandedFields && record._expandedFields.length > 0 ? 'bi bi-chevron-up' : 'bi bi-chevron-down'"></i>
                       </div>
                       <div class="expanded-text" v-if="record._expandedFields && record._expandedFields.includes('original_name')">
@@ -737,14 +739,19 @@
                            v-check-overflow="index + '|renamed_to'">
                         {{ record.renamed_to }}
                       </div>
-                      <div class="expand-button" v-if="isTextTruncated(record.renamed_to, index, 'renamed_to')" @click="toggleExpand(index, 'renamed_to')">
+                      <div class="expand-button" v-if="isTextTruncated(record.renamed_to, index, 'renamed_to')" @click.stop="toggleExpand(index, 'renamed_to', $event)">
                         <i :class="record._expandedFields && record._expandedFields.length > 0 ? 'bi bi-chevron-up' : 'bi bi-chevron-down'"></i>
                       </div>
                       <div class="expanded-text" v-if="record._expandedFields && record._expandedFields.includes('renamed_to')">
                         {{ record.renamed_to }}
                       </div>
                     </td>
-                    <td>{{ record.file_size_readable }}</td>
+                    <td class="file-size-cell">
+                      <span class="file-size-value">{{ record.file_size_readable }}</span>
+                      <span class="delete-record-btn" @click.stop="deleteRecord(record.id, record.original_name)" title="删除记录">
+                        <i class="bi bi-trash3"></i>
+                      </span>
+                    </td>
                     <td>{{ record.modify_date_readable }}</td>
                   </tr>
                 </tbody>
@@ -754,7 +761,7 @@
             <!-- 分页控制 -->
             <div class="pagination-container d-flex justify-content-between align-items-center mt-3">
               <div class="page-info text-secondary">
-                显示 {{ history.pagination && history.pagination.total_records > 0 ? ((historyParams.page - 1) * historyParams.page_size + 1) + '-' + Math.min(historyParams.page * historyParams.page_size, history.pagination.total_records) : '0' }} 条，共 {{ history.pagination ? history.pagination.total_records : 0 }} 条记录
+                显示 {{ history.pagination && history.pagination.total_records > 0 ? ((historyParams.page - 1) * historyParams.page_size + 1) + '-' + Math.min(historyParams.page * historyParams.page_size, history.pagination.total_records) : '0' }} 条，共 {{ history.pagination ? history.pagination.total_records : 0 }} 条记录{{ selectedRecords.length > 0 ? '，已选中 ' + selectedRecords.length + ' 条记录' : '' }}
               </div>
               <div class="pagination-controls d-flex align-items-center">
                 <button type="button" class="btn btn-outline-secondary btn-sm mx-1" :class="{ disabled: historyParams.page <= 1 }" @click="changePage(historyParams.page - 1)" :disabled="historyParams.page <= 1">
@@ -1058,6 +1065,8 @@
         displayedPages: [],
         allTaskNames: [],
         toastMessage: "",
+        selectedRecords: [],
+        lastSelectedRecordIndex: -1, // 记录最后选择的记录索引，用于Shift选择
       },
       computed: {
         episodePatternsText: {
@@ -1238,6 +1247,10 @@
           // 只隐藏下拉菜单，不清空搜索结果，这样点击同一任务的输入框时还能看到之前的搜索结果
           this.smart_param.showSuggestions = false;
         });
+        
+        // 添加点击事件监听器，用于在点击表格外区域时取消选择记录
+        document.addEventListener('click', this.handleOutsideClick);
+        
         window.addEventListener('beforeunload', this.handleBeforeUnload);
         
         // 监听模态框显示事件，检查滚动条状态
@@ -1297,6 +1310,8 @@
       },
       beforeDestroy() {
         window.removeEventListener('beforeunload', this.handleBeforeUnload);
+        // 移除点击事件监听器
+        document.removeEventListener('click', this.handleOutsideClick);
       },
       methods: {
         // 添加格式化分享链接警告信息的方法
@@ -1556,7 +1571,7 @@
           });
         },
         removeCookie(index) {
-          if (this.formData.cookie[index] == "" || confirm("确认删除吗？")) {
+          if (this.formData.cookie[index] == "" || confirm("确定要删除吗？")) {
             this.formData.cookie.splice(index, 1);
             // 删除对应的用户信息
             if (this.userInfoList.length > index) {
@@ -1574,7 +1589,7 @@
             this.$set(this.formData.push_config, key, "");
         },
         removePush(key) {
-          if (confirm("确认删除吗？"))
+          if (confirm("确定要删除吗？"))
             this.$delete(this.formData.push_config, key);
         },
         addTask() {
@@ -1852,7 +1867,7 @@
           }
         },
         removeTask(index) {
-          if (confirm("确认删除任务 [#" + (index + 1) + ": " + this.formData.tasklist[index].taskname + "] 吗？"))
+          if (confirm("确定要删除任务 [#" + (index + 1) + ": " + this.formData.tasklist[index].taskname + "] 吗？"))
             this.formData.tasklist.splice(index, 1);
         },
         changeShareurl(task) {
@@ -2241,12 +2256,12 @@
           }
         },
         removeMagicRegex(key) {
-          if (confirm(`确认删除魔法匹配规则 [${key}] 吗？`)) {
+          if (confirm(`确定要删除魔法匹配规则 [${key}] 吗？`)) {
             this.$delete(this.formData.magic_regex, key);
           }
         },
         deleteFile(fid, fname, isDir) {
-          if (fid != "" && confirm(`确认删除${isDir ? '目录' : '文件'} [${fname}] 吗？`))
+          if (fid != "" && confirm(`确定要删除${isDir ? '目录' : '文件'} [${fname}] 吗？`))
             axios.post('/delete_file', {
               fid: fid
             }).then(response => {
@@ -2798,7 +2813,12 @@
           
           return record._isOverflowing && record._isOverflowing[field];
         },
-        toggleExpand(index, field) {
+        toggleExpand(index, field, event) {
+          // 阻止事件冒泡，避免触发行选择
+          if (event) {
+            event.stopPropagation();
+          }
+          
           // 获取当前记录
           const record = this.filteredHistoryRecords[index];
           // 初始化_expandedFields属性（如果不存在）
@@ -3122,6 +3142,152 @@
           // 更新数据模型，如果为空则默认为0
           this.formData[field] = event.target.value === '' ? 0 : parseInt(event.target.value);
         },
+        selectRecord(event, recordId) {
+          // 获取当前记录的索引
+          const currentIndex = this.filteredHistoryRecords.findIndex(record => record.id === recordId);
+          if (currentIndex === -1) return;
+          
+          // 如果是Shift+点击，选择范围
+          if (event.shiftKey && this.selectedRecords.length > 0) {
+            // 找出所有已选中记录的索引
+            const selectedIndices = this.selectedRecords.map(id => 
+              this.filteredHistoryRecords.findIndex(record => record.id === id)
+            ).filter(index => index !== -1); // 过滤掉未找到的记录
+            
+            if (selectedIndices.length > 0) {
+              // 找出已选中记录中最靠前的索引
+              const earliestSelectedIndex = Math.min(...selectedIndices);
+              // 确定最终的选择范围
+              const startIndex = Math.min(earliestSelectedIndex, currentIndex);
+              const endIndex = Math.max(earliestSelectedIndex, currentIndex);
+              
+              // 获取新的选择范围内所有记录的ID
+              this.selectedRecords = this.filteredHistoryRecords
+                .slice(startIndex, endIndex + 1)
+                .map(record => record.id);
+            } else {
+              // 如果没有有效的选中记录（可能是由于列表刷新），则只选择当前记录
+              this.selectedRecords = [recordId];
+            }
+          } 
+          // 如果是Ctrl/Cmd+点击，切换单个记录选择状态
+          else if (event.ctrlKey || event.metaKey) {
+            if (this.selectedRecords.includes(recordId)) {
+              this.selectedRecords = this.selectedRecords.filter(id => id !== recordId);
+            } else {
+              this.selectedRecords.push(recordId);
+            }
+          } 
+          // 普通点击，清除当前选择并选择当前记录
+          else {
+            if (this.selectedRecords.length === 1 && this.selectedRecords.includes(recordId)) {
+              this.selectedRecords = [];
+            } else {
+              this.selectedRecords = [recordId];
+            }
+          }
+          
+          // 更新最后选择的记录索引，只有在有选择记录时才更新
+          if (this.selectedRecords.length > 0) {
+            this.lastSelectedRecordIndex = currentIndex;
+          } else {
+            this.lastSelectedRecordIndex = -1;
+          }
+        },
+        deleteSelectedRecords() {
+          if (this.selectedRecords.length === 0) return;
+          
+          if (confirm(`确定要删除选中的 ${this.selectedRecords.length} 条记录吗？`)) {
+            axios.post('/delete_history_records', {
+              record_ids: this.selectedRecords
+            })
+            .then(response => {
+              if (response.data.success) {
+                this.showToast(response.data.message);
+                // 重新加载记录
+                this.loadHistoryRecords();
+                // 清空选择
+                this.selectedRecords = [];
+                this.lastSelectedRecordIndex = -1;
+              } else {
+                alert(response.data.message || '删除失败');
+              }
+            })
+            .catch(error => {
+              console.error('删除记录时出错:', error);
+              alert('删除记录时出错: ' + (error.response?.data?.message || error.message));
+            });
+          }
+        },
+        deleteRecord(id, original_name) {
+          // 检查是否有多条记录被选中
+          if (this.selectedRecords.length > 1) {
+            // 如果有多条记录被选中，调用批量删除方法
+            if (confirm(`确定要删除选中的 ${this.selectedRecords.length} 条记录吗？`)) {
+              axios.post('/delete_history_records', {
+                record_ids: this.selectedRecords
+              })
+              .then(response => {
+                if (response.data.success) {
+                  this.showToast(`成功删除 ${this.selectedRecords.length} 条记录`);
+                  // 重新加载记录
+                  this.loadHistoryRecords();
+                  // 清空选择
+                  this.selectedRecords = [];
+                  this.lastSelectedRecordIndex = -1;
+                } else {
+                  alert(response.data.message || '删除失败');
+                }
+              })
+              .catch(error => {
+                console.error('删除记录时出错:', error);
+                alert('删除记录时出错: ' + (error.response?.data?.message || error.message));
+              });
+            }
+          } else {
+            // 单条记录删除
+            if (confirm(`确定要删除此条记录吗？`)) {
+              axios.post('/delete_history_record', {
+                id: id
+              })
+              .then(response => {
+                if (response.data.success) {
+                  this.showToast('成功删除 1 条记录');
+                  // 重新加载记录
+                  this.loadHistoryRecords();
+                  // 清空选择
+                  this.selectedRecords = [];
+                  this.lastSelectedRecordIndex = -1;
+                } else {
+                  alert(response.data.message || '删除失败');
+                }
+              })
+              .catch(error => {
+                console.error('删除记录时出错:', error);
+                alert('删除记录时出错: ' + (error.response?.data?.message || error.message));
+              });
+            }
+          }
+        },
+        // 处理点击表格外区域的事件
+        handleOutsideClick(event) {
+          // 如果当前不是历史记录页面或者没有选中的记录，则不处理
+          if (this.activeTab !== 'history' || this.selectedRecords.length === 0) {
+            return;
+          }
+          
+          // 检查点击是否在表格内
+          const tableElement = document.querySelector('.table.selectable-records');
+          // 检查点击是否在分页控制区域
+          const paginationElement = document.querySelector('.pagination-container');
+          
+          // 如果点击不在表格内且不在分页控制区域内，则清除选择
+          if (tableElement && !tableElement.contains(event.target) && 
+              paginationElement && !paginationElement.contains(event.target)) {
+            this.selectedRecords = [];
+            this.lastSelectedRecordIndex = -1;
+          }
+        },
       }
     });
   </script>