在文件整理页面增加了单个项目重命名功能

app/static/css/main.css

@@ -98,12 +98,13 @@ body.login-page {
 }
 
 .toast-custom {
-  min-width: 134px;
+  min-width: 120px;
   background-color: var(--focus-border-color);
   box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
   border: none;
   border-radius: 6px;
   margin: 0 auto;
+  width: fit-content;
 }
 
 .toast-body-custom {
@@ -3843,12 +3844,16 @@ tr.selected-record .expand-button {
   z-index: 2;
 }
 
-/* 当鼠标悬停在展开按钮或删除按钮上时，不改变按钮的背景色 */
+/* 当鼠标悬停在展开按钮上时，不改变按钮的背景色 */
-table.selectable-records .expand-button:hover,
+table.selectable-records .expand-button:hover {
-table.selectable-records .delete-record-btn:hover {
   background-color: transparent !important;
 }
 
+/* 转存记录页面删除按钮悬停效果 */
+table.selectable-records .delete-record-btn:hover {
+  color: #b02a37 !important;
+}
+
 /* 选中行或鼠标悬停行的大小列样式 */
 tr.selected-record .file-size-cell .file-size-value,
 .selectable-records tbody tr:hover .file-size-cell .file-size-value {
@@ -4235,7 +4240,7 @@ select.task-filter-select,
 
 /* 文件整理页面刷新当前目录缓存按钮图标大小 */
 .batch-rename-btn .bi-arrow-clockwise {
-  font-size: 1.15rem;
+  font-size: 1.17rem;
 }
 
 /* 确保文件整理页面的Plex和AList按钮样式与任务列表一致 */
@@ -4566,12 +4571,21 @@ tr.selected-file .expand-button {
   z-index: 2;
 }
 
-/* 当鼠标悬停在展开按钮或删除按钮上时，不改变按钮的背景色 */
+/* 当鼠标悬停在展开按钮上时，不改变按钮的背景色 */
-table.selectable-files .expand-button:hover,
+table.selectable-files .expand-button:hover {
-table.selectable-files .delete-record-btn:hover {
   background-color: transparent !important;
 }
 
+/* 文件整理页面重命名按钮悬停效果 */
+table.selectable-files .rename-record-btn:hover {
+  color: #0A42CC !important;
+}
+
+/* 文件整理页面删除按钮悬停效果 */
+table.selectable-files .delete-record-btn:hover {
+  color: #b02a37 !important;
+}
+
 /* 选中行或鼠标悬停行的大小列样式 */
 tr.selected-file .file-size-cell .file-size-value,
 .selectable-files tbody tr:hover .file-size-cell .file-size-value {
@@ -4677,13 +4691,7 @@ table.selectable-records tr td {
   vertical-align: top !important; /* 确保展开后所有单元格内容顶部对齐 */
 }
 
-/* 确保删除按钮在展开行中的位置保持不变 */
+
-tr:has(.expanded-text) .delete-record-btn,
-#fileSelectModal .table tr:has([style*="white-space: normal"]) .delete-record-btn,
-.selectable-files tr:has([style*="white-space: normal"]) .delete-record-btn {
-  top: 8px !important; /* 强制固定位置 */
-  transform: none !important; /* 确保不使用任何转换 */
-}
 
 /* 文件大小列中展开行的删除按钮特殊处理 */
 tr:has(.expanded-text) .file-size-cell .delete-record-btn,
@@ -4692,8 +4700,19 @@ tr:has(.expanded-text) .file-size-cell .delete-record-btn,
 .selectable-files tr:has([style*="white-space: normal"]) .file-size-cell .delete-record-btn {
   top: 8px !important; /* 强制固定位置 */
   transform: none !important; /* 确保不使用任何转换 */
-  display: flex !important; /* 确保显示 */
+  left: 32px !important; /* 确保左边距固定，在重命名按钮右侧 */
-  left: 9px !important; /* 确保左边距固定 */
+  /* 不设置display，保持默认的隐藏状态 */
+}
+
+/* 文件大小列中展开行的重命名按钮特殊处理 */
+tr:has(.expanded-text) .file-size-cell .rename-record-btn,
+.selectable-records tbody tr:has(.expanded-text) .file-size-cell .rename-record-btn,
+#fileSelectModal .table tr:has([style*="white-space: normal"]) .file-size-cell .rename-record-btn,
+.selectable-files tr:has([style*="white-space: normal"]) .file-size-cell .rename-record-btn {
+  top: 8px !important; /* 强制固定位置 */
+  transform: none !important; /* 确保不使用任何转换 */
+  left: 5px !important; /* 确保左边距固定 */
+  /* 不设置display，保持默认的隐藏状态 */
 }
 
 /* 修复删除按钮位置问题 - 使用更强制的方法 */
@@ -4754,29 +4773,8 @@ tr.selected-record .file-size-cell .delete-record-btn,
   transform: none !important; /* 强制禁用任何转换 */
 }
 
-/* 确保在展开行中删除按钮位置保持不变 - 对所有可能的情况进行覆盖 */
-tr:has(.expanded-text) .delete-record-btn,
-tr.selected-record:has(.expanded-text) .delete-record-btn,
-.selectable-records tbody tr:has(.expanded-text) .delete-record-btn,
-.selectable-records tbody tr:hover:has(.expanded-text) .delete-record-btn,
-#fileSelectModal .table tr:has([style*="white-space: normal"]) .delete-record-btn,
-.selectable-files tr:has([style*="white-space: normal"]) .delete-record-btn {
-  top: 8px !important; /* 强制固定位置 */
-  transform: none !important; /* 强制禁用任何转换 */
-}
 
-/* 文件大小列中展开行的删除按钮特殊处理 - 对所有可能的情况进行覆盖 */
+
-tr:has(.expanded-text) .file-size-cell .delete-record-btn,
-tr.selected-record:has(.expanded-text) .file-size-cell .delete-record-btn,
-.selectable-records tbody tr:has(.expanded-text) .file-size-cell .delete-record-btn,
-.selectable-records tbody tr:hover:has(.expanded-text) .file-size-cell .delete-record-btn,
-#fileSelectModal .table tr:has([style*="white-space: normal"]) .file-size-cell .delete-record-btn,
-.selectable-files tr:has([style*="white-space: normal"]) .file-size-cell .delete-record-btn {
-  top: 8px !important; /* 强制固定位置 */
-  transform: none !important; /* 强制禁用任何转换 */
-  display: flex !important; /* 确保显示 */
-  left: 9px !important; /* 确保左边距固定 */
-}
 
 /* 文件整理页面表格行悬停样式 */
 .selectable-files tbody tr:hover {
@@ -4785,25 +4783,57 @@ tr.selected-record:has(.expanded-text) .file-size-cell .delete-record-btn,
 
 /* --------------- 文件整理页面样式 --------------- */
 
+/* 重命名按钮样式 */
+.selectable-files .rename-record-btn {
+  color: var(--focus-border-color);
+  cursor: pointer;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  position: absolute;
+  left: 5px; /* 靠左放置 */
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 14px;
+}
+
+/* 文件整理页面的重命名文件按钮图标大小 */
+.selectable-files .rename-record-btn .bi-pencil {
+  font-size: 0.98rem;
+  position: relative;
+  left: 0.5px;
+}
+
 /* 删除按钮样式调整 */
 .selectable-files .delete-record-btn {
   color: #dc3545;
   cursor: pointer;
   display: none;
   align-items: center;
-  justify-content: flex-start; /* 居左对齐 */
+  justify-content: center;
   width: 24px;
   height: 24px;
   border-radius: 4px;
-  transition: background-color 0.2s ease;
   position: absolute;
   right: auto; /* 移除右对齐 */
-  left: 9px; /* 与大小值保持相同的左边距 */
+  left: 32px; /* 在重命名按钮右侧，调整间距 */
   top: 50%;
   transform: translateY(-50%);
+  font-size: 14px;
 }
 
-/* 修复：确保在悬停和选中状态下删除按钮显示 */
+/* 文件大小单元格需要相对定位以容纳绝对定位的按钮 */
+.selectable-files .file-size-cell {
+  position: relative;
+  min-width: 80px;
+}
+
+/* 修复：确保在悬停和选中状态下重命名和删除按钮显示 */
+.selectable-files tr:hover .file-size-cell .rename-record-btn,
+.selectable-files tr.selected-file .file-size-cell .rename-record-btn,
 .selectable-files tr:hover .file-size-cell .delete-record-btn,
 .selectable-files tr.selected-file .file-size-cell .delete-record-btn {
   display: inline-flex !important;
@@ -4817,52 +4847,92 @@ tr.selected-record:has(.expanded-text) .file-size-cell .delete-record-btn,
   visibility: hidden !important;
 }
 
-/* 修复：确保在悬停和选中状态下删除按钮显示 */
+/* 重命名输入框样式 - 使用更高优先级 */
-.selectable-files tbody tr:hover .file-size-cell .delete-record-btn,
+.selectable-files .rename-input {
-.selectable-files tr.selected-file .file-size-cell .delete-record-btn {
+  flex: 1 !important;
-  display: flex !important;
+  min-width: 0 !important;
+  font-size: 0.94rem !important;
+  padding: 4px 5.5px !important;
+  border: 1px solid var(--focus-border-color) !important;
+  border-radius: 6px !important;
+  outline: none !important;
+  background-color: #fff !important;
+  height: auto !important;
+  line-height: 1.2 !important;
+  box-sizing: border-box !important;
+  margin-top: -2px !important;
+  margin-bottom: -2px !important;
+}
+
+.selectable-files .rename-input:focus {
+  border-color: var(--focus-border-color) !important;
+  box-shadow: none !important;
+}
+
+/* 确保文件整理页面的重命名按钮在悬停和选中状态下始终可见 - 最高优先级 */
+body .selectable-files tbody tr:hover .file-size-cell .rename-record-btn,
+body .selectable-files tr.selected-file .file-size-cell .rename-record-btn {
+  display: inline-flex !important;
   visibility: visible !important;
   position: absolute !important;
-  top: 8px !important;
+  top: 50% !important;
-  left: 9px !important;
+  transform: translateY(-50%) !important;
-  transform: none !important;
+  left: 5px !important;
+  width: 24px !important;
   height: 24px !important;
-  width: auto !important;
   align-items: center !important;
-  justify-content: flex-start !important;
+  justify-content: center !important;
-  z-index: 5 !important; /* 确保删除按钮在其他元素之上 */
+  z-index: 5 !important;
-}
+  opacity: 1 !important;
-
-/* 修复文件大小列中的删除按钮特殊处理 */
-.selectable-files .file-size-cell .delete-record-btn {
-  position: absolute !important;
-  left: 9px !important;
-  top: 8px !important;
-  transform: none !important;
-  display: none; /* 默认隐藏 */
-  visibility: hidden; /* 默认隐藏 */
-}
-
-/* 修复：确保在悬停和选中状态下文件大小值隐藏 */
-.selectable-files tbody tr:hover .file-size-cell .file-size-value,
-.selectable-files tr.selected-file .file-size-cell .file-size-value {
-  display: none !important;
-  visibility: hidden !important;
 }
 
 /* 确保文件整理页面的删除按钮在悬停和选中状态下始终可见 - 最高优先级 */
 body .selectable-files tbody tr:hover .file-size-cell .delete-record-btn,
 body .selectable-files tr.selected-file .file-size-cell .delete-record-btn {
-  display: flex !important;
+  display: inline-flex !important;
+  visibility: visible !important;
+  position: absolute !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  left: 32px !important;
+  width: 24px !important;
+  height: 24px !important;
+  align-items: center !important;
+  justify-content: center !important;
+  z-index: 5 !important;
+  opacity: 1 !important;
+}
+
+/* 展开状态下的重命名按钮悬停和选中状态 - 最高优先级 */
+body .selectable-files tbody tr:hover:has([style*="white-space: normal"]) .file-size-cell .rename-record-btn,
+body .selectable-files tr.selected-file:has([style*="white-space: normal"]) .file-size-cell .rename-record-btn {
+  display: inline-flex !important;
   visibility: visible !important;
   position: absolute !important;
   top: 8px !important;
-  left: 9px !important;
   transform: none !important;
+  left: 5px !important;
+  width: 24px !important;
   height: 24px !important;
-  width: auto !important;
   align-items: center !important;
-  justify-content: flex-start !important;
+  justify-content: center !important;
+  z-index: 5 !important;
+  opacity: 1 !important;
+}
+
+/* 展开状态下的删除按钮悬停和选中状态 - 最高优先级 */
+body .selectable-files tbody tr:hover:has([style*="white-space: normal"]) .file-size-cell .delete-record-btn,
+body .selectable-files tr.selected-file:has([style*="white-space: normal"]) .file-size-cell .delete-record-btn {
+  display: inline-flex !important;
+  visibility: visible !important;
+  position: absolute !important;
+  top: 8px !important;
+  transform: none !important;
+  left: 32px !important;
+  width: 24px !important;
+  height: 24px !important;
+  align-items: center !important;
+  justify-content: center !important;
   z-index: 5 !important;
   opacity: 1 !important;
 }
@@ -4971,15 +5041,7 @@ body .selectable-files tr.selected-file .file-size-cell .delete-record-btn {
   vertical-align: top !important; /* 强制文件大小列顶部对齐 */
 }
 
-/* 确保文件大小列中的删除按钮在展开状态下位置正确 */
+
-.selectable-files tr:has([style*="white-space: normal"]) .file-size-cell .delete-record-btn,
-.selectable-files tr:has(div:not(.text-truncate):not(.expand-button):not(.d-flex)) .file-size-cell .delete-record-btn {
-  top: 8px !important; /* 强制固定位置 */
-  transform: none !important; /* 强制禁用任何转换 */
-  display: flex !important; /* 确保显示 */
-  left: 9px !important; /* 确保左边距固定 */
-  position: absolute !important; /* 强制绝对定位 */
-}
 
 /* 确保选中状态下文件整理页面的展开按钮也保持白色背景 */
 .selectable-files .expand-button {

app/templates/index.html

@@ -1151,7 +1151,7 @@
                 <thead>
                   <tr>
                     <th style="width:80%" class="cursor-pointer" @click="sortFiles('file_name')">文件名 <i v-if="fileManager.sortBy === 'file_name'" :class="fileManager.sortOrder === 'asc' ? 'bi bi-arrow-up' : 'bi bi-arrow-down'"></i></th>
-                    <th style="width:10%; min-width: 60px;" class="cursor-pointer" @click="sortFiles('file_size')">大小 <i v-if="fileManager.sortBy === 'file_size'" :class="fileManager.sortOrder === 'asc' ? 'bi bi-arrow-up' : 'bi bi-arrow-down'"></i></th>
+                    <th style="width:10%; min-width: 80px;" class="cursor-pointer" @click="sortFiles('file_size')">大小 <i v-if="fileManager.sortBy === 'file_size'" :class="fileManager.sortOrder === 'asc' ? 'bi bi-arrow-up' : 'bi bi-arrow-down'"></i></th>
                     <th style="width:10%" class="cursor-pointer" @click="sortFiles('updated_at')">修改日期 <i v-if="fileManager.sortBy === 'updated_at'" :class="fileManager.sortOrder === 'asc' ? 'bi bi-arrow-up' : 'bi bi-arrow-down'"></i></th>
                   </tr>
                 </thead>
@@ -1168,11 +1168,25 @@
                   </tr>
                   <template v-else>
                     <tr v-for="(file, index) in fileManager.fileList" :key="file.fid"
-                        @click="file.dir ? navigateToFolder(file.fid, file.file_name) : selectFileForManager($event, file)"
+                        @click="handleFileRowClick(file, $event)"
                         :class="{'selected-file': fileManager.selectedFiles.includes(file.fid)}"
                         class="cursor-pointer">
                       <td class="position-relative">
-                        <div v-if="!file._expanded" class="d-flex align-items-center">
+                        <!-- 编辑状态 -->
+                        <div v-if="file._editing" class="d-flex align-items-center" @click.stop>
+                          <i class="bi mr-2" :class="file.dir ? 'bi-folder-fill text-warning' : 'bi-file-earmark'"></i>
+                          <input
+                            type="text"
+                            class="form-control form-control-sm rename-input"
+                            v-model="file._editingName"
+                            @keyup.enter="saveRenameFile(file)"
+                            @keyup.escape="cancelRenameFile(file)"
+                            @blur="saveRenameFile(file)"
+                            @click.stop
+                            :ref="'renameInput_' + file.fid">
+                        </div>
+                        <!-- 正常显示状态 -->
+                        <div v-else-if="!file._expanded" class="d-flex align-items-center">
                           <i class="bi mr-2" :class="file.dir ? 'bi-folder-fill text-warning' : 'bi-file-earmark'"></i>
                           <div class="text-truncate"
                               :title="file.file_name"
@@ -1183,12 +1197,15 @@
                         <div v-else style="white-space: normal; word-break: break-word; padding-right: 25px;">
                           <i class="bi mr-2" :class="file.dir ? 'bi-folder-fill text-warning' : 'bi-file-earmark'"></i>{{ file.file_name }}
                         </div>
-                        <div class="expand-button" v-if="isFilenameTruncated(file.file_name, index, 'file_name')" @click.stop="toggleExpandFilename(file)">
+                        <div class="expand-button" v-if="!file._editing && isFilenameTruncated(file.file_name, index, 'file_name')" @click.stop="toggleExpandFilename(file)">
                           <i :class="file._expanded ? 'bi bi-chevron-up' : 'bi bi-chevron-down'"></i>
                         </div>
                       </td>
                       <td class="file-size-cell">
                         <span class="file-size-value">{{ file.dir ? (file.include_items + ' 项') : formatFileSize(file.size || file.file_size) }}</span>
+                        <span class="rename-record-btn" @click.stop="startRenameFile(file)" title="重命名文件">
+                          <i class="bi bi-pencil"></i>
+                        </span>
                         <span class="delete-record-btn" @click.stop="deleteSelectedFilesForManager(file.fid, file.file_name, file.dir)" title="删除文件">
                           <i class="bi bi-trash3"></i>
                         </span>
@@ -4215,6 +4232,31 @@
             this.lastSelectedRecordIndex = -1;
           }
         },
+        // 处理重命名编辑状态的外部点击事件
+        handleRenameOutsideClick(event) {
+          // 如果当前不是文件整理页面，则不处理
+          if (this.activeTab !== 'filemanager') {
+            return;
+          }
+
+          // 检查是否有文件正在编辑状态
+          const editingFile = this.fileManager.fileList.find(file => file._editing);
+          if (!editingFile) {
+            return;
+          }
+
+          // 检查点击是否在重命名按钮上
+          const renameButton = event.target.closest('.rename-record-btn');
+          if (renameButton) {
+            return; // 点击在重命名按钮上，不处理
+          }
+
+          // 点击在任何地方（包括输入框内），都保存重命名并关闭输入框
+          this.saveRenameFile(editingFile);
+
+          // 阻止事件继续传播，避免与其他点击事件处理器冲突
+          event.stopPropagation();
+        },
         selectFileItem(event, fileId) {
           // 如果是在预览模式或选择分享模式，不允许选择
           if (this.fileSelect.previewRegex || this.fileSelect.selectShare) return;
@@ -4930,6 +4972,101 @@
               });
           }
         },
+        // 开始重命名文件
+        startRenameFile(file) {
+          // 设置编辑状态
+          this.$set(file, '_editing', true);
+          this.$set(file, '_editingName', file.file_name);
+
+          // 下一个tick后聚焦输入框并全选文本
+          this.$nextTick(() => {
+            const input = this.$refs['renameInput_' + file.fid];
+            if (input) {
+              input.focus();
+              input.select();
+            }
+          });
+        },
+        // 保存重命名
+        saveRenameFile(file) {
+          if (!file._editing) return;
+
+          const newName = file._editingName.trim();
+
+          // 如果名称没有变化，直接取消编辑
+          if (newName === file.file_name) {
+            this.cancelRenameFile(file);
+            return;
+          }
+
+          // 如果新名称为空，提示错误并恢复原始文件名，然后退出编辑状态
+          if (!newName) {
+            this.showToast('文件名不能为空');
+            // 恢复原始文件名并退出编辑状态
+            this.cancelRenameFile(file);
+            return;
+          }
+
+          // 调用重命名API
+          axios.post('/batch_rename', {
+            files: [{
+              file_id: file.fid,
+              new_name: newName,
+              old_name: file.file_name
+            }],
+            account_index: this.fileManager.selectedAccountIndex
+          })
+            .then(response => {
+              if (response.data.success) {
+                // 更新文件名
+                file.file_name = newName;
+                this.showToast('重命名成功');
+                // 刷新文件列表以确保缓存同步
+                this.refreshCurrentFolderCache();
+                // 如果命名预览模态框是打开的，也要刷新它
+                if ($('#fileSelectModal').hasClass('show')) {
+                  this.showFileManagerNamingPreview(this.fileManager.currentFolder);
+                }
+              } else {
+                this.showToast(response.data.message || '重命名失败');
+              }
+            })
+            .catch(error => {
+              console.error('重命名文件失败:', error);
+              this.showToast('重命名文件失败');
+            })
+            .finally(() => {
+              // 无论成功失败都退出编辑状态
+              this.cancelRenameFile(file);
+            });
+        },
+        // 取消重命名
+        cancelRenameFile(file) {
+          this.$set(file, '_editing', false);
+          this.$set(file, '_editingName', '');
+        },
+        // 处理文件行点击事件
+        handleFileRowClick(file, event) {
+          // 如果文件正在编辑状态，不处理点击事件
+          if (file._editing) {
+            return;
+          }
+
+          // 检查是否有任何文件正在编辑状态
+          const editingFile = this.fileManager.fileList.find(f => f._editing);
+          if (editingFile) {
+            // 如果有其他文件正在编辑，先保存编辑状态
+            this.saveRenameFile(editingFile);
+            return;
+          }
+
+          // 正常处理点击事件
+          if (file.dir) {
+            this.navigateToFolder(file.fid, file.file_name);
+          } else {
+            this.selectFileForManager(event, file);
+          }
+        },
         loadFileList(folderId) {
           this.fileManager.loading = true;
           this.fileManager.currentFolder = folderId || 'root';
@@ -5153,6 +5290,12 @@
             return;
           }
 
+          // 如果有文件正在编辑状态，不处理文件选择逻辑，让重命名处理器优先处理
+          const editingFile = this.fileManager.fileList.find(file => file._editing);
+          if (editingFile) {
+            return;
+          }
+
           // 检查点击是否在表格内
           const tableElement = document.querySelector('.table.selectable-files');
           // 检查点击是否在分页控制区域
@@ -5397,6 +5540,9 @@
         // 添加点击事件监听器，用于在点击模态框表格外区域时取消选择文件
         document.addEventListener('click', this.handleModalOutsideClick);
 
+        // 添加点击事件监听器，用于处理重命名编辑状态
+        document.addEventListener('click', this.handleRenameOutsideClick);
+        
         // 添加模态框关闭事件监听，清空选中文件列表
         $('#fileSelectModal').on('hidden.bs.modal', () => {
           this.fileSelect.selectedFiles = [];
@@ -5464,6 +5610,7 @@
         window.removeEventListener('beforeunload', this.handleBeforeUnload);
         // 移除点击事件监听器
         document.removeEventListener('click', this.handleOutsideClick);
+        document.removeEventListener('click', this.handleRenameOutsideClick);
       }
     });
   </script>