[前端] checkbox改为批量删除模式才显示；修复搜索文件名时不展开文件夹的问题

chat_web_front/src/views/reading/index.vue

@@ -27,8 +27,9 @@
             node-key="treeId"
             :expand-on-click-node="false"
             :default-expand-all="false"
+            :default-expanded-keys="expandedKeys"
             highlight-current
-            show-checkbox
+            :show-checkbox="batchMode"
             @node-click="handleNodeClick"
             @check-change="handleCheckChange"
           >
@@ -64,10 +65,18 @@
         </div>
 
         <div class="left-footer">
-          <div class="batch-del-btn" @click="delBatch">
+          <div v-if="!batchMode" class="batch-del-btn" @click="batchMode = true">
             <img src="@/assets/images/reading/del.png" alt="">
             <span>批量删除</span>
           </div>
+          <div v-else style="display:flex;gap:8px;">
+            <div class="batch-del-btn batch-confirm" @click="delBatch">
+              <span>确认删除</span>
+            </div>
+            <div class="batch-del-btn" @click="batchMode = false">
+              <span>取消</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -249,6 +258,7 @@ const searchWord = ref('');
 const treeData = ref<any[]>([]);
 const treeProps = { children: 'children', label: 'label' };
 const checkedNodes = ref<any[]>([]);
+const batchMode = ref(false);
 
 // ===================== 选中文件 =====================
 const selectedFile = ref<any>(null);
@@ -380,6 +390,11 @@ const filteredTreeData = computed(() => {
   }));
 });
 
+const expandedKeys = computed(() => {
+  if (!searchWord.value.trim()) return [];
+  return filteredTreeData.value.map((f: any) => f.treeId);
+});
+
 const handleNodeClick = async (data: any) => {
   if (data.isFolder) {
     await loadFolderFiles(data);
@@ -757,10 +772,11 @@ onMounted(async () => {
   .left-footer {
     padding: 8px 12px; border-top: 1px solid #E6EDFF;
     .batch-del-btn {
-      display: flex; align-items: center; justify-content: center; height: 30px;
+      display: flex; align-items: center; justify-content: center; height: 30px; flex: 1;
       border: 1px solid #004EA0; border-radius: 4px; cursor: pointer; color: #004EA0; font-size: 13px;
       img { width: 14px; margin-right: 4px; }
       &:hover { background: #F0F4FF; }
+      &.batch-confirm { background: #BE0000; color: #fff; border-color: #BE0000; &:hover { background: #a00; } }
     }
   }
 }