perf: 🚀PageSearch组件优化，扩展表单控件，支持事件监听

src/views/demo/curd/config/search.ts

@@ -3,17 +3,22 @@ import type { ISearchConfig } from "@/components/CURD/types";
 
 const searchConfig: ISearchConfig = {
   pageName: "sys:user",
+  colon: false,
   formItems: [
     {
+      tips: "支持模糊搜索",
       type: "input",
       label: "关键字",
       prop: "keywords",
       attrs: {
         placeholder: "用户名/昵称/手机号",
         clearable: true,
-        style: {
-          width: "200px",
-        },
+        style: { width: "200px" },
+      },
+      events: {
+        // 监听输入框输入事件
+        blur: (e) => console.log("失去焦点: ", e),
+        focus: (e) => console.log("获得焦点: ", e),
       },
     },
     {
@@ -27,9 +32,7 @@ const searchConfig: ISearchConfig = {
         "check-strictly": true,
         "render-after-expand": false,
         clearable: true,
-        style: {
-          width: "150px",
-        },
+        style: { width: "200px" },
       },
       async initFn(formItem) {
         formItem.attrs.data = await DeptAPI.getOptions();
@@ -38,20 +41,22 @@ const searchConfig: ISearchConfig = {
       },
     },
     {
+      tips: { effect: "light", placement: "top", content: "自定义文字提示" },
       type: "select",
       label: "状态",
       prop: "status",
       attrs: {
         placeholder: "全部",
         clearable: true,
-        style: {
-          width: "100px",
-        },
+        style: { width: "200px" },
       },
       options: [
         { label: "启用", value: 1 },
         { label: "禁用", value: 0 },
       ],
+      events: {
+        change: (e) => console.log("发生变化: ", e),
+      },
     },
     {
       type: "date-picker",
@@ -63,9 +68,62 @@ const searchConfig: ISearchConfig = {
         "start-placeholder": "开始时间",
         "end-placeholder": "截止时间",
         "value-format": "YYYY-MM-DD",
-        style: {
-          width: "240px",
-        },
+        style: { width: "200px" },
+      },
+    },
+    {
+      type: "date-picker",
+      label: "日期选择器",
+      prop: "testDataPicker",
+      attrs: {
+        type: "date",
+        placeholder: "选择日期",
+        style: { width: "200px" },
+      },
+    },
+    {
+      type: "input-number",
+      label: "数字输入框",
+      prop: "testInputNumber",
+      attrs: {
+        controls: false,
+        placeholder: "请输入数字",
+        style: { width: "200px" },
+      },
+    },
+    {
+      type: "input-tag",
+      label: "标签选择器",
+      prop: "testInputTags",
+      attrs: {
+        clearable: true,
+        placeholder: "请输入",
+      },
+    },
+    {
+      type: "custom-tag",
+      label: "标签选择器",
+      prop: "testCustomTags",
+      attrs: {
+        buttonAttrs: { btnText: "+ New Tag" },
+        inputAttrs: {},
+        tagAttrs: {},
+      },
+    },
+    {
+      type: "time-picker",
+      label: "时间选择器",
+      prop: "testTimePicker",
+      attrs: {
+        style: { width: "200px" },
+      },
+    },
+    {
+      type: "time-select",
+      label: "时间选择",
+      prop: "testTimeSelect",
+      attrs: {
+        style: { width: "200px" },
       },
     },
   ],