优化

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",

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",

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>
 	);
 }

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;
+		}
 	}
 }
 

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',

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') {