From 6bd54ef1aa1292bd5c1670a34442e0a5991019c3 Mon Sep 17 00:00:00 2001
From: icssoa <615206459@qq.com>
Date: Tue, 6 May 2025 15:51:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 packages/crud/package.json                    |  2 +-
 .../src/components/table/helper/header.tsx    | 49 +++++++++++-----
 packages/crud/src/static/index.scss           | 57 +++++++++++++++----
 .../views/crud/components/table/search.vue    |  2 +-
 src/plugins/distpicker/components/index.tsx   | 14 ++++-
 6 files changed, 97 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 43ef39f..d73bd15 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
 		"format": "prettier --write src/"
 	},
 	"dependencies": {
-		"@cool-vue/crud": "^8.0.3",
+		"@cool-vue/crud": "^8.0.4",
 		"@element-plus/icons-vue": "^2.3.1",
 		"@vueuse/core": "^12.5.0",
 		"@wangeditor/editor": "^5.1.23",
diff --git a/packages/crud/package.json b/packages/crud/package.json
index db994c3..8b11fd7 100644
--- a/packages/crud/package.json
+++ b/packages/crud/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@cool-vue/crud",
-	"version": "8.0.3",
+	"version": "8.0.4",
 	"private": false,
 	"main": "./dist/index.umd.js",
 	"module": "./dist/index.es.js",
diff --git a/packages/crud/src/components/table/helper/header.tsx b/packages/crud/src/components/table/helper/header.tsx
index 39b6820..3f20a14 100644
--- a/packages/crud/src/components/table/helper/header.tsx
+++ b/packages/crud/src/components/table/helper/header.tsx
@@ -1,4 +1,4 @@
-import { Search } from "@element-plus/icons-vue";
+import { CloseBold, Search } from "@element-plus/icons-vue";
 import { h } from "vue";
 import { useCrud } from "../../../hooks";
 import { renderNode } from "../../../utils/vnode";
@@ -24,12 +24,31 @@ export function renderHeader(item: ClTable.Column, { scope, slots }: any) {
 		e.stopPropagation();
 	}
 
+	// 隐藏输入框
+	function hide() {
+		if (item.search.value !== undefined) {
+			item.search.value = undefined;
+			refresh();
+		}
+
+		item.search.isInput = false;
+	}
+
+	// 刷新
+	function refresh(params?: any) {
+		const { value } = item.search;
+
+		crud.value?.refresh({
+			page: 1,
+			[item.prop]: value === "" ? undefined : value,
+			...params
+		});
+	}
+
 	// 文字
 	const text = (
-		<div onClick={show}>
-			<el-icon class="icon">
-				{item.search.icon?.() ?? <Search />}
-			</el-icon>
+		<div class="cl-table-header__search-label" onClick={show}>
+			<el-icon size={14}>{item.search.icon?.() ?? <Search />}</el-icon>
 
 			{item.renderLabel ? item.renderLabel(scope) : item.label}
 		</div>
@@ -51,22 +70,22 @@ export function renderHeader(item: ClTable.Column, { scope, slots }: any) {
 
 			// 更改时刷新列表
 			if (item.search.refreshOnChange) {
-				crud.value?.refresh({
-					page: 1,
-					[item.prop]: val === "" ? undefined : val
-				});
-			}
-		},
-		onBlur() {
-			if (item.search.value === null || item.search.value === undefined || item.search.value === "") {
-				item.search.isInput = false;
+				refresh();
 			}
 		}
 	});
 
 	return (
 		<div class={["cl-table-header__search", { "is-input": item.search.isInput }]}>
-			{item.search.isInput ? input : text}
+			<div class="cl-table-header__search-inner">{item.search.isInput ? input : text}</div>
+
+			{item.search.isInput && (
+				<div class="cl-table-header__search-close" onClick={hide}>
+					<el-icon>
+						<CloseBold />
+					</el-icon>
+				</div>
+			)}
 		</div>
 	);
 }
diff --git a/packages/crud/src/static/index.scss b/packages/crud/src/static/index.scss
index 2005f35..1b7ee65 100644
--- a/packages/crud/src/static/index.scss
+++ b/packages/crud/src/static/index.scss
@@ -122,28 +122,65 @@
 	}
 
 	.cl-table-header__search {
-		display: inline-block;
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
 		width: 100%;
 		cursor: pointer;
 
-		.icon {
-			margin-right: 5px;
-			position: relative;
-			top: 2px;
-			font-size: 14px;
+		&-label {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 5px;
 		}
 
 		&:hover {
 			color: var(--el-color-primary);
 		}
 
-		& > div {
-			width: 100%;
+		&-inner {
+			flex: 1;
 
-			.el-date-editor {
-				margin-right: 0;
+			& > div {
+				width: 100%;
+
+				.el-date-editor {
+					margin-right: 0;
+				}
 			}
 		}
+
+		&-close {
+			font-size: 14px;
+			height: 30px;
+			width: 30px;
+			border: 1px solid var(--el-border-color);
+			border-radius: 6px;
+			background-color: var(--el-fill-color-blank);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			transition: all 0.2s;
+			color: var(--el-text-color-secondary);
+
+			&:hover {
+				border-color: var(--el-border-color-hover);
+				color: var(--el-text-color-primary);
+			}
+		}
+	}
+
+	.is-left {
+		.cl-table-header__search-label {
+			justify-content: flex-start;
+		}
+	}
+
+	.is-right {
+		.cl-table-header__search-label {
+			justify-content: flex-end;
+		}
 	}
 }
 
diff --git a/src/modules/demo/views/crud/components/table/search.vue b/src/modules/demo/views/crud/components/table/search.vue
index a6b4a9e..88cb8ea 100644
--- a/src/modules/demo/views/crud/components/table/search.vue
+++ b/src/modules/demo/views/crud/components/table/search.vue
@@ -109,7 +109,7 @@ const Table = useTable({
 			//【很重要】搜索参数配置
 			search: {
 				// 是否显示搜索图标
-				icon: () => <cl-svg name="icon-app" size={13} />,
+				icon: () => <cl-svg name="icon-app" size={14} />,
 				// 自定义渲染组件
 				component: {
 					name: 'cl-select',
diff --git a/src/plugins/distpicker/components/index.tsx b/src/plugins/distpicker/components/index.tsx
index a9f219d..ae872ab 100644
--- a/src/plugins/distpicker/components/index.tsx
+++ b/src/plugins/distpicker/components/index.tsx
@@ -1,5 +1,6 @@
 import { type PropType, defineComponent } from 'vue';
 import data from '../data/pca.json';
+import { useCool } from '/@/cool';
 
 export default defineComponent({
 	name: 'cl-distpicker',
@@ -12,10 +13,21 @@ export default defineComponent({
 		}
 	},
 
-	setup(props) {
+	setup(props, { expose }) {
+		const { refs, setRefs } = useCool();
+
+		function focus() {
+			refs.cascader?.togglePopperVisible();
+		}
+
+		expose({
+			focus
+		});
+
 		return () => {
 			return (
 				<el-cascader
+					ref={setRefs('cascader')}
 					clearable
 					options={data.map(e => {
 						if (props.type === 'pc') {