feat: 优化工具栏布局，添加吸顶样式和搜索栏样式以提升用户体验 [FR] UI/X improvements #11

src/view.ts

@@ -511,37 +511,16 @@ export class CSVView extends TextFileView {
 						});
 				});
 
-			// 创建操作按钮容器
+			// 创建操作按钮容器（外层flex，两端对齐）
 			const buttonContainer = this.operationEl.createEl("div", {
 				cls: "csv-operation-buttons",
 			});
-
-			// 撤销按钮
-			new ButtonComponent(buttonContainer)
-				.setButtonText(i18n.t("buttons.undo"))
-				.setIcon("undo")
-				.onClick(() => this.undo());
-
-			// 重做按钮
-			new ButtonComponent(buttonContainer)
-				.setButtonText(i18n.t("buttons.redo"))
-				.setIcon("redo")
-				.onClick(() => this.redo());
-
-			// 重置列宽按钮
-			new ButtonComponent(buttonContainer)
-				.setButtonText(i18n.t("buttons.resetColumnWidth"))
-				.onClick(() => {
-					this.columnWidths = [];
-					this.calculateColumnWidths();
-					this.refresh();
-				});
-
-			// CSV导入导出选项
-			this.operationEl.createEl("div", { cls: "csv-export-import" });
-
-			// === 重新添加搜索栏到工具栏 ===
-			const searchBarContainer = this.operationEl.createEl("div", {
+			// 按钮组（左侧）
+			const buttonsGroup = buttonContainer.createEl("div", {
+				cls: "csv-buttons-group"
+			});
+			// 搜索栏（右侧）
+			const searchBarContainer = buttonContainer.createEl("div", {
 				cls: "csv-search-bar-container"
 			});
 			this.searchBar = new SearchBar(searchBarContainer, {
@@ -552,7 +531,30 @@ export class CSVView extends TextFileView {
 				jumpToCell: (row: number, col: number) => this.jumpToCell(row, col),
 				clearSearchHighlights: () => this.clearSearchHighlights(),
 			});
-			// === 搜索栏添加结束 ===
+
+			// 撤销按钮
+			new ButtonComponent(buttonsGroup)
+				.setButtonText(i18n.t("buttons.undo"))
+				.setIcon("undo")
+				.onClick(() => this.undo());
+
+			// 重做按钮
+			new ButtonComponent(buttonsGroup)
+				.setButtonText(i18n.t("buttons.redo"))
+				.setIcon("redo")
+				.onClick(() => this.redo());
+
+			// 重置列宽按钮
+			new ButtonComponent(buttonsGroup)
+				.setButtonText(i18n.t("buttons.resetColumnWidth"))
+				.onClick(() => {
+					this.columnWidths = [];
+					this.calculateColumnWidths();
+					this.refresh();
+				});
+
+			// CSV导入导出选项
+			this.operationEl.createEl("div", { cls: "csv-export-import" });
 
 			// 创建编辑栏（在操作区之后）
 			this.editBarEl = this.contentEl.createEl("div", {
@@ -658,6 +660,9 @@ export class CSVView extends TextFileView {
 					this.highlightManager.clearSelection();
 				});
 			}
+
+			// 为工具栏添加sticky样式类
+			this.operationEl.addClass("csv-toolbar-sticky");
 		} catch (error) {
 			console.error("Error in onOpen:", error);
 			new Notice(`Failed to open CSV view: ${error.message}`);

styles.css

@@ -79,6 +79,48 @@ If your plugin does not need CSS, delete this file.
 	gap: 8px;
 	flex-wrap: wrap;
 	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+}
+
+/* 工具栏吸顶样式 */
+.csv-toolbar-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: var(--background-primary);
+  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.06);
+  padding-bottom: 4px;
+}
+
+/* 按钮组样式 */
+.csv-buttons-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 搜索栏样式 */
+.csv-search-bar-container {
+  display: flex;
+  justify-content: flex-end;
+  flex: 1 1 220px;
+  min-width: 180px;
+  max-width: 320px;
+}
+
+.csv-search-bar-container .csv-search-container {
+  width: 100%;
+}
+
+/* 让搜索输入和按钮高度一致 */
+.csv-search-input {
+  height: 32px;
+  font-size: 1em;
+  padding: 0 8px;
+  border-radius: 4px;
+  border: 1px solid var(--background-modifier-border);
+  background: var(--background-secondary);
 }
 
 /* 列宽调整手柄 */