From f3759cac54dc626dd9853ad9fc7e06eaa1ea7694 Mon Sep 17 00:00:00 2001
From: JayBridge <12310903@mail.sustech.edu.cn>
Date: Thu, 19 Jun 2025 16:58:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E6=A0=8F=E5=B8=83=E5=B1=80=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=90=B8?=
 =?UTF-8?q?=E9=A1=B6=E6=A0=B7=E5=BC=8F=E5=92=8C=E6=90=9C=E7=B4=A2=E6=A0=8F?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BB=A5=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C=20[FR]=20UI/X=20improvements=20#11?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/view.ts | 63 +++++++++++++++++++++++++++++------------------------
 styles.css  | 42 +++++++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+), 29 deletions(-)

diff --git a/src/view.ts b/src/view.ts
index 9bcf225..87ef4f5 100644
--- a/src/view.ts
+++ b/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}`);
diff --git a/styles.css b/styles.css
index 3c7f88a..35773cd 100644
--- a/styles.css
+++ b/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);
 }
 
 /* 列宽调整手柄 */