UX优化 点击文件夹时 展开图标变更为高对比色 并能够直接点击文件夹展开或收起子文件列表

Author: JamAnNa

build/dist/eext-api-debug-tool_v2.6.5.eext

@@ -151,40 +151,33 @@ class FileTreeUI {
 	attachEvents() {
 		// 文件夹展开/收起
 		this.container.querySelectorAll('.file-tree-folder').forEach((folder) => {
-			// 点击箭头切换展开状态
-			const toggle = folder.querySelector('.folder-toggle');
-			if (toggle) {
-				toggle.addEventListener('click', (e) => {
-					e.stopPropagation();
+				// 点击文件夹：选中并切换展开/折叠状态
+				folder.addEventListener('click', (e) => {
 					const path = folder.dataset.path;
+					// 选中文件夹
+					this.handleItemClick(e, path, 'folder');
+					// 同时切换展开/折叠状态
 					if (this.expandedFolders.has(path)) {
 						this.expandedFolders.delete(path);
 					} else {
 						this.expandedFolders.add(path);
 					}
 					this.render();
 				});
-			}
-
-			// 点击文件夹名称进行选择
-			folder.addEventListener('click', (e) => {
-				if (e.target.classList.contains('folder-toggle')) return;
-				this.handleItemClick(e, folder.dataset.path, 'folder');
-			});
 
-			// 文件夹右键菜单
-			folder.addEventListener('contextmenu', (e) => {
-				e.preventDefault();
-				const path = folder.dataset.path;
-				// 如果右键的项目未被选中，则只选中它
-				if (!this.selectedItems.has(path)) {
-					this.selectedItems.clear();
-					this.selectedItems.add(path);
-					this.render();
-				}
-				this.showContextMenu(e, path, 'folder');
+				// 文件夹右键菜单
+				folder.addEventListener('contextmenu', (e) => {
+					e.preventDefault();
+					const path = folder.dataset.path;
+					// 如果右键的项目未被选中，则只选中它
+					if (!this.selectedItems.has(path)) {
+						this.selectedItems.clear();
+						this.selectedItems.add(path);
+						this.render();
+					}
+					this.showContextMenu(e, path, 'folder');
+				});
 			});
-		});
 
 		// 文件项点击
 		this.container.querySelectorAll('.file-tree-item').forEach((item) => {

iframe/script/User_config/FileTree_UI.js

@@ -26,6 +26,7 @@
 .file-tree-folder:hover { background: var(--eext-hover-bg); }
 
 .folder-toggle { font-size: 10px; margin-right: 4px; color: var(--eext-text-secondary); width: 12px; display: inline-block; }
+.file-tree-folder.selected .folder-toggle { color: var(--eext-text-primary); font-weight: bold; }
 .folder-icon { font-size: 14px; margin-right: 4px; }
 .folder-name { flex: 1; font-size: var(--eext-font-size); color: var(--eext-text-primary); font-weight: 500; }