发布 8.0

.cursor/rules/adv-search.mdc

@@ -0,0 +1,305 @@
+---
+description: cl-adv-search 组件示例
+globs: *.tsx, *.ts, *.vue
+---
+## 起步 示例
+
+```vue
+<template>
+	<div class="scope">
+		<div class="h">
+			<el-tag size="small" effect="dark" disable-transitions>base</el-tag>
+			<span>起步</span>
+		</div>
+
+		<div class="c">
+			<el-button @click="open">预览</el-button>
+			<demo-code :files="['adv-search/base.vue']" />
+
+			<!-- 自定义表格组件 -->
+			<cl-dialog v-model="visible" title="起步" width="80%">
+				<cl-crud ref="Crud">
+					<cl-row>
+						<!--【很重要】高级搜索组件按钮 -->
+						<cl-adv-btn />
+					</cl-row>
+
+					<cl-row>
+						<cl-table ref="Table" />
+					</cl-row>
+
+					<cl-row>
+						<cl-flex1 />
+						<cl-pagination />
+					</cl-row>
+
+					<!--【很重要】高级搜索组件 -->
+					<cl-adv-search ref="AdvSearch" />
+				</cl-crud>
+			</cl-dialog>
+		</div>
+
+		<div class="f">
+			<span class="date">2024-01-01</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useCrud, useAdvSearch, useTable } from '@cool-vue/crud';
+import { ref } from 'vue';
+import { useDict } from '/$/dict';
+
+const { dict } = useDict();
+
+// cl-crud 配置
+const Crud = useCrud(
+	{
+		service: 'test'
+	},
+	app => {
+		app.refresh();
+	}
+);
+
+// cl-table 配置
+const Table = useTable({
+	autoHeight: false,
+	contextMenu: ['refresh'],
+
+	columns: [
+		{
+			label: '姓名',
+			prop: 'name',
+			minWidth: 140
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			minWidth: 140
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			dict: dict.get('occupation'),
+			minWidth: 140
+		},
+		{
+			label: '创建时间',
+			prop: 'createTime',
+			minWidth: 170,
+			sortable: 'desc'
+		}
+	]
+});
+
+// cl-adv-search 配置
+//【很重要】该组件基于 cl-form 故很多示例都可复用
+const AdvSearch = useAdvSearch({
+	// 配置如 cl-form 一样
+	items: [
+		{
+			label: '姓名',
+			prop: 'name',
+			component: {
+				name: 'el-input',
+				props: {
+					clearable: true
+				}
+			}
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			component: {
+				name: 'el-input',
+				props: {
+					clearable: true
+				}
+			}
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			component: {
+				name: 'cl-select',
+				props: {
+					tree: true,
+					checkStrictly: true,
+					options: dict.get('occupation')
+				}
+			}
+		}
+	]
+});
+
+function refresh(params?: any) {
+	Crud.value?.refresh(params);
+}
+
+const visible = ref(false);
+
+function open() {
+	visible.value = true;
+}
+</script>
+
+```
+
+## 自定义 示例
+
+```vue
+<template>
+	<div class="scope">
+		<div class="h">
+			<el-tag size="small" effect="dark" disable-transitions>custom</el-tag>
+			<span>自定义</span>
+		</div>
+
+		<div class="c">
+			<el-button @click="open">预览</el-button>
+			<demo-code :files="['adv-search/custom.vue']" />
+
+			<!-- 自定义表格组件 -->
+			<cl-dialog v-model="visible" title="自定义" width="80%">
+				<cl-crud ref="Crud">
+					<cl-row>
+						<!--【很重要】高级搜索组件按钮 -->
+						<cl-adv-btn>更多搜索</cl-adv-btn>
+					</cl-row>
+
+					<cl-row>
+						<cl-table ref="Table" />
+					</cl-row>
+
+					<cl-row>
+						<cl-flex1 />
+						<cl-pagination />
+					</cl-row>
+
+					<!--【很重要】高级搜索组件 -->
+					<cl-adv-search ref="AdvSearch">
+						<!-- 自定义按钮 -->
+						<template #slot-btn>
+							<el-button @click="toSearch">自定义</el-button>
+						</template>
+					</cl-adv-search>
+				</cl-crud>
+			</cl-dialog>
+		</div>
+
+		<div class="f">
+			<span class="date">2024-01-01</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useCrud, useAdvSearch, useTable } from '@cool-vue/crud';
+import { ref } from 'vue';
+import { useDict } from '/$/dict';
+
+const { dict } = useDict();
+
+// cl-crud 配置
+const Crud = useCrud(
+	{
+		service: 'test'
+	},
+	app => {
+		app.refresh();
+	}
+);
+
+// cl-table 配置
+const Table = useTable({
+	autoHeight: false,
+	contextMenu: ['refresh'],
+
+	columns: [
+		{
+			label: '姓名',
+			prop: 'name',
+			minWidth: 140
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			minWidth: 140
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			dict: dict.get('occupation'),
+			minWidth: 140
+		},
+		{
+			label: '创建时间',
+			prop: 'createTime',
+			minWidth: 170,
+			sortable: 'desc'
+		}
+	]
+});
+
+// cl-adv-search 配置
+//【很重要】该组件基于 cl-form 故很多示例都可复用
+const AdvSearch = useAdvSearch({
+	// 配置如 cl-form 一样
+	items: [
+		{
+			label: '姓名',
+			prop: 'name',
+			component: {
+				name: 'el-input',
+				props: {
+					clearable: true
+				}
+			}
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			component: {
+				name: 'el-input',
+				props: {
+					clearable: true
+				}
+			}
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			component: {
+				name: 'cl-select',
+				props: {
+					tree: true,
+					checkStrictly: true,
+					options: dict.get('occupation')
+				}
+			}
+		}
+	],
+
+	title: '更多搜索',
+	size: '50%',
+	op: ['close', 'search', 'slot-btn']
+});
+
+function refresh(params?: any) {
+	Crud.value?.refresh(params);
+}
+
+// 自定义搜索
+function toSearch() {
+	refresh({ page: 1 });
+}
+
+const visible = ref(false);
+
+function open() {
+	visible.value = true;
+}
+</script>
+
+```

.cursor/rules/module.mdc

@@ -0,0 +1,464 @@
+---
+description: module | plugins 模块、插件
+globs: 
+---
+# 模块/插件开发
+
+## 目录结构
+
+在 `src/modules` 或 `src/plugins` 下添加一个目录 `demo`：
+
+```js
+demo
+    ├──pages // 页面路由
+    ├──views // 视图路由
+    ├──hooks // 常用函数
+    ├──components // 常用组件
+    ├──directives // 指令
+    ├──static // 静态文件目录
+    ├──store // 状态管理
+    ├──... // 其他自定义文件
+    ├──config.ts // 配置文件
+    └──index.ts // 入口文件
+```
+
+::: warning
+约定的目录名称不可修改，但可自行添加或者删除。
+:::
+
+## pages、views
+
+1. 页面参与权限控制，所以不主动注册目录下的路由，通过 `菜单列表` 中配置注册。或者在 `config.ts` 中手动配置：
+
+```js
+import { type ModuleConfig } from "/@/cool";
+
+export default (): ModuleConfig => {
+  return {
+    views: [
+      {
+        path: "/demo",
+        meta: {
+          label: "测试",
+        },
+        component: () => import("./views/demo.vue"),
+      },
+    ],
+    pages: [
+      {
+        path: "/demo2",
+        meta: {
+          label: "测试",
+        },
+        component: () => import("./pages/demo.vue"),
+      },
+    ],
+  };
+};
+```
+
+2. 使页面参与路由缓存，配置 `name` 参数
+
+:::warning
+
+`path` 与 `name` 的匹配规则：
+
+- /demo/t1 = demo-t1
+- /demo/t1-det = demo-t1-det
+
+:::
+
+方式 1：
+
+```html
+<script lang="ts" setup>
+  defineOptions({
+    name: "demo",
+  });
+</script>
+```
+
+方式 2：
+
+```html
+<script lang="ts">
+  export default defineComponent({
+    name: "demo",
+  });
+</script>
+```
+
+## components
+
+目录下的组件，全局注册配置方法如下：
+
+```js
+import { ModuleConfig } from "/@/cool";
+
+export default (): ModuleConfig => {
+  return {
+    components: [
+      import("./components/demo.vue"),
+      import("./components/demo1.vue"),
+    ],
+  };
+};
+```
+
+## directives
+
+`directives` 会以目录下的文件名分别注册指令
+
+```ts
+// demo/directives/test.ts
+export default {
+	created(el, binding) {},
+	mounted() {},
+	...
+};
+```
+
+使用
+
+```html
+<div v-test></div>
+```
+
+## store
+
+使用 `pinia` 的推荐写法：
+
+```ts
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useTestStore = defineStore("test", function () {
+  const count = ref(0);
+
+  function add() {
+    count.value += 1;
+  }
+
+  return {
+    count,
+    add,
+  };
+});
+```
+
+使用
+
+```ts
+import { useTestStore } from "/$/demo/store";
+
+const test = useTestStore();
+
+test.add();
+
+console.log(test.count); // 1
+```
+
+::: tip
+参考 `base` 模块下 `store` 的导出方式
+:::
+
+## config.ts
+
+模块的配置，程序运行时会读取该文件。
+
+- 全局组件、路由的导入
+
+- 事件钩子
+
+输入 `module-config` 关键字，`vscode` 中会自动生成：
+
+```ts
+import { ModuleConfig } from "/@/cool";
+import { Vue } from "vue";
+
+export default (): ModuleConfig => {
+  return {
+    // 是否启用
+    enable: true,
+
+    // 插件名称
+    label: "插件名称",
+
+    // 插件描述
+    description: "插件描述",
+
+    // 作者
+    author: "作者",
+    version: "1.0.0",
+    updateTime: "2024-02-02",
+    logo: "",
+
+    // 忽略
+    ignore: {
+      // 忽略进度条的请求
+      NProgress: [
+        "/base/open/eps",
+        "/base/comm/person",
+        "/base/comm/permmenu",
+        "/base/comm/upload",
+        "/base/comm/uploadMode",
+      ],
+
+      // 忽略 token 的路由
+      token: ["/login", "/401", "/403", "/404", "/500", "/502"],
+    },
+
+    // 排序
+    order: 0,
+
+    // 配置参数
+    options: {
+      name: "神仙",
+    },
+
+    // 示例页面
+    demo: [
+      {
+        name: "基础用法",
+        component: () => import("..."),
+      },
+    ],
+
+    // 注册全局组件
+    components: [],
+
+    // 视图路由
+    views: [],
+
+    // 页面路由
+    pages: [],
+
+    // 顶部工具栏
+    toolbar: {
+      order: 1,
+      pc: true, // 是否在 pc 端显示
+      h5: true, // 是否在 h5 端显示
+      component: import("./components/index.vue"),
+    },
+
+    // 注入全局组件
+    index: {
+      component: import("./components/index.vue"),
+    },
+
+    // 安装时触发
+    install(app: Vue) {},
+
+    // 加载时触发
+    onLoad(events) {},
+  };
+};
+```
+
+- order 模块加载顺序，值越大越先
+
+- options 提供给外部使用的参数配置：
+
+```ts
+import { ModuleConfig } from "/@/cool";
+
+export default (): ModuleConfig => {
+  return {
+    options: {
+      // 尺寸
+      size: 120,
+      // 显示文案
+      text: "选择文件",
+      // 限制
+      limit: {
+        // 上传最大数量
+        upload: 9,
+        // 文件空间选择数
+        select: 9,
+        // 上传大小限制
+        size: 100,
+      },
+    },
+  };
+};
+```
+
+获取方式：
+
+```ts
+import { module } from "/@/cool";
+
+const config = module.config("模块名");
+```
+
+- components 提供全局的组件：
+
+```ts
+import type { ModuleConfig } from "/@/cool";
+
+export default (): ModuleConfig => {
+  return {
+    components: [import("./components/test.vue")],
+  };
+};
+```
+
+批量导入可以使用 [import.meta.glob](mdc:https:/vitejs.dev/guide/features.html#glob-import) 方法：
+
+```ts
+import { ModuleConfig } from "/@/cool";
+
+export default (): ModuleConfig => {
+  return {
+    components: Object.values(import.meta.glob("./components/**/*")),
+  };
+};
+```
+
+- views 全局注册的视图路由，存放在 `/` 中的子路由 `children`：
+
+```ts
+import { ModuleConfig } from "/@/cool";
+
+export default (): ModuleConfig => {
+  return {
+    views: [
+      {
+        path: "/test",
+        meta: {
+          label: "测试中心",
+        },
+        component: () => import("./views/test.vue"),
+      },
+    ],
+  };
+};
+```
+
+- pages 全局注册的页面路由：
+
+```ts
+import { ModuleConfig } from "/@/cool";
+
+export default (): ModuleConfig => {
+  return {
+    pages: [
+      {
+        path: "/test",
+        meta: {
+          label: "测试中心",
+        },
+        component: () => import("./views/test.vue"),
+      },
+    ],
+  };
+};
+```
+
+- install 模块安装时触发。用于预先处理：
+
+```ts
+import { ModuleConfig } from "/@/cool";
+import { Vue } from "vue";
+
+export default (): ModuleConfig => {
+  return {
+    install(app: Vue) {
+      // 注册组件
+      app.component("test", Test);
+
+      // 注册指令
+      app.directive("focus", {
+        created(el, bind) {},
+      });
+    },
+  };
+};
+```
+
+- onLoad 模块安装时触发，预先加载数据，如菜单配置、用户信息：
+
+  1.  使用 `await` 等待加载完成后往下执行
+
+  2.  可往下模块导出某个方法和变量，如 `hasToken` 验证是否有登陆
+
+```ts
+import { ModuleConfig } from "/@/cool";
+import { Vue } from "vue";
+
+export default (): ModuleConfig => {
+  return {
+    async onLoad() {
+      const { user, menu } = useStore();
+
+      if (user.token) {
+        // 获取用户信息
+        user.get();
+        // 获取菜单权限
+        await menu.get();
+      }
+
+      return {
+        async hasToken(cb: () => Promise<any> | void) {
+          if (user.token) {
+            if (cb) await cb();
+          }
+        },
+      };
+    },
+  };
+};
+```
+
+其他模块中接收 `hasToken` 方法：
+
+```ts
+import { ModuleConfig } from "/@/cool";
+import { useDict } from "./index";
+
+export default (): ModuleConfig => {
+  return {
+    onLoad({ hasToken }) {
+      const { dict } = useDict();
+
+      hasToken(() => {
+        dict.refresh();
+      });
+    },
+  };
+};
+```
+
+## index.ts
+
+该模块需要对外开放的变量及方法，方便于别人直接使用：
+
+```ts
+// modules/test/index.ts
+import { useStore } from "./store";
+
+export function useTest() {
+  return {
+    // 导出 pinia
+    ...useStore(),
+
+    // 自定义方法
+    test() {},
+
+    // 自定义变量
+    data: {
+      description: "数据描述",
+    },
+  };
+}
+```
+
+导出命名规则 `useBase` `useDemo` `useDict` use + 模块名
+
+使用：
+
+```ts
+import { useTest } from "/$/test";
+
+const { data, test } = useTest();
+```

.cursor/rules/search.mdc

@@ -0,0 +1,743 @@
+---
+description: cl-search 组件示例
+globs: *.tsx, *.ts, *.vue
+---
+## 起步 示例
+
+```vue
+<template>
+	<div class="scope">
+		<div class="h">
+			<el-tag size="small" effect="dark" disable-transitions>base</el-tag>
+			<span>起步</span>
+		</div>
+
+		<div class="c">
+			<el-button @click="open">预览</el-button>
+			<demo-code :files="['search/base.vue']" />
+
+			<!-- 自定义表格组件 -->
+			<cl-dialog v-model="visible" title="起步" width="80%">
+				<cl-crud ref="Crud">
+					<cl-row>
+						<!--【很重要】搜索组件 -->
+						<cl-search ref="Search" />
+					</cl-row>
+
+					<cl-row>
+						<cl-table ref="Table" />
+					</cl-row>
+
+					<cl-row>
+						<cl-flex1 />
+						<cl-pagination />
+					</cl-row>
+				</cl-crud>
+			</cl-dialog>
+		</div>
+
+		<div class="f">
+			<span class="date">2024-01-01</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useCrud, useSearch, useTable } from '@cool-vue/crud';
+import { ref } from 'vue';
+import { useDict } from '/$/dict';
+
+const { dict } = useDict();
+
+// cl-crud 配置
+const Crud = useCrud(
+	{
+		service: 'test'
+	},
+	app => {
+		app.refresh();
+	}
+);
+
+// cl-table 配置
+const Table = useTable({
+	autoHeight: false,
+	contextMenu: ['refresh'],
+
+	columns: [
+		{
+			label: '姓名',
+			prop: 'name',
+			minWidth: 140
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			minWidth: 140
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			dict: dict.get('occupation'),
+			minWidth: 140
+		},
+		{
+			label: '创建时间',
+			prop: 'createTime',
+			minWidth: 170,
+			sortable: 'desc'
+		}
+	]
+});
+
+// cl-search 配置
+//【很重要】该组件基于 cl-form 故很多示例都可复用
+const Search = useSearch({
+	// 配置如 cl-form 一样
+	items: [
+		{
+			label: '姓名',
+			prop: 'name',
+			component: {
+				name: 'el-input',
+				props: {
+					clearable: true,
+
+					// 值改变的时候刷新列表
+					onChange(val: string) {
+						refresh({
+							name: val,
+							page: 1
+						});
+					}
+				}
+			}
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			component: {
+				name: 'el-input',
+				props: {
+					clearable: true
+				}
+			}
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			component: {
+				name: 'cl-select',
+				props: {
+					tree: true,
+					checkStrictly: true,
+					options: dict.get('occupation')
+				}
+			}
+		}
+	],
+
+	onChange(data, prop) {
+		console.log(data, prop);
+	}
+});
+
+function refresh(params?: any) {
+	Crud.value?.refresh(params);
+}
+
+const visible = ref(false);
+
+function open() {
+	visible.value = true;
+}
+</script>
+
+```
+
+## 折叠 示例
+
+```vue
+<template>
+	<div class="scope">
+		<div class="h">
+			<el-tag size="small" effect="dark" disable-transitions>collapse</el-tag>
+			<span>折叠</span>
+		</div>
+
+		<div class="c">
+			<el-button @click="open">预览</el-button>
+			<demo-code :files="['search/collapse.vue']" />
+
+			<!-- 折叠表格组件 -->
+			<cl-dialog v-model="visible" title="折叠" width="80%">
+				<cl-crud ref="Crud">
+					<!--【collapse】折叠参数，【inline】是否行内 -->
+					<cl-search ref="Search" reset-btn collapse :inline="false" />
+
+					<cl-row>
+						<cl-table ref="Table" />
+					</cl-row>
+
+					<cl-row>
+						<cl-flex1 />
+						<cl-pagination />
+					</cl-row>
+				</cl-crud>
+			</cl-dialog>
+		</div>
+
+		<div class="f">
+			<span class="date">2024-12-26</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useCrud, useSearch, useTable } from '@cool-vue/crud';
+import { ref } from 'vue';
+import { useDict } from '/$/dict';
+import { range } from 'lodash-es';
+
+const { dict } = useDict();
+
+// cl-crud 配置
+const Crud = useCrud(
+	{
+		service: 'test'
+	},
+	app => {
+		app.refresh();
+	}
+);
+
+// cl-table 配置
+const Table = useTable({
+	autoHeight: false,
+	contextMenu: ['refresh'],
+
+	columns: [
+		{
+			label: '姓名',
+			prop: 'name',
+			minWidth: 140
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			minWidth: 140
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			dict: dict.get('occupation'),
+			minWidth: 140
+		},
+		{
+			label: '创建时间',
+			prop: 'createTime',
+			minWidth: 170,
+			sortable: 'desc'
+		}
+	]
+});
+
+// cl-search 配置
+const Search = useSearch({
+	items: [
+		...range(20).map(i => {
+			return {
+				label: '输入框',
+				prop: `T${i + 1}`,
+				component: {
+					name: 'el-input'
+				}
+			};
+		})
+	]
+});
+
+function refresh(params?: any) {
+	Crud.value?.refresh(params);
+}
+
+const visible = ref(false);
+
+function open() {
+	visible.value = true;
+}
+</script>
+x
+
+```
+
+## 自定义 示例
+
+```vue
+<template>
+	<div class="scope">
+		<div class="h">
+			<el-tag size="small" effect="dark" disable-transitions>custom</el-tag>
+			<span>自定义</span>
+		</div>
+
+		<div class="c">
+			<el-button @click="open">预览</el-button>
+			<demo-code :files="['search/custom.vue']" />
+
+			<!-- 自定义表格组件 -->
+			<cl-dialog v-model="visible" title="自定义" width="80%">
+				<cl-crud ref="Crud">
+					<cl-row>
+						<!--【很重要】搜索组件 -->
+						<cl-search
+							ref="Search"
+							:reset-btn="true"
+							:on-load="onLoad"
+							:on-search="onSearch"
+						>
+							<!-- 自定义按钮 -->
+							<template #buttons="scope">
+								<el-button @click="toSearch(scope)">自定义按钮</el-button>
+							</template>
+						</cl-search>
+					</cl-row>
+
+					<cl-row>
+						<cl-table ref="Table" />
+					</cl-row>
+
+					<cl-row>
+						<cl-flex1 />
+						<cl-pagination />
+					</cl-row>
+				</cl-crud>
+			</cl-dialog>
+		</div>
+
+		<div class="f">
+			<span class="date">2024-01-01</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useCrud, useSearch, useTable } from '@cool-vue/crud';
+import { ref } from 'vue';
+import { useDict } from '/$/dict';
+import { ElMessage } from 'element-plus';
+
+const { dict } = useDict();
+
+// cl-crud 配置
+const Crud = useCrud(
+	{
+		service: 'test'
+	},
+	app => {
+		app.refresh();
+	}
+);
+
+// cl-table 配置
+const Table = useTable({
+	autoHeight: false,
+	contextMenu: ['refresh'],
+
+	columns: [
+		{
+			label: '姓名',
+			prop: 'name',
+			minWidth: 140
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			minWidth: 140
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			dict: dict.get('occupation'),
+			minWidth: 140
+		},
+		{
+			label: '创建时间',
+			prop: 'createTime',
+			minWidth: 170,
+			sortable: 'desc'
+		}
+	]
+});
+
+// cl-search 配置
+//【很重要】该组件基于 cl-form 故很多示例都可复用
+const Search = useSearch({
+	// 配置如 cl-form 一样
+	items: [
+		{
+			label: '姓名',
+			prop: 'name',
+			component: {
+				name: 'el-input',
+				props: {
+					clearable: true,
+
+					// 值改变的时候刷新列表
+					onChange(val: string) {
+						refresh({
+							name: val,
+							page: 1
+						});
+					}
+				}
+			}
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			component: {
+				name: 'el-input',
+				props: {
+					clearable: true
+				}
+			}
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			component: {
+				name: 'cl-select',
+				props: {
+					tree: true,
+					checkStrictly: true,
+					options: dict.get('occupation')
+				}
+			}
+		}
+	]
+});
+
+function refresh(params?: any) {
+	Crud.value?.refresh(params);
+}
+
+// cl-search 初始化
+function onLoad(data: any) {
+	data.name = '白小纯';
+}
+
+// cl-search 配置 onSearch 后，必须使用 next 方法继续请求
+function onSearch(data: any, { next }: { next: (data: any) => void }) {
+	ElMessage.info('开始搜索');
+	// 这边可以处理其他事务
+	next(data);
+}
+
+// 自定义搜索，data 为表单数据
+function toSearch(data: any) {
+	ElMessage.info('自定义搜索');
+
+	refresh({
+		page: 1,
+		...data
+	});
+}
+
+const visible = ref(false);
+
+function open() {
+	visible.value = true;
+}
+</script>
+
+```
+
+## 布局 示例
+
+```vue
+<template>
+	<div class="scope">
+		<div class="h">
+			<el-tag size="small" effect="dark" disable-transitions>layout</el-tag>
+			<span>布局</span>
+		</div>
+
+		<div class="c">
+			<el-button @click="open">预览</el-button>
+			<demo-code :files="['search/layout.vue']" />
+
+			<!-- 自定义表格组件 -->
+			<cl-dialog v-model="visible" title="布局" width="80%">
+				<cl-crud ref="Crud">
+					<!--【很重要】搜索组件 -->
+					<cl-search ref="Search" :reset-btn="true" />
+
+					<cl-row>
+						<cl-table ref="Table" />
+					</cl-row>
+
+					<cl-row>
+						<cl-flex1 />
+						<cl-pagination />
+					</cl-row>
+				</cl-crud>
+			</cl-dialog>
+		</div>
+
+		<div class="f">
+			<span class="date">2024-01-01</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useCrud, useSearch, useTable } from '@cool-vue/crud';
+import { ref } from 'vue';
+import { useDict } from '/$/dict';
+
+const { dict } = useDict();
+
+// cl-crud 配置
+const Crud = useCrud(
+	{
+		service: 'test'
+	},
+	app => {
+		app.refresh();
+	}
+);
+
+// cl-table 配置
+const Table = useTable({
+	autoHeight: false,
+	contextMenu: ['refresh'],
+
+	columns: [
+		{
+			label: '姓名',
+			prop: 'name',
+			minWidth: 140
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			minWidth: 140
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			dict: dict.get('occupation'),
+			minWidth: 140
+		},
+		{
+			label: '创建时间',
+			prop: 'createTime',
+			minWidth: 170,
+			sortable: 'desc'
+		}
+	]
+});
+
+// cl-search 配置
+//【很重要】该组件基于 cl-form 故很多示例都可复用
+const Search = useSearch({
+	// 取消行内表单模式
+	inline: false,
+
+	// 表单参数
+	props: {
+		labelPosition: 'top'
+	},
+
+	// 配置如 cl-form 一样
+	items: [
+		{
+			label: '姓名',
+			prop: 'name',
+			component: {
+				name: 'el-input',
+				props: {
+					clearable: true,
+
+					// 值改变的时候刷新列表
+					onChange(val: string) {
+						refresh({
+							name: val,
+							page: 1
+						});
+					}
+				}
+			}
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			component: {
+				name: 'el-input',
+				props: {
+					clearable: true
+				}
+			}
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			component: {
+				name: 'cl-select',
+				props: {
+					tree: true,
+					checkStrictly: true,
+					options: dict.get('occupation')
+				}
+			}
+		}
+	]
+});
+
+function refresh(params?: any) {
+	Crud.value?.refresh(params);
+}
+
+const visible = ref(false);
+
+function open() {
+	visible.value = true;
+}
+</script>
+
+```
+
+## 使用插件 示例
+
+```vue
+<template>
+	<div class="scope">
+		<div class="h">
+			<el-tag size="small" effect="dark" disable-transitions>plugin</el-tag>
+			<span>使用插件</span>
+		</div>
+
+		<div class="c">
+			<el-button @click="open">预览</el-button>
+			<demo-code :files="['search/layout.vue']" />
+
+			<!-- 自定义表格组件 -->
+			<cl-dialog v-model="visible" title="使用插件" width="80%">
+				<cl-crud ref="Crud">
+					<cl-row>
+						<cl-flex1 />
+						<!--【很重要】搜索组件 -->
+						<cl-search ref="Search" />
+					</cl-row>
+
+					<cl-row>
+						<cl-table ref="Table" />
+					</cl-row>
+
+					<cl-row>
+						<cl-flex1 />
+						<cl-pagination />
+					</cl-row>
+				</cl-crud>
+			</cl-dialog>
+		</div>
+
+		<div class="f">
+			<span class="date">2024-01-01</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useCrud, useSearch, useTable } from '@cool-vue/crud';
+import { ref } from 'vue';
+import { useDict } from '/$/dict';
+import { Plugins } from '/#/crud';
+
+const { dict } = useDict();
+
+// cl-crud 配置
+const Crud = useCrud(
+	{
+		service: 'test'
+	},
+	app => {
+		app.refresh();
+	}
+);
+
+// cl-table 配置
+const Table = useTable({
+	autoHeight: false,
+	contextMenu: ['refresh'],
+
+	columns: [
+		{
+			label: '姓名',
+			prop: 'name',
+			minWidth: 140
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			minWidth: 140
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			dict: dict.get('occupation'),
+			minWidth: 140
+		},
+		{
+			label: '创建时间',
+			prop: 'createTime',
+			minWidth: 170,
+			sortable: 'desc'
+		}
+	]
+});
+
+// cl-search 配置
+const Search = useSearch({
+	// 【很重要】自动读取 service 下的 search 数据
+	plugins: [
+		Plugins.Search.setAuto({
+			customComponent(field) {
+				if (field.propertyName == 'name') {
+					return {
+						name: 'cl-select',
+						props: {
+							options: [
+								{
+									label: '张三',
+									value: '1'
+								},
+								{
+									label: '李四',
+									value: '2'
+								}
+							]
+						}
+					};
+				}
+
+				// null 则不操作，按系统默认操作
+				return null;
+			}
+		})
+	]
+});
+
+function refresh(params?: any) {
+	Crud.value?.refresh(params);
+}
+
+const visible = ref(false);
+
+function open() {
+	visible.value = true;
+}
+</script>
+
+```

.cursor/rules/upsert.mdc

@@ -0,0 +1,716 @@
+---
+description: cl-upsert 组件示例
+globs: *.tsx, *.ts, *.vue
+---
+## 起步 示例
+
+```vue
+<template>
+	<div class="scope">
+		<div class="h">
+			<el-tag size="small" effect="dark" disable-transitions>base</el-tag>
+			<span>起步</span>
+		</div>
+
+		<div class="c">
+			<el-button @click="open">预览</el-button>
+			<demo-code :files="['upsert/base.vue']" />
+
+			<!-- 自定义表格组件 -->
+			<cl-dialog v-model="visible" title="起步" width="80%">
+				<cl-crud ref="Crud">
+					<cl-row>
+						<!-- 打开新增表单的按钮 -->
+						<cl-add-btn />
+					</cl-row>
+
+					<cl-row>
+						<cl-table ref="Table" />
+					</cl-row>
+
+					<cl-row>
+						<cl-flex1 />
+						<cl-pagination />
+					</cl-row>
+
+					<!--【很重要】新增、编辑的表单组件 -->
+					<cl-upsert ref="Upsert" />
+				</cl-crud>
+			</cl-dialog>
+		</div>
+
+		<div class="f">
+			<span class="date">2024-01-01</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
+import { ref } from 'vue';
+import { useDict } from '/$/dict';
+
+const { dict } = useDict();
+
+// cl-crud 配置
+const Crud = useCrud(
+	{
+		service: 'test'
+	},
+	app => {
+		app.refresh();
+	}
+);
+
+// cl-table 配置
+const Table = useTable({
+	autoHeight: false,
+	contextMenu: ['refresh'],
+
+	columns: [
+		{
+			label: '姓名',
+			prop: 'name',
+			minWidth: 140
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			minWidth: 140
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			dict: dict.get('occupation'),
+			minWidth: 140
+		},
+		{
+			label: '创建时间',
+			prop: 'createTime',
+			minWidth: 170,
+			sortable: 'desc'
+		},
+		{
+			type: 'op',
+			// edit 打开编辑表单
+			buttons: ['edit', 'delete']
+		}
+	]
+});
+
+// cl-upsert 配置
+//【很重要】该组件基于 cl-form 故很多示例都可复用
+const Upsert = useUpsert({
+	// 配置如 cl-form 一样
+	items: [
+		{
+			label: '姓名',
+			prop: 'name',
+			component: {
+				name: 'el-input'
+			}
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			component: {
+				name: 'el-input'
+			}
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			component: {
+				name: 'cl-select',
+				props: {
+					tree: true,
+					checkStrictly: true,
+					options: dict.get('occupation')
+				}
+			}
+		}
+	]
+});
+
+const visible = ref(false);
+
+function open() {
+	visible.value = true;
+}
+</script>
+
+```
+
+## 打开、关闭、提交等事件 示例
+
+```vue
+<template>
+	<div class="scope">
+		<div class="h">
+			<el-tag size="small" effect="dark" disable-transitions>event</el-tag>
+			<span>打开、关闭、提交等事件</span>
+		</div>
+
+		<div class="c">
+			<el-button @click="open">预览</el-button>
+			<demo-code :files="['upsert/event.vue']" />
+
+			<!-- 自定义表格组件 -->
+			<cl-dialog v-model="visible" title="事件" width="80%">
+				<cl-crud ref="Crud">
+					<cl-row>
+						<!-- 打开新增表单的按钮 -->
+						<cl-add-btn />
+					</cl-row>
+
+					<cl-row>
+						<cl-table ref="Table" />
+					</cl-row>
+
+					<cl-row>
+						<cl-flex1 />
+						<cl-pagination />
+					</cl-row>
+
+					<!--【很重要】新增、编辑的表单组件 -->
+					<cl-upsert ref="Upsert" />
+				</cl-crud>
+			</cl-dialog>
+		</div>
+
+		<div class="f">
+			<span class="date">2024-01-01</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
+import { ref } from 'vue';
+import { useDict } from '/$/dict';
+import { useCool } from '/@/cool';
+
+const { service } = useCool();
+const { dict } = useDict();
+
+// cl-crud 配置
+const Crud = useCrud(
+	{
+		service: 'test'
+	},
+	app => {
+		app.refresh();
+	}
+);
+
+// cl-table 配置
+const Table = useTable({
+	autoHeight: false,
+	contextMenu: ['refresh'],
+
+	columns: [
+		{
+			label: '姓名',
+			prop: 'name',
+			minWidth: 140
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			minWidth: 140
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			dict: dict.get('occupation'),
+			minWidth: 140
+		},
+		{
+			label: '创建时间',
+			prop: 'createTime',
+			minWidth: 170,
+			sortable: 'desc'
+		},
+		{
+			type: 'op',
+			// edit 打开编辑表单
+			buttons: ['edit', 'delete']
+		}
+	]
+});
+
+// cl-upsert 配置
+const Upsert = useUpsert({
+	items: [
+		{
+			label: '姓名',
+			prop: 'name',
+			component: {
+				name: 'el-input'
+			}
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			component: {
+				name: 'el-input'
+			}
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			component: {
+				name: 'cl-select',
+				props: {
+					tree: true,
+					checkStrictly: true,
+					options: dict.get('occupation')
+				}
+			}
+		}
+	],
+
+	// 以下事件按顺序触发
+
+	// 弹窗打开的事件，这个时候还未有表单数据
+	onOpen() {
+		console.log('onOpen');
+	},
+
+	// 获取详情，编辑的时候会触发
+	async onInfo(data, { next, done }) {
+		// 不配置 onInfo 的时候默认执行 next(data)，调用 service 的 info 接口获取详情
+		// next(data);
+
+		// 自定义，需要对请求数据进行处理或者返回处理后的数据
+		const res = await next({
+			id: data.id
+		});
+
+		done({
+			...res,
+			name: `[${res.name}]`
+		});
+	},
+
+	// 弹窗打开后，已经得到了表单数据
+	onOpened(data) {
+		// 判定是否编辑模式
+		if (Upsert.value?.mode == 'update') {
+			// 对数据处理
+			data.phone += '000';
+		}
+	},
+
+	// 提交事件的钩子
+	// data 表单提交数据
+	// next 继续往下执行
+	// done 关闭加载
+	// close 关闭弹窗
+	async onSubmit(data, { next, done, close }) {
+		// 不配置 onSubmit 的时候默认执行 next(data)，提交后会去请求 service 的 update/add 接口
+		// next(data);
+
+		// 自定义如下
+		// 场景1：提交时对参数额外的处理
+		// next({
+		// 	...data,
+		// 	status: 1,
+		// 	createTime: dayjs().format("YYYY-MM-DD")
+		// });
+
+		// 场景2：提交前、后的操作
+		// 之前，模拟获取 userId
+		const userId = await service.base.sys.user.info({ id: 1 });
+
+		// 返回值
+		const res = await next({
+			userId,
+			data
+		});
+
+		// 之后
+		// console.log(res);
+	},
+
+	// 关闭时触发
+	onClose(action, done) {
+		// action 关闭的类型
+		console.log('action，', action);
+
+		// 使用 done 关闭窗口
+		done();
+	},
+
+	// 关闭后触发
+	onClosed() {
+		console.log('onClosed');
+	}
+});
+
+const visible = ref(false);
+
+function open() {
+	visible.value = true;
+}
+</script>
+
+```
+
+## Hook的使用 示例
+
+```vue
+<template>
+	<div class="scope">
+		<div class="h">
+			<el-tag size="small" effect="dark" disable-transitions>hook</el-tag>
+			<span>Hook的使用</span>
+		</div>
+
+		<div class="c">
+			<el-button @click="open">预览</el-button>
+			<demo-code :files="['upsert/hook/index.vue', 'upsert/hook/reg-pca2.ts']" />
+
+			<!-- 自定义表格组件 -->
+			<cl-dialog v-model="visible" title="Hook的使用" width="80%">
+				<cl-crud ref="Crud">
+					<cl-row>
+						<!-- 打开新增表单的按钮 -->
+						<cl-add-btn />
+					</cl-row>
+
+					<cl-row>
+						<cl-table ref="Table" />
+					</cl-row>
+
+					<cl-row>
+						<cl-flex1 />
+						<cl-pagination />
+					</cl-row>
+
+					<!--【很重要】新增、编辑的表单组件 -->
+					<cl-upsert ref="Upsert" />
+				</cl-crud>
+			</cl-dialog>
+		</div>
+
+		<div class="f">
+			<span class="date">2024-01-01</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
+import { ref } from 'vue';
+import { useDict } from '/$/dict';
+
+const { dict } = useDict();
+
+// cl-crud 配置
+const Crud = useCrud(
+	{
+		service: 'test'
+	},
+	app => {
+		app.refresh();
+	}
+);
+
+// cl-table 配置
+const Table = useTable({
+	autoHeight: false,
+	contextMenu: ['refresh'],
+
+	columns: [
+		{
+			label: '姓名',
+			prop: 'name',
+			minWidth: 140
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			minWidth: 140
+		},
+		{
+			label: '省市区',
+			prop: 'pca',
+			formatter(row) {
+				return row.province ? row.province + '-' + row.city + '-' + row.district : '-';
+			},
+			minWidth: 140
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			dict: dict.get('occupation'),
+			minWidth: 140
+		},
+		{
+			label: '创建时间',
+			prop: 'createTime',
+			minWidth: 170,
+			sortable: 'desc'
+		},
+		{
+			type: 'op',
+			buttons: ['edit', 'delete']
+		}
+	]
+});
+
+// cl-upsert 配置
+const Upsert = useUpsert({
+	items: [
+		{
+			label: '姓名',
+			prop: 'name',
+			component: {
+				name: 'el-input'
+			}
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			component: {
+				name: 'el-input'
+			}
+		},
+		{
+			label: '省市区',
+			prop: 'pca2',
+
+			//【很重要】hook 参数配置
+			hook: {
+				bind(value, { form }) {
+					// 将3个参数合并成一个数组，带入级联选择器
+					return [form.province, form.city, form.district];
+				},
+				submit(value, { form, prop }) {
+					// 提交的时候将数组拆分成3个字段提交
+					const [province, city, district] = value || [];
+					form.province = province;
+					form.city = city;
+					form.district = district;
+
+					// 删除 prop 绑定值
+					form[prop] = undefined;
+				}
+			},
+			// 注册到全局后可直接使用，注册代码看 ./reg-pca2.ts
+			// hook: "pca2",
+
+			component: {
+				name: 'cl-distpicker'
+			}
+		},
+		{
+			label: '标签',
+			prop: 'labels',
+			//【很重要】使用内置方法，避免一些辣鸡后端要你这么传给他
+			hook: {
+				// labels 的数据为 1,2,3
+
+				// 绑定的时候将 labels 按 , 分割成数组
+				bind: ['split', 'number'],
+
+				// 提交的时候将 labels 拼接成字符串
+				submit: ['join']
+			},
+			component: {
+				name: 'el-select',
+				props: {
+					multiple: true
+				},
+				options: [
+					{
+						label: '帅气',
+						value: 1
+					},
+					{
+						label: '多金',
+						value: 2
+					},
+					{
+						label: '有才华',
+						value: 3
+					}
+				]
+			}
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			component: {
+				name: 'cl-select',
+				props: {
+					tree: true,
+					checkStrictly: true,
+					options: dict.get('occupation')
+				}
+			}
+		}
+	]
+});
+
+const visible = ref(false);
+
+function open() {
+	visible.value = true;
+}
+</script>
+
+```
+
+## 新增、编辑、详情模式 示例
+
+```vue
+<template>
+	<div class="scope">
+		<div class="h">
+			<el-tag size="small" effect="dark" disable-transitions>mode</el-tag>
+			<span>新增、编辑、详情模式</span>
+		</div>
+
+		<div class="c">
+			<el-button @click="open">预览</el-button>
+			<demo-code :files="['upsert/mode.vue']" />
+
+			<!-- 自定义表格组件 -->
+			<cl-dialog v-model="visible" title="不同模式" width="80%">
+				<cl-crud ref="Crud">
+					<cl-row>
+						<!-- 打开新增表单的按钮 -->
+						<cl-add-btn />
+					</cl-row>
+
+					<cl-row>
+						<cl-table ref="Table" />
+					</cl-row>
+
+					<cl-row>
+						<cl-flex1 />
+						<cl-pagination />
+					</cl-row>
+
+					<!--【很重要】新增、编辑的表单组件 -->
+					<cl-upsert ref="Upsert" />
+				</cl-crud>
+			</cl-dialog>
+		</div>
+
+		<div class="f">
+			<span class="date">2024-01-01</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
+import { ref } from 'vue';
+import { useDict } from '/$/dict';
+import { ElMessage } from 'element-plus';
+
+const { dict } = useDict();
+
+// cl-crud 配置
+const Crud = useCrud(
+	{
+		service: 'test'
+	},
+	app => {
+		app.refresh();
+	}
+);
+
+// cl-table 配置
+const Table = useTable({
+	autoHeight: false,
+	contextMenu: ['refresh'],
+
+	columns: [
+		{
+			label: '姓名',
+			prop: 'name',
+			minWidth: 140
+		},
+		{
+			label: '手机号',
+			prop: 'phone',
+			minWidth: 140
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			dict: dict.get('occupation'),
+			minWidth: 140
+		},
+		{
+			label: '创建时间',
+			prop: 'createTime',
+			minWidth: 170,
+			sortable: 'desc'
+		},
+		{
+			type: 'op',
+			width: 240,
+			buttons: ['info', 'edit', 'delete']
+		}
+	]
+});
+
+// cl-upsert 配置
+const Upsert = useUpsert({
+	items: [
+		{
+			label: '姓名',
+			prop: 'name',
+			component: {
+				name: 'el-input'
+			}
+		},
+		//【很重要】只有返回方法的时候才能使用 Upsert
+		() => {
+			return {
+				label: '手机号',
+				prop: 'phone',
+
+				// 新增的时候隐藏
+				// hidden: Upsert.value?.mode == "add",
+
+				component: {
+					name: 'el-input',
+					props: {
+						// 编辑的时候禁用
+						disabled: Upsert.value?.mode == 'update'
+					}
+				}
+			};
+		},
+		{
+			label: '工作',
+			prop: 'occupation',
+			component: {
+				name: 'cl-select',
+				props: {
+					tree: true,
+					checkStrictly: true,
+					options: dict.get('occupation')
+				}
+			}
+		}
+	],
+	onOpen() {
+		ElMessage.info(`当前模式：` + Upsert.value?.mode);
+	}
+});
+
+const visible = ref(false);
+
+function open() {
+	visible.value = true;
+}
+</script>
+
+```

.cursorrules

@@ -0,0 +1,74 @@
+# 项目背景
+
+- 库：typescript、javaScript、scss、vue、tailwind
+- 框架：cool-admin-vue
+- 项目版本：8.x
+
+# 项目目录
+
+├── .vscode(代码片段，根据关键字可以快速地生成代码)
+├── public(静态资源文件)
+├── packages(源码包：@cool-vue/crud、@cool-vue/vite-plugin)
+├── build
+│ └── cool()
+│ │ └── eps.json(Eps 配置文件)
+│ │ └── eps.d.ts(Eps 描述文件)
+├── src
+│ └── cool(核心文件)
+│ └── modules(项目模块)
+│ │ └── base(基础模块)
+│ │ └── demo(示例模块)
+│ │ └── dict(字典模块)
+│ │ └── helper(辅助模块)
+│ │ └── recycle(回收站模块)
+│ │ └── space(cl-upload-space 文件空间模块)
+│ │ └── task(任务模块)
+│ │ └── user(用户模块)
+│ └── plugins(项目插件)
+│ │ └── crud(cl-crud、@cool-vue/crud)
+│ │ └── distpicker(cl-distpicker、省市区选择器)
+│ │ └── echarts(图标)
+│ │ └── editor-preview(编辑器预览组件)
+│ │ └── editor-wange(wang富文本编辑器)
+│ │ └── element-ui(element-plus 组件)
+│ │ └── excel(excel导入、导出组件)
+│ │ └── i18n(多语言)
+│ │ └── iconfont(iconfont 图标)
+│ │ └── theme(cl-theme 主题组件)
+│ │ └── upload(cl-upload 文件上传组件)
+│ │ └── view(cl-view-group、cl-view-head 视图组件)
+│ └── config
+│ │ └── index.ts(默认配置)
+│ │ └── dev.ts(开发环境)
+│ │ └── prod.ts(生产环境)
+│ │ └── proxy.ts(代理配置)
+│ └── App.vue(入口文件)
+│ └── main.ts(入口文件)
+├── package.json(依赖管理，项目信息)
+└── ...
+
+模块、插件目录
+├── modules/plugins
+│ └── base(模块名)
+│ │ └── components(全局组件)
+│ │ └── directives(全局指令)
+│ │ └── locales(国际化)
+│ │ └── router(路由)
+│ │ └── store(状态管理)
+│ │ └── utils(工具函数)
+│ │ └── views(视图)
+│ │ └── config.ts(必须，模块的配置)
+│ │ └── index.ts(模块导出)
+
+# 其它
+
+- 文件、组件命名用 - 连接，如：student-info.vue
+- service 的描述类型，查看 build/cool/eps.d.ts 描述文件
+- 创建模块、插件代码需要读取.cursor/rules的module.mdc，其它的rules根据需要进行参考
+
+# import 引用别名
+
+- "/@" 对应 "./src"
+- "/$" 对应 "./src/modules"
+- "/#" 对应 "./src/plugins"
+- "/~" 对应 "./packages"

.gitignore

@@ -17,3 +17,5 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+vite.config.ts.timestamp*

.vscode/config.code-snippets

@@ -3,7 +3,7 @@
 		"prefix": "module-config",
 		"scope": "typescript",
 		"body": [
-			"import type { ModuleConfig } from \"/@/cool\";",
+			"import { type ModuleConfig } from \"/@/cool\";",
 			"",
 			"export default (): ModuleConfig => {",
 			"    return {};",

.vscode/crud.code-snippets

@@ -13,8 +13,8 @@
 			"            <!-- 删除按钮 -->",
 			"            <cl-multi-delete-btn />",
 			"            <cl-flex1 />",
-			"            <!-- 关键字搜索 -->",
+			"            <!-- 条件搜索 -->",
-			"            <cl-search-key />",
+			"            <cl-search ref=\"Search\" />",
 			"        </cl-row>",
 			"",
 			"        <cl-row>",
@@ -33,8 +33,12 @@
 			"    </cl-crud>",
 			"</template>",
 			"",
-			"<script lang=\"ts\" name=\"$1\" setup>",
+			"<script lang=\"ts\" setup>",
-			"import { useCrud, useTable, useUpsert } from \"@cool-vue/crud\";",
+			"defineOptions({",
+			"    name: \"$1\"",
+			"});",
+			"",
+			"import { useCrud, useTable, useUpsert, useSearch } from \"@cool-vue/crud\";",
 			"import { useCool } from \"/@/cool\";",
 			"",
 			"const { service } = useCool();",
@@ -49,6 +53,9 @@
 			"    columns: []",
 			"});",
 			"",
+			"// cl-search",
+			"const Search = useSearch();",
+			"",
 			"// cl-crud",
 			"const Crud = useCrud(",
 			"    {",
@@ -78,25 +85,16 @@
 		],
 		"description": "cl-filter snippets"
 	},
-	"item": {
+	"slot-item": {
-		"prefix": "item",
+		"prefix": "slot item",
-		"scope": "typescript",
+		"scope": "html",
-		"body": [
+		"body": ["<template #slot-$1=\"{ scope }\">", "</template>", ""],
-			"{",
+		"description": "slot snippets"
-			"    label: \"$1\",",
-			"    prop: \"\",",
-			"    component: {",
-			"        name: \"\"",
-			"    }",
-			"},",
-			""
-		],
-		"description": "item snippets"
 	},
-	"column": {
+	"slot-column": {
-		"prefix": "column",
+		"prefix": "slot column",
-		"scope": "typescript",
+		"scope": "html",
-		"body": ["{", "    label: \"$1\",", "    prop: \"\",", "},", ""],
+		"body": ["<template #column-$1=\"{ scope }\">", "    ", "</template>", ""],
-		"description": "column snippets"
+		"description": "column slot snippets"
 	}
 }

.vscode/extensions.json

@@ -1,8 +1,3 @@
 {
-  "recommendations": [
+	"recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
-    "Vue.volar",
-    "vitest.explorer",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
-  ]
 }

.vscode/settings.json

@@ -10,5 +10,8 @@
 		"source.fixAll": "explicit"
 	},
 	"editor.formatOnSave": true,
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"[scss]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	}
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 cool-team-official
+Copyright (c) [2025] [厦门闪酷科技开发有限公司]
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,3 +19,15 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+---
+
+MIT 许可证
+
+版权所有 (c) [2025] [厦门闪酷科技开发有限公司]
+
+特此免费授予获得本软件及相关文档文件（“软件”）副本的任何人无限制地处理本软件的权限，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件的副本，并允许软件提供给其的人员这样做，但须符合以下条件：
+
+上述版权声明和本许可声明应包含在软件的所有副本或主要部分中。
+
+本软件按“原样”提供，不提供任何明示或暗示的担保，包括但不限于对适销性、特定用途适用性和非侵权的担保。在任何情况下，作者或版权持有人均不对因软件或软件使用或其他交易而产生的任何索赔、损害或其他责任负责，无论是在合同诉讼、侵权诉讼或其他诉讼中。

index.html

@@ -16,6 +16,8 @@
 			body,
 			#app {
 				height: 100%;
+				font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
+					'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
 			}
 
 			* {
@@ -60,41 +62,49 @@
 				letter-spacing: 5px;
 				font-weight: bold;
 				margin-bottom: 30px;
+				min-height: 50px;
 			}
 
 			.preload__title {
 				color: #fff;
 				font-size: 14px;
 				margin: 30px 0 20px 0;
+				min-height: 20px;
 			}
 
 			.preload__sub-title {
 				color: #ababab;
 				font-size: 12px;
+				min-height: 20px;
 			}
 
-			.preload__footer {
+			.preload__name,
-				text-align: center;
+			.preload__title,
-				padding: 10px 0 20px 0;
+			.preload__sub-title {
+				animation: s 0.5s ease-in;
 			}
 
-			.preload__footer a {
+			@keyframes s {
-				font-size: 12px;
+				from {
-				color: #ababab;
+					opacity: 0;
-				text-decoration: none;
+				}
+				to {
+					opacity: 1;
+				}
 			}
 
 			.preload__loading {
-				height: 30px;
+				height: 44px;
-				width: 30px;
+				width: 44px;
 				border-radius: 30px;
 				border: 7px solid currentColor;
-				border-bottom-color: #2f3447 !important;
+				border-bottom-color: #2f3447;
 				position: relative;
 				animation:
 					r 1s infinite cubic-bezier(0.17, 0.67, 0.83, 0.67),
 					bc 2s infinite ease-in;
 				transform: rotate(0deg);
+				box-sizing: border-box;
 			}
 
 			@keyframes r {
@@ -154,14 +164,10 @@
 	<body>
 		<div class="preload__wrap" id="Loading">
 			<div class="preload__container">
-				<p class="preload__name">%VITE_NAME%</p>
+				<p class="preload__name"></p>
 				<div class="preload__loading"></div>
-				<p class="preload__title">正在加载资源...</p>
+				<p class="preload__title"></p>
-				<p class="preload__sub-title">初次加载资源可能需要较多时间 请耐心等待</p>
+				<p class="preload__sub-title"></p>
-			</div>
-
-			<div class="preload__footer">
-				<a href="https://cool-js.com" target="_blank"> https://cool-js.com </a>
 			</div>
 		</div>
 

package.json

@@ -1,71 +1,74 @@
 {
-	"name": "cool-admin",
+	"name": "cool-admin-vue",
-	"version": "7.3.0",
+	"version": "8.0.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite --host",
 		"build": "vite build",
+		"build-static": "vite build --mode static",
 		"preview": "vite preview",
 		"type-check": "vue-tsc --build --force",
 		"lint": "eslint . --fix",
 		"format": "prettier --write src/"
 	},
 	"dependencies": {
-		"@cool-vue/crud": "^7.2.10",
+		"@cool-vue/crud": "^8.0.0",
 		"@element-plus/icons-vue": "^2.3.1",
-		"@vueuse/core": "^12.3.0",
+		"@vueuse/core": "^12.5.0",
 		"@wangeditor/editor": "^5.1.23",
 		"@wangeditor/editor-for-vue": "^5.1.12",
-		"axios": "^1.7.7",
+		"axios": "^1.7.9",
 		"chardet": "^2.0.0",
-		"core-js": "^3.38.1",
+		"core-js": "^3.40.0",
 		"dayjs": "^1.11.13",
-		"echarts": "^5.5.1",
+		"echarts": "^5.6.0",
-		"element-plus": "^2.9.1",
+		"element-plus": "^2.9.3",
 		"file-saver": "^2.0.5",
 		"lodash-es": "^4.17.21",
 		"marked": "^14.1.3",
 		"mitt": "^3.0.1",
-		"mockjs": "^1.1.0",
-		"monaco-editor": "0.52.0",
 		"nprogress": "^0.2.0",
-		"pinia": "^2.3.0",
+		"pinia": "^2.3.1",
-		"socket.io-client": "^4.8.0",
 		"store": "^2.0.12",
 		"vue": "^3.5.13",
 		"vue-echarts": "^7.0.3",
-		"vue-router": "^4.4.5",
+		"vue-i18n": "^11.0.1",
+		"vue-router": "^4.5.0",
 		"vuedraggable": "^4.1.0",
 		"xlsx": "^0.18.5"
 	},
 	"devDependencies": {
-		"@cool-vue/vite-plugin": "^7.2.7",
+		"@cool-vue/vite-plugin": "^8.0.0",
-		"@rushstack/eslint-patch": "^1.10.4",
+		"@intlify/unplugin-vue-i18n": "^6.0.3",
+		"@rushstack/eslint-patch": "^1.10.5",
 		"@tsconfig/node20": "^20.1.4",
 		"@types/file-saver": "^2.0.7",
 		"@types/lodash-es": "^4.17.12",
 		"@types/mockjs": "^1.0.10",
-		"@types/node": "^20.16.11",
+		"@types/node": "^20.17.17",
 		"@types/nprogress": "^0.2.3",
 		"@types/store": "^2.0.5",
-		"@vitejs/plugin-vue": "^5.1.4",
+		"@vitejs/plugin-vue": "^5.2.1",
-		"@vitejs/plugin-vue-jsx": "^4.0.1",
+		"@vitejs/plugin-vue-jsx": "^4.1.1",
-		"@vue/compiler-sfc": "^3.5.12",
+		"@vue/compiler-sfc": "^3.5.13",
-		"@vue/eslint-config-prettier": "^10.0.0",
+		"@vue/eslint-config-prettier": "^10.2.0",
-		"@vue/eslint-config-typescript": "^14.0.1",
+		"@vue/eslint-config-typescript": "^14.3.0",
 		"@vue/test-utils": "^2.4.6",
 		"@vue/tsconfig": "^0.5.1",
-		"eslint": "^9.12.0",
+		"autoprefixer": "^10.4.20",
-		"eslint-plugin-prettier": "^5.2.1",
+		"eslint": "^9.19.0",
-		"eslint-plugin-vue": "^9.29.0",
+		"eslint-plugin-prettier": "^5.2.3",
-		"prettier": "^3.3.3",
+		"eslint-plugin-vue": "^9.32.0",
-		"rollup-plugin-visualizer": "^5.12.0",
+		"postcss": "^8.5.1",
+		"prettier": "^3.4.2",
+		"rollup-plugin-visualizer": "^5.14.0",
 		"sass": "1.81.0",
+		"tailwindcss": "^3.4.17",
 		"terser": "^5.36.0",
 		"typescript": "~5.5.4",
-		"vite": "^5.4.10",
+		"vite": "^5.4.14",
 		"vite-plugin-compression": "^0.5.1",
-		"vite-plugin-vue-devtools": "^7.5.2",
+		"vite-plugin-vue-devtools": "^7.7.1",
-		"vue-tsc": "^2.1.6"
+		"vue-tsc": "^2.2.0"
 	}
 }

packages/crud/.browserslistrc

@@ -1,3 +0,0 @@
-> 1%
-last 2 versions
-not dead

packages/crud/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-	presets: ["@vue/cli-plugin-babel/preset"]
-};

packages/crud/env.d.ts

@@ -1 +0,0 @@
-/// <reference types="./index" />

packages/crud/index.d.ts

@@ -130,6 +130,15 @@ declare namespace Render {
 
 // crud
 declare namespace ClCrud {
+	declare interface Field {
+		comment: string;
+		source: string;
+		propertyName: string;
+		type: string;
+		dict: string | string[];
+		nullable: boolean;
+	}
+
 	interface Label {
 		op: string;
 		add: string;
@@ -248,7 +257,13 @@ declare namespace ClCrud {
 			update(params?: Params["update"]): Promise<Response["update"]>;
 			info(params?: Params["info"]): Promise<Response["info"]>;
 			delete(params?: Params["delete"]): Promise<Response["delete"]>;
-			[key: string]: (params?: any) => Promise<any>;
+			permission: Permission;
+			search: {
+				fieldEq: Field[];
+				fieldLike: Field[];
+				keyWordLikeFields: Field[];
+			};
+			[key: string]: any;
 		};
 	}
 
@@ -320,6 +335,7 @@ declare namespace ClTable {
 		search: {
 			isInput: boolean;
 			value: any;
+			icon: () => any;
 			refreshOnChange: boolean;
 			component: Render.Component;
 		};
@@ -331,6 +347,7 @@ declare namespace ClTable {
 		buttons: OpButton | ((options: { scope: T }) => OpButton);
 		align: ElementPlus.Align;
 		label: any;
+		renderLabel: (options: { column: any; $index: number }) => any;
 		className: string;
 		prop: PropKey<T>;
 		orderNum: number;
@@ -345,6 +362,7 @@ declare namespace ClTable {
 		headerAlign: ElementPlus.Align;
 		showOverflowTooltip: boolean;
 		fixed: boolean | string;
+		render: (row: T, column: any, value: any, index: number) => any;
 		formatter: (row: T, column: any, value: any, index: number) => any;
 		selectable: (row: T, index: number) => boolean;
 		reserveSelection: boolean;
@@ -386,6 +404,9 @@ declare namespace ClTable {
 		sortRefresh: boolean;
 		emptyText: string;
 		rowKey: string;
+		on?: {
+			[key: string]: (...args: any[]) => void;
+		};
 		plugins?: Plugin[];
 		onRowContextmenu?(row: T, column: any, event: any): void;
 	}
@@ -416,6 +437,7 @@ declare namespace ClTable {
 		scrollTo(position: { top?: number; left?: number }): void;
 		setScrollTop(top: number): void;
 		setScrollLeft(left: number): void;
+		updateKeyChildren(key: string, children: any[]): void;
 	}
 
 	interface Options<T = any> extends DeepPartial<Config<T>> {
@@ -663,6 +685,8 @@ declare namespace ClAdvSearch {
 }
 
 declare namespace ClSearch {
+	type Plugin = (options: { exposed: Ref }) => void;
+
 	interface Config<T = any> {
 		inline?: boolean;
 		items?: ClForm.Item[];
@@ -674,6 +698,7 @@ declare namespace ClSearch {
 		onChange?(data: T, prop: string): void;
 		onLoad?(data: T): void;
 		onSearch?(data: T, options: { next: ClCrud.Service["api"]["page"] }): void;
+		plugins?: Plugin[];
 	}
 
 	interface Ref<T = any> extends ClForm.Ref<T> {
@@ -764,6 +789,9 @@ declare interface Config {
 			};
 			plugins: ClTable.Plugin[];
 		};
+		search: {
+			plugins: ClSearch.Plugin[];
+		};
 	};
 }
 

packages/crud/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="referer" content="never" />
+		<meta name="renderer" content="webkit" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"
+		/>
+		<title></title>
+		<link rel="icon" href="./favicon.ico" />
+	</head>
+
+	<body>
+		<div class="preload__wrap" id="Loading">
+			<div class="preload__container">
+				<p class="preload__name"></p>
+				<div class="preload__loading"></div>
+				<p class="preload__title"></p>
+				<p class="preload__sub-title"></p>
+			</div>
+		</div>
+
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>

packages/crud/package.json

@@ -1,40 +1,38 @@
 {
 	"name": "@cool-vue/crud",
-	"version": "7.2.13",
+	"version": "8.0.0",
 	"private": false,
-	"main": "./dist/index.umd.min.js",
+	"main": "./dist/index.umd.js",
-	"typings": "types/index.d.ts",
+	"module": "./dist/index.es.js",
+	"types": "types/entry.d.ts",
+	"type": "module",
 	"scripts": {
-		"dev": "vue-cli-service serve",
+		"dev": "vite",
-		"build": "vue-cli-service build",
+		"build": "vue-tsc && vite build",
-		"tsc": "tsc --watch",
+		"preview": "vite preview"
-		"dist": "tsc && pnpm build --target lib --name index ./src/index.ts"
 	},
 	"dependencies": {
-		"@element-plus/icons-vue": "^2.3.1",
+		"@vue/runtime-core": "^3.5.13",
-		"array.prototype.flat": "^1.2.4",
+		"element-plus": "^2.9.4",
-		"core-js": "^3.21.1",
 		"lodash-es": "^4.17.21",
-		"mitt": "^3.0.1",
 		"vue": "^3.5.13"
 	},
 	"devDependencies": {
-		"@types/array.prototype.flat": "^1.2.1",
+		"@types/node": "^20.11.16",
-		"@types/clone-deep": "^4.0.1",
+		"@vitejs/plugin-vue": "^5.2.1",
-		"@types/lodash-es": "^4.17.12",
+		"@vitejs/plugin-vue-jsx": "^4.1.1",
-		"@vue/cli-plugin-babel": "^5.0.1",
+		"prettier": "^3.5.1",
-		"@vue/cli-plugin-typescript": "^5.0.3",
+		"sass": "^1.85.0",
-		"@vue/cli-service": "^5.0.3",
+		"sass-loader": "^16.0.5",
-		"@vue/compiler-sfc": "^3.3.9",
-		"prettier": "^3.1.0",
-		"sass": "^1.55.0",
-		"sass-loader": "^12.6.0",
 		"typescript": "^5.3.3",
-		"element-plus": "^2.9.1"
+		"vite": "^6.1.0",
+		"vite-plugin-dts": "^4.5.0",
+		"vue-tsc": "^2.2.2"
 	},
 	"files": [
-		"dist",
 		"types",
-		"index.d.ts"
+		"dist",
+		"index.d.ts",
+		"index.ts"
 	]
 }

packages/crud/src/App.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<div class="title">CRUD DEMO v7</div>
+		<div class="title">CRUD DEMO v8</div>
 
 		<cl-crud ref="Crud">
 			<div class="search">
@@ -38,12 +38,12 @@
 			</cl-row>
 
 			<cl-upsert ref="Upsert"></cl-upsert>
+			<cl-form ref="Form"></cl-form>
 		</cl-crud>
 	</div>
 </template>
 
 <script setup lang="tsx">
-import { computed } from "vue";
 import { useTable, useForm, useUpsert, useCrud, useSearch } from "./hooks";
 import { EditPen } from "@element-plus/icons-vue";
 
@@ -60,26 +60,40 @@ const Upsert = useUpsert<Data>({
 			props: {
 				labels: [
 					{
-						label: "A",
+						label: "基础",
 						value: "A",
 						icon: EditPen
 					},
 					{
-						label: "B",
+						label: "高级",
 						value: "B"
 					}
 				]
 			}
 		},
 		{
-			group: "B",
+			group: "A",
 			prop: "age",
+			label: "年龄",
 			component: {
 				name: "el-input"
 			}
 		},
+		{
+			group: "A",
+			prop: "name",
+			label: "昵称",
+			component: {
+				name: "el-input"
+			},
+			hidden({ scope }) {
+				return scope.age < 18;
+			}
+		},
 		{
 			group: "B",
+			prop: "phone",
+			label: "手机",
 			component: {
 				name: "el-input"
 			},
@@ -90,17 +104,12 @@ const Upsert = useUpsert<Data>({
 		() => {
 			return {
 				group: "A",
-				hidden: Upsert.value?.mode == "add",
+				hidden: Upsert.value?.mode == "add"
-				hook: {
-					bind(value, { form }) {
-						return "";
-					},
-					submit(value, { form }) {}
-				}
 			};
 		}
 	],
 	onOpened(data) {
+		console.log(data);
 		Upsert.value?.setForm("age", "18");
 	}
 });
@@ -182,7 +191,6 @@ const Search = useSearch({
 			},
 			hook: {
 				reset() {
-					console.log(1111);
 					return [];
 				}
 			}
@@ -197,11 +205,4 @@ const Search = useSearch({
 	font-size: 14px;
 	font-weight: bold;
 }
-
-.search {
-	background-color: #f7f7f7;
-	border-radius: 8px;
-	padding: 10px;
-	margin-bottom: 10px;
-}
 </style>

packages/crud/src/components/adv/search.tsx

@@ -155,7 +155,7 @@ export default defineComponent({
 								type: e == "search" ? "primary" : null,
 								size: style.size,
 								onClick: () => {
-									fns[e]();
+									fns[e]()
 								}
 							},
 							{ default: () => crud.dict.label[e] }

packages/crud/src/components/dialog/index.tsx

@@ -55,7 +55,9 @@ export default defineComponent({
 		scrollbar: {
 			type: Boolean,
 			default: true
-		}
+		},
+		// 背景透明
+		transparent: Boolean
 	},
 
 	emits: ["update:modelValue", "fullscreen-change"],
@@ -232,7 +234,7 @@ export default defineComponent({
 			return h(
 				<el-dialog
 					ref={Dialog}
-					class="cl-dialog"
+					class={["cl-dialog", { 'is-transparent': props.transparent }]}
 					width={props.width}
 					beforeClose={props.beforeClose}
 					show-close={false}

packages/crud/src/components/error-message/index.tsx

@@ -9,7 +9,9 @@ export default defineComponent({
 
 	setup(props) {
 		return () => {
-			return <el-alert title={props.title} type="error" />;
+			return <div class="cl-error-message">
+				{props.title}
+			</div>;
 		};
 	}
 });

packages/crud/src/components/form/helper/api.ts

@@ -28,7 +28,8 @@ export function useApi({ Form }: { Form: Vue.Ref<any> }) {
 			"validateField",
 			"resetFields",
 			"scrollToField",
-			"clearValidate"
+			"clearValidate",
+			"fields"
 		],
 		Form
 	);

packages/crud/src/components/form/helper/plugins.ts

@@ -1,5 +1,6 @@
 import { Ref, WatchStopHandle, getCurrentInstance, watch } from "vue";
 import { useConfig } from "../../../hooks";
+import { uniqueFns } from "../../../utils";
 
 export function usePlugins(enable: boolean, { visible }: { visible: Ref<boolean> }) {
 	const that: any = getCurrentInstance();
@@ -38,7 +39,7 @@ export function usePlugins(enable: boolean, { visible }: { visible: Ref<boolean>
 		}
 
 		// 执行
-		[...(style.form.plugins || []), ...plugins].forEach((p) => {
+		uniqueFns([...(style.form.plugins || []), ...plugins]).forEach((p) => {
 			const d: any = {
 				exposed: that.exposed
 			};

packages/crud/src/components/form/index.tsx

@@ -1,22 +1,22 @@
-import { defineComponent, h, nextTick, toRef, watch } from "vue";
+import { defineComponent, h, nextTick, } from "vue";
-import { assign, cloneDeep, isBoolean, keys } from "lodash-es";
+import { assign, cloneDeep, isBoolean, isFunction, keys } from "lodash-es";
 import { useAction, useForm, usePlugins, useTabs } from "./helper";
 import { useBrowser, useConfig, useElApi, useRefs } from "../../hooks";
 import { getValue, merge } from "../../utils";
 import formHook from "../../utils/form-hook";
 import { renderNode } from "../../utils/vnode";
-import { parseFormHidden } from "../../utils/parse";
 
 export default defineComponent({
 	name: "cl-form",
 
 	props: {
+		name: String,
 		inner: Boolean,
 		inline: Boolean,
 		enablePlugin: {
 			type: Boolean,
 			default: true
-		}
+		},
 	},
 
 	setup(props, { expose, slots }) {
@@ -39,7 +39,7 @@ export default defineComponent({
 
 		// 方法
 		const ElFormApi = useElApi(
-			["validate", "validateField", "resetFields", "scrollToField", "clearValidate"],
+			["validate", "validateField", "resetFields", "scrollToField", "clearValidate", "fields"],
 			Form
 		);
 
@@ -96,7 +96,7 @@ export default defineComponent({
 		// 清空表单验证
 		function clear() {
 			for (const i in form) {
-				form[i] = undefined;
+				delete form[i];
 			}
 
 			setTimeout(() => {
@@ -291,7 +291,7 @@ export default defineComponent({
 						if (e.required) {
 							e.rules = {
 								required: true,
-								message: `${e.label}${dict.label.nonEmpty}`
+								message: dict.label.nonEmpty.replace('{label}', e.label || '')
 							};
 						}
 					}
@@ -361,7 +361,7 @@ export default defineComponent({
 			}
 
 			// 是否隐藏
-			e._hidden = parseFormHidden(e.hidden, {
+			e._hidden = parseHidden(e.hidden, {
 				scope: form
 			});
 
@@ -499,6 +499,7 @@ export default defineComponent({
 							size={style.size}
 							label-width={style.form.labelWidth}
 							inline={props.inline}
+							require-asterisk-position="right"
 							disabled={saving.value}
 							scroll-to-error
 							model={form}
@@ -535,7 +536,7 @@ export default defineComponent({
 			);
 		}
 
-		// 渲染表单按钮
+		// 渲染表单底部按钮
 		function renderFooter() {
 			const { hidden, buttons, saveButtonText, closeButtonText, justify } = config.op;
 
@@ -599,7 +600,19 @@ export default defineComponent({
 			);
 		}
 
-		expose({
+		// Tools
+		function parseHidden(value: any, { scope }: any) {
+			if (isBoolean(value)) {
+				return value;
+			} else if (isFunction(value)) {
+				return value({ scope });
+			}
+
+			return false;
+		}
+
+		const ctx = {
+			name: props.name,
 			refs,
 			Form,
 			visible,
@@ -622,7 +635,11 @@ export default defineComponent({
 			Tabs,
 			...Action,
 			...ElFormApi
-		});
+		}
+
+		// console.log(ctx)
+
+		expose(ctx);
 
 		return () => {
 			if (props.inner) {

packages/crud/src/components/pagination/index.tsx

@@ -68,6 +68,7 @@ export default defineComponent({
 		return () => {
 			return h(
 				<el-pagination
+					class="cl-pagination"
 					size={browser.isMini ? 'small' : style.size}
 					background
 					page-sizes={[10, 20, 30, 40, 50, 100]}

packages/crud/src/components/search-key/index.tsx

@@ -26,7 +26,7 @@ export default defineComponent({
 		// 宽度
 		width: {
 			type: [String, Number],
-			default: 260
+			default: 280
 		},
 		// 是否实时刷新
 		refreshOnInput: Boolean

packages/crud/src/components/search/helper/plugins.ts

@@ -0,0 +1,21 @@
+import { getCurrentInstance } from "vue";
+import { useConfig } from "../../../hooks";
+import { uniqueFns } from "../../../utils";
+
+export function usePlugins() {
+	const that: any = getCurrentInstance();
+	const { style } = useConfig();
+
+	// 插件创建
+	function create(plugins: ClSearch.Plugin[] = []) {
+		uniqueFns([...(style.search?.plugins || []), ...plugins]).forEach((p) => {
+			p({
+				exposed: that.exposed
+			});
+		});
+	}
+
+	return {
+		create
+	};
+}

packages/crud/src/components/search/index.tsx

@@ -14,27 +14,29 @@ import {
 import { useApi } from "../form/helper";
 import { Search, Refresh, Bottom, Top } from "@element-plus/icons-vue";
 import { mitt } from "../../utils/mitt";
-import { isArray, isObject, isString } from "lodash-es";
+import { isArray, isEmpty } from "lodash-es";
+import { usePlugins } from "./helper/plugins";
 
 export default defineComponent({
 	name: "cl-search",
 
 	props: {
+		// 是否行内
 		inline: {
 			type: Boolean,
 			default: true
 		},
+
+		// cl-form 表单配置
 		props: {
 			type: Object,
-			default: () => { }
+			default: () => ({})
 		},
 
 		// 表单值
 		data: {
 			type: Object,
-			default: () => {
+			default: () => ({})
-				return {};
-			}
 		},
 
 		// 列
@@ -50,7 +52,10 @@ export default defineComponent({
 		},
 
 		// 是否需要折叠
-		collapse: Boolean,
+		collapse: {
+			type: Boolean,
+			default: false
+		},
 
 		// 初始化
 		onLoad: Function,
@@ -65,6 +70,7 @@ export default defineComponent({
 		const { crud } = useCore();
 		const { refs, setRefs } = useRefs()
 		const { style } = useConfig();
+		const plugin = usePlugins()
 
 		// 配置
 		const config = reactive<ClSearch.Config>(
@@ -179,15 +185,28 @@ export default defineComponent({
 
 		useProxy(ctx);
 		expose(ctx);
+		plugin.create(config.plugins);
 
 		onMounted(() => {
-			// 打开表单
 			Form.value?.open({
 				op: {
 					hidden: true
 				},
-				props: config.props,
+				props: {
-				items: config.items,
+					labelPosition: 'right',
+					...config.props
+				},
+				items: config.items?.map(e => {
+					return {
+						col: {
+							sm: 12,
+							md: 8,
+							xs: 24,
+							lg: 6,
+						},
+						...e,
+					}
+				}),
 				form: config.data,
 				on: {
 					open(data) {
@@ -235,7 +254,10 @@ export default defineComponent({
 			);
 
 			return (
-				<div class={["cl-search", isExpand.value ? "is-expand" : "is-collapse"]}>
+				<div class={["cl-search", isExpand.value ? "is-expand" : "is-fold", {
+					'is-inline': config.inline,
+					'is-collapse': config.collapse,
+				}]}>
 					<div class="cl-search__form" ref={setRefs("form")}>
 						{h(
 							<cl-form
@@ -243,11 +265,12 @@ export default defineComponent({
 								inner
 								inline={config.inline}
 								enable-plugin={false}
+								name='search'
 							/>,
 							{},
 							{
 								append() {
-									return config.collapse ? null : btnEl;
+									return config.collapse ? null : (isEmpty(config.items) || btnEl);
 								},
 								...slots
 							}

packages/crud/src/components/table/helper/header.tsx

@@ -15,7 +15,7 @@ export function renderHeader(item: ClTable.Column, { scope, slots }: any) {
 	}
 
 	if (!item.search || !item.search.component) {
-		return scope.column.label;
+		return item.label;
 	}
 
 	// 显示输入框
@@ -28,10 +28,10 @@ export function renderHeader(item: ClTable.Column, { scope, slots }: any) {
 	const text = (
 		<div onClick={show}>
 			<el-icon class="icon">
-				<Search />
+				{item.search.icon?.() ?? <Search />}
 			</el-icon>
 
-			<span>{scope.column.label}</span>
+			{item.renderLabel ? item.renderLabel(scope) : item.label}
 		</div>
 	);
 
@@ -47,6 +47,8 @@ export function renderHeader(item: ClTable.Column, { scope, slots }: any) {
 			item.search.value = val;
 		},
 		onChange(val: any) {
+			item.search.value = val;
+
 			// 更改时刷新列表
 			if (item.search.refreshOnChange) {
 				crud.value?.refresh({
@@ -54,6 +56,11 @@ export function renderHeader(item: ClTable.Column, { scope, slots }: any) {
 					[item.prop]: val === "" ? undefined : val
 				});
 			}
+		},
+		onBlur() {
+			if (item.search.value === null || item.search.value === undefined || item.search.value === "") {
+				item.search.isInput = false;
+			}
 		}
 	});
 

packages/crud/src/components/table/helper/index.ts

@@ -1,11 +1,12 @@
 import { inject, reactive, ref } from "vue";
 import { useConfig } from "../../../hooks";
 import { getValue, mergeConfig } from "../../../utils";
+import { ElTable } from "element-plus";
 
 export function useTable(props: any) {
 	const { style } = useConfig();
 
-	const Table = ref();
+	const Table = ref<InstanceType<typeof ElTable>>();
 
 	// 配置
 	const config = reactive<ClTable.Config>(mergeConfig(props, inject("useTable__options") || {}));
@@ -19,6 +20,11 @@ export function useTable(props: any) {
 	// 右键菜单
 	config.contextMenu = config.contextMenu ?? style.table.contextMenu;
 
+	// 事件
+	if (!config.on) {
+		config.on = {};
+	}
+
 	return { Table, config };
 }
 

packages/crud/src/components/table/helper/plugins.ts

@@ -1,5 +1,6 @@
 import { getCurrentInstance } from "vue";
 import { useConfig } from "../../../hooks";
+import { uniqueFns } from "../../../utils";
 
 export function usePlugins() {
 	const that: any = getCurrentInstance();
@@ -8,7 +9,7 @@ export function usePlugins() {
 	// 插件创建
 	function create(plugins: ClTable.Plugin[] = []) {
 		// 执行
-		[...(style.table.plugins || []), ...plugins].forEach((p) => {
+		uniqueFns([...(style.table.plugins || []), ...plugins]).forEach((p) => {
 			p({
 				exposed: that.exposed
 			});

packages/crud/src/components/table/helper/render.tsx

@@ -1,8 +1,7 @@
 import { h, useSlots } from "vue";
 import { useCore, useBrowser, useConfig } from "../../../hooks";
-import { cloneDeep, isEmpty, orderBy } from "lodash-es";
+import { assign, cloneDeep, isArray, isEmpty, isObject, isString, orderBy } from "lodash-es";
-import { getValue } from "../../../utils";
+import { deepFind, getValue, } from "../../../utils";
-import { parseTableDict, parseTableOpButtons } from "../../../utils/parse";
 import { renderNode } from "../../../utils/vnode";
 import { renderHeader } from "./header";
 
@@ -42,19 +41,20 @@ export function useRender() {
 
 				// 操作按钮
 				if (item.type === "op") {
-					return h(
+					const props = assign({
-						ElTableColumn,
-						{
 						label: crud.dict.label.op,
 						width: style.table.column.opWidth,
 						fixed: browser.isMini ? null : "right",
-							...item
+					}, item)
-						},
+
+					return h(
+						ElTableColumn,
+						props,
 						{
 							default: (scope: any) => {
 								return (
 									<div class="cl-table__op">
-										{parseTableOpButtons(item.buttons, { scope })}
+										{renderOpButtons(item.buttons, { scope })}
 									</div>
 								);
 							}
@@ -106,10 +106,23 @@ export function useRender() {
 											value,
 											scope.$index
 										);
+
+										if (isObject(value)) {
+											return value
+										}
 									}
 
 									// 自定义渲染
-									if (item.component) {
+									if (item.render) {
+										return item.render(
+											scope.row,
+											scope.column,
+											value,
+											scope.$index
+										);
+									}
+									// 自定义渲染2
+									else if (item.component) {
 										return renderNode(item.component, {
 											prop: item.prop,
 											scope: scope.row,
@@ -122,7 +135,7 @@ export function useRender() {
 									}
 									// 字典状态
 									else if (item.dict) {
-										return parseTableDict(value, item);
+										return renderDict(value, item);
 									}
 									// 空数据
 									else if (isEmpty(value)) {
@@ -141,6 +154,156 @@ export function useRender() {
 			.filter(Boolean);
 	}
 
+	// 渲染操作按钮
+	function renderOpButtons(buttons: any, { scope }: any) {
+		const list = getValue(buttons || ["edit", "delete"], { scope }) as ClTable.OpButton;
+
+		return list.map((vnode) => {
+			if (vnode === "info") {
+				return (
+					<el-button
+						plain
+						size={style.size}
+						v-show={crud.getPermission("info")}
+						onClick={(e: MouseEvent) => {
+							crud.rowInfo(scope.row);
+							e.stopPropagation();
+						}}>
+						{crud.dict.label?.info}
+					</el-button>
+				);
+			} else if (vnode === "edit") {
+				return (
+					<el-button
+						text
+						type="primary"
+						size={style.size}
+						v-show={crud.getPermission("update")}
+						onClick={(e: MouseEvent) => {
+							crud.rowEdit(scope.row);
+							e.stopPropagation();
+						}}>
+						{crud.dict.label?.update}
+					</el-button>
+				);
+			} else if (vnode === "delete") {
+				return (
+					<el-button
+						text
+						type="danger"
+						size={style.size}
+						v-show={crud.getPermission("delete")}
+						onClick={(e: MouseEvent) => {
+							crud.rowDelete(scope.row);
+							e.stopPropagation();
+						}}>
+						{crud.dict.label?.delete}
+					</el-button>
+				);
+			} else {
+				if (typeof vnode === 'object') {
+					if (vnode.hidden) {
+						return null;
+					}
+				}
+
+				return (
+					renderNode(vnode, {
+						scope,
+						slots,
+						custom(vnode) {
+							return (
+								<el-button
+									text
+									type={vnode.type}
+									{...vnode?.props}
+									onClick={(e: MouseEvent) => {
+										vnode.onClick({ scope });
+										e.stopPropagation();
+									}}>
+									{vnode.label}
+								</el-button>
+							);
+						}
+					})
+				);
+			}
+		});
+	}
+
+	// 渲染字典
+	function renderDict(value: any, item: ClTable.Column) {
+		// 选项列表
+		const list = cloneDeep(item.dict || []) as DictOptions;
+
+		// 字符串分隔符
+		const separator = item.dictSeparator === undefined ? "," : item.dictSeparator;
+
+		// 设置颜色
+		if (item.dictColor) {
+			list.forEach((e, i) => {
+				if (!e.color) {
+					e.color = style.colors[i];
+				}
+			});
+		}
+
+		// 绑定值
+		let values: any[] = [];
+
+		// 格式化值
+		if (isArray(value)) {
+			values = value;
+		} else if (isString(value)) {
+			if (separator) {
+				values = value.split(separator);
+			} else {
+				values = [value];
+			}
+		} else {
+			values = [value];
+		}
+
+		// 返回值
+		const result = values
+			.filter((e) => e !== undefined && e !== null && e !== "")
+			.map((v) => {
+				const d = deepFind(v, list, { allLevels: item.dictAllLevels }) || {
+					label: v,
+					value: v
+				};
+
+				return {
+					...d,
+					children: []
+				};
+			});
+
+		// 格式化返回
+		if (item.dictFormatter) {
+			return item.dictFormatter(result);
+		} else {
+			// tag 返回
+			return result.map((e) => {
+				return h(
+					<el-tag disable-transitions style="margin: 2px; border: 0" />,
+					{
+						type: e.type,
+						closable: e.closable,
+						hit: e.hit,
+						color: e.color,
+						size: e.size,
+						effect: e.effect || "dark",
+						round: e.round
+					},
+					{
+						default: () => <span>{e.label}</span>
+					}
+				);
+			});
+		}
+	}
+
 	// 插槽 empty
 	function renderEmpty(emptyText: string) {
 		return (

packages/crud/src/components/table/index.tsx

@@ -94,13 +94,15 @@ export default defineComponent({
 				"sort",
 				"scrollTo",
 				"setScrollTop",
-				"setScrollLeft"
+				"setScrollLeft",
+				"updateKeyChildren"
 			],
 			Table
 		);
 
 		const ctx = {
 			Table,
+			config,
 			columns: config.columns,
 			...Selection,
 			...Data,
@@ -123,6 +125,8 @@ export default defineComponent({
 				h(
 					<el-table class="cl-table" ref={Table} v-loading={crud.loading} />,
 					{
+						...config.on,
+
 						// config
 						maxHeight: config.autoHeight ? ctx.maxHeight.value : null,
 						height: config.autoHeight ? config.height : null,
@@ -140,7 +144,8 @@ export default defineComponent({
 						border: style.table.border,
 						highlightCurrentRow: style.table.highlightCurrentRow,
 						resizable: style.table.resizable,
-						stripe: style.table.stripe
+						stripe: style.table.stripe,
+
 					},
 					{
 						default() {

packages/crud/src/entry.ts

@@ -0,0 +1,30 @@
+import type { App } from "vue";
+import { useComponent } from "./components";
+import { useProvide } from "./provide";
+import global from "./utils/global";
+import "./static/index.scss";
+
+const Crud = {
+	install(app: App, options?: any) {
+		global.set("__CrudApp__", app);
+
+		// 穿透值
+		useProvide(app, options);
+
+		// 设置组件
+		useComponent(app);
+
+		return {
+			name: "cl-crud"
+		};
+	}
+};
+
+export { Crud };
+
+export * from "./emitter";
+export * from "./hooks";
+export * from "./locale";
+export { registerFormHook } from "./utils/form-hook";
+export { renderNode } from "./utils/vnode";
+export { ContextMenu } from "./components/context-menu";

packages/crud/src/env.d.ts

@@ -1 +0,0 @@
-/// <reference types="../index" />

packages/crud/src/hooks/crud.ts

@@ -171,9 +171,7 @@ export function useSearch<T = any>(options?: ClSearch.Options<T>) {
 	const Search = ref<ClSearch.Ref<T>>();
 	useParent("cl-search", Search);
 
-	if (options) {
 	provide("useSearch__options", options);
-	}
 
 	return Search;
 }

packages/crud/src/hooks/index.ts

@@ -1,6 +1,6 @@
 import { Mitt } from "../utils/mitt";
 import { isFunction } from "lodash-es";
-import { computed, getCurrentInstance, inject, reactive } from "vue";
+import { getCurrentInstance, inject, reactive } from "vue";
 
 export function useCore() {
 	const crud = inject("crud") as ClCrud.Ref;

packages/crud/src/index.ts

@@ -1,30 +1 @@
-import type { App } from "vue";
+export * from "./entry";
-import { useComponent } from "./components";
-import { useProvide } from "./provide";
-import global from "./utils/global";
-import "./static/index.scss";
-
-const Crud = {
-	install(app: App, options?: Options) {
-		global.set("__CrudApp__", app);
-
-		// 穿透值
-		useProvide(app, options);
-
-		// 设置组件
-		useComponent(app);
-
-		return {
-			name: "cl-crud"
-		};
-	}
-};
-
-export default Crud;
-
-export * from "./emitter";
-export * from "./hooks";
-export * from "./plugins";
-export * from "./locale";
-export { registerFormHook } from "./utils/form-hook";
-export { ContextMenu } from "./components/context-menu";

packages/crud/src/locale/en.ts

@@ -15,7 +15,6 @@ export default {
 	advSearch: "Advanced Search",
 	searchKey: "Search Keyword",
 	placeholder: "Please enter",
-	placeholderSelect: "Please select",
 	tips: "Tips",
 	saveSuccess: "Save successful",
 	deleteSuccess: "Delete successful",
@@ -28,7 +27,7 @@ export default {
 	deselect: "Deselect",
 	seeMore: "See more",
 	hideContent: "Hide content",
-	nonEmpty: "Cannot be empty",
+	nonEmpty: "{label} cannot be empty",
 	collapse: "Collapse",
 	expand: "Expand"
 };

packages/crud/src/locale/index.ts

@@ -6,6 +6,6 @@ import zhTw from "./zh-tw";
 export const locale = {
 	en,
 	ja,
-	zhCn,
+	"zh-cn": zhCn,
-	zhTw
+	"zh-tw": zhTw
 };

packages/crud/src/locale/ja.ts

@@ -15,7 +15,6 @@ export default {
 	advSearch: "高度な検索",
 	searchKey: "検索キーワード",
 	placeholder: "入力してください",
-	placeholderSelect: "選択してください",
 	tips: "ヒント",
 	saveSuccess: "保存が成功しました",
 	deleteSuccess: "削除が成功しました",
@@ -27,7 +26,7 @@ export default {
 	deselect: "選択解除",
 	seeMore: "詳細を表示",
 	hideContent: "コンテンツを非表示",
-	nonEmpty: "空にできません",
+	nonEmpty: "{label}は空にできません",
 	collapse: "折り畳む",
 	expand: "展開"
 };

packages/crud/src/locale/zh-cn.ts

@@ -15,7 +15,6 @@ export default {
 	advSearch: "高级搜索",
 	searchKey: "搜索关键字",
 	placeholder: "请输入",
-	placeholderSelect: "请选择",
 	tips: "提示",
 	saveSuccess: "保存成功",
 	deleteSuccess: "删除成功",
@@ -27,7 +26,7 @@ export default {
 	deselect: "取消选择",
 	seeMore: "查看更多",
 	hideContent: "隐藏内容",
-	nonEmpty: "不能为空",
+	nonEmpty: "{label}不能为空",
 	collapse: "收起",
 	expand: "展开更多"
 };

packages/crud/src/locale/zh-tw.ts

@@ -15,7 +15,6 @@ export default {
 	advSearch: "高級搜索",
 	searchKey: "搜索關鍵字",
 	placeholder: "請輸入",
-	placeholderSelect: "請選擇",
 	tips: "提示",
 	saveSuccess: "保存成功",
 	deleteSuccess: "刪除成功",
@@ -27,7 +26,7 @@ export default {
 	deselect: "取消選擇",
 	seeMore: "查看更多",
 	hideContent: "隱藏內容",
-	nonEmpty: "不能為空",
+	nonEmpty: "{label}不能為空",
 	collapse: "收起",
 	expand: "展開"
 };

packages/crud/src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from "vue";
 import App from "./App.vue";
-import Crud, { locale } from "./index";
+import { Crud, locale } from "./entry";
 // import Crud, { locale } from "../dist/index.umd";
 // import "../dist/index.css";
 
@@ -16,7 +16,7 @@ app.use(ElementPlus)
 				prop: "order",
 				order: "sort"
 			},
-			label: locale.zhCn
+			label: locale["zh-cn"]
 		},
 		style: {
 			// size: "default"

packages/crud/src/provide.ts

@@ -38,7 +38,7 @@ function setConfig(app: App, options: Options = {}) {
 					order: "order",
 					prop: "prop"
 				},
-				label: locale.zhCn
+				label: locale["zh-cn"]
 			},
 			style: {
 				colors: [
@@ -65,7 +65,7 @@ function setConfig(app: App, options: Options = {}) {
 					contextMenu: ["refresh", "check", "edit", "delete", "order-asc", "order-desc"],
 					column: {
 						align: "center",
-						opWidth: 160
+						opWidth: 180
 					}
 				}
 			},

packages/crud/src/static/index.scss

@@ -66,8 +66,8 @@
 
 		&__header {
 			.el-table__cell {
-				background-color: #f5f7fa !important;
+				background-color: var(--el-fill-color-lighter) !important;
-				color: #333;
+				color: var(--el-text-color-primary);
 
 				.cell {
 					line-height: normal;
@@ -98,7 +98,7 @@
 			}
 
 			.el-loading-text {
-				color: #666;
+				color: var(--el-text-color-secondary);
 				margin-top: 5px;
 			}
 		}
@@ -109,6 +109,15 @@
 
 		.el-button {
 			margin-bottom: 5px;
+			outline-offset: -2px !important;
+
+			&.is-text {
+				border: 1px solid var(--el-button-border-color) !important;
+
+				&:hover {
+					background-color: var(--el-button-bg-color) !important;
+				}
+			}
 		}
 	}
 
@@ -138,6 +147,18 @@
 	}
 }
 
+.cl-pagination {
+	&.el-pagination {
+		--el-pagination-border-radius: var(--el-border-radius-base);
+	}
+
+	.btn-prev,
+	.btn-next,
+	.el-pager li {
+		border-radius: var(--el-border-radius-base);
+	}
+}
+
 .cl-filter {
 	display: flex;
 	align-items: center;
@@ -155,9 +176,27 @@
 }
 
 .cl-search {
-	margin-bottom: 0px !important;
+	&__btns {
+		margin-left: 5px;
+	}
+
+	&__more {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.el-form-item {
+			margin-bottom: 0;
+		}
+	}
 
 	.el-form:not(.el-form--label-top) {
+		.el-form-item__label {
+			&:empty {
+				display: none;
+			}
+		}
+
 		.cl-search__btns {
 			.el-form-item__label {
 				display: none;
@@ -165,33 +204,32 @@
 		}
 	}
 
-	.el-form:not(.el-form--inline) {
-		.cl-search__btns {
-			margin-left: 5px;
-		}
-	}
-
 	.cl-search__btns {
 		.el-button + .el-button {
 			margin-left: 10px;
 		}
 	}
 
-	&__more {
+	&.is-inline {
-		display: flex;
+		margin-bottom: 0 !important;
-		align-items: center;
-		justify-content: space-between;
-		padding: 5px 0;
-
-		.el-form-item {
-			margin-bottom: 0;
-		}
 	}
 
 	&.is-collapse {
+		background-color: var(--el-fill-color-lighter);
+		padding: 10px;
+		margin-bottom: 10px !important;
+		border-radius: 6px;
+		border: 1px solid var(--el-border-color-extra-light);
+
+		&.is-fold {
 			.cl-search__form {
-			max-height: 84px;
+				max-height: 42px;
 				overflow: hidden;
+
+				&:has(.el-form--label-top) {
+					max-height: 68px;
+				}
+			}
 		}
 	}
 }
@@ -328,6 +366,7 @@
 		line-height: normal;
 	}
 
+	.el-form {
 		.el-form-item {
 			.el-form-item {
 				margin-bottom: 18px;
@@ -369,13 +408,22 @@
 			}
 		}
 
-	.el-form--label-top {
+		&.el-form--label-top {
+			.el-form-item {
+				margin-bottom: 22px;
+			}
+
 			.el-form-item__label {
+				margin: 0 0 4px 0;
 				min-height: 22px;
 			}
+
+			.el-form-item__error {
+				padding-top: 4px;
+			}
 		}
 
-	.el-form--inline {
+		&.el-form--inline {
 			.cl-form__items {
 				display: flex;
 				flex-wrap: wrap;
@@ -404,6 +452,7 @@
 			}
 		}
 	}
+}
 
 .cl-form-tabs {
 	border-bottom: 1px solid var(--el-border-color);
@@ -495,14 +544,13 @@
 		line-height: normal;
 		font-weight: bold;
 		padding: 0 10px;
-		background-color: var(--el-border-color-extra-light);
+		background-color: var(--el-fill-color-lighter);
 		border-radius: var(--el-border-radius-base);
 		cursor: pointer;
+		user-select: none;
 
 		&:hover {
-			.el-icon {
+			background-color: var(--el-fill-color-light);
-				color: var(--el-color-primary);
-			}
 		}
 	}
 
@@ -538,8 +586,8 @@
 	flex-direction: column;
 
 	&.el-dialog {
-		border-radius: 6px;
 		padding: 0;
+		border-radius: 8px;
 	}
 
 	.el-dialog {
@@ -598,8 +646,8 @@
 		display: flex;
 		justify-content: flex-end;
 		position: absolute;
-		right: 0;
+		right: 8px;
-		top: 0;
+		top: 8px;
 		z-index: 9;
 		width: 100%;
 
@@ -610,19 +658,21 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			height: 40px;
+			height: 28px;
-			width: 40px;
+			width: 28px;
 			border: 0;
 			background-color: transparent;
 			cursor: pointer;
 			outline: none;
+			border-radius: 6px;
+			margin-left: 5px;
 
 			i {
 				font-size: 18px;
+			}
 
 			&:hover {
-					opacity: 0.7;
+				background-color: var(--el-fill-color-darker);
-				}
 			}
 		}
 	}
@@ -642,6 +692,10 @@
 			height: 100% !important;
 		}
 	}
+
+	&.is-transparent {
+		background-color: transparent !important;
+	}
 }
 
 .cl-context-menu {
@@ -649,12 +703,16 @@
 	z-index: 9999;
 
 	&__box {
-		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 		width: 160px;
-		background-color: #fff;
+		background-color: var(--el-bg-color);
-		border-radius: 4px;
+		border: 1px solid var(--el-border-color-extra-light);
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -2px rgba(0, 0, 0, 0.1);
+		border-radius: 6px;
 		position: absolute;
 		top: 0;
+		padding: 5px;
 
 		&.is-append {
 			right: calc(-100% - 5px);
@@ -664,30 +722,20 @@
 		& > div {
 			display: flex;
 			align-items: center;
-			height: 35px;
+			font-size: 12px;
-			font-size: 13px;
 			cursor: pointer;
-			padding: 0 15px;
+			padding: 5px 15px;
-			color: #666;
+			color: var(--el-text-color-primary);
 			position: relative;
-
+			border-radius: 4px;
-			&:first-child {
-				margin-top: 5px;
-			}
-
-			&:last-child {
-				margin-bottom: 5px;
-			}
 
 			span {
-				height: 35px;
-				line-height: 35px;
 				flex: 1;
+				user-select: none;
 			}
 
 			&:hover {
-				background-color: #f7f7f7;
+				background-color: var(--el-fill-color-lighter);
-				color: #000;
 			}
 
 			i {
@@ -762,3 +810,16 @@
 		}
 	}
 }
+
+.cl-error-message {
+	display: flex;
+	align-items: center;
+	height: 32px;
+	padding: 0 10px;
+	font-size: 14px;
+	color: var(--el-color-danger);
+	border: 1px solid var(--el-color-danger);
+	border-radius: 4px;
+	box-sizing: border-box;
+	user-select: none;
+}

packages/crud/src/test/service.ts

@@ -196,6 +196,36 @@ class TestService {
 	async list() {
 		return userList;
 	}
+
+	search = {
+		fieldEq: [
+			{
+				propertyName: "occupation",
+				comment: "工作",
+				source: "a.occupation"
+			}
+		],
+		fieldLike: [
+			{
+				propertyName: "status",
+				comment: "状态",
+				dict: ["关闭", "开启"],
+				source: "a.status"
+			}
+		],
+		keyWordLikeFields: [
+			{
+				propertyName: "name",
+				comment: "姓名",
+				source: "a.name"
+			},
+			{
+				propertyName: "phone",
+				comment: "手机号",
+				source: "a.phone"
+			}
+		]
+	};
 }
 
 export { TestService };

packages/crud/src/utils/global.ts

@@ -1,5 +1,4 @@
 // @ts-nocheck
-
 import { App } from "vue";
 
 export default {

packages/crud/src/utils/index.ts

@@ -1,6 +1,7 @@
-import { isRef, mergeProps } from "vue";
+import { isRef, mergeProps, toValue } from "vue";
-import { assign, flatMap, isArray, isFunction, isNumber, isString, mergeWith } from "lodash-es";
+import { assign, flatMap, isArray, isFunction, isNumber, mergeWith } from "lodash-es";
 
+// 是否对象
 export function isObject(val: any) {
 	return val !== null && typeof val === "object";
 }
@@ -85,31 +86,27 @@ export function merge(d1: any, d2: any) {
 
 // 添加元素
 export function addClass(el: Element, name: string) {
-	if (isString(el?.className)) {
+	if (el?.classList) {
-		const f = el.className.includes(name);
+		el.classList.add(name);
-
-		if (!f) {
-			el.className += " " + name;
-		}
 	}
 }
 
 // 移除元素
 export function removeClass(el: Element, name: string) {
-	if (isString(el?.className)) {
+	if (el?.classList) {
-		el.className = el.className.replace(name, "");
+		el.classList.remove(name);
 	}
 }
 
 // 获取值
-export function getValue(data: any, params?: any) {
+export function getValue<T = any>(value: T | Vue.Ref<T> | ((d: any) => T), data?: any): T {
-	if (isRef(data)) {
+	if (isRef(value)) {
-		return data.value;
+		return toValue(value) as T;
 	} else {
-		if (isFunction(data)) {
+		if (isFunction(value)) {
-			return data(params);
+			return value(data);
 		} else {
-			return data;
+			return value as T;
 		}
 	}
 }
@@ -118,7 +115,7 @@ export function getValue(data: any, params?: any) {
 export function deepFind(value: any, list: any[], options?: { allLevels: boolean }) {
 	const { allLevels = true } = options || {};
 
-	function deep(arr: any[], name: string[]): any | undefined {
+	function deep(arr: DictOptions, name: string[]): any | undefined {
 		for (const e of arr) {
 			if (e.value === value) {
 				if (allLevels) {
@@ -130,7 +127,7 @@ export function deepFind(value: any, list: any[], options?: { allLevels: boolean
 					return e;
 				}
 			} else if (e.children) {
-				const d = deep(e.children, [...name, e.label]);
+				const d = deep(e.children, [...name!, e.label!]);
 
 				if (d !== undefined) {
 					return d;
@@ -156,3 +153,12 @@ export function uuid(separator = "-"): string {
 
 	return s.join("");
 }
+
+// 移除相同的方法
+export function uniqueFns(fns: any[]) {
+	const arr = new Map();
+	fns.forEach((fn) => {
+		arr.set(fn.name, fn);
+	});
+	return Array.from(arr.values());
+}

packages/crud/src/utils/parse.tsx

@@ -1,183 +1,10 @@
-import { h, useSlots } from "vue";
+import { isString } from "lodash-es";
-import { useConfig, useCore } from "../hooks";
+import { getValue, isObject } from ".";
-import { isBoolean, isFunction, isArray, isString, cloneDeep } from "lodash-es";
-import { renderNode } from "./vnode";
-import { deepFind, getValue, isObject } from ".";
 
-/**
+// 解析扩展组件
- * 解析 form.hidden
+export function parseExtensionComponent(vnode: Render.Component) {
- */
+	if (["el-select", "el-radio-group", "el-checkbox-group"].includes(vnode.name!)) {
-export function parseFormHidden(value: any, { scope }: any) {
+		const list = getValue(vnode.options || []);
-	if (isBoolean(value)) {
-		return value;
-	} else if (isFunction(value)) {
-		return value({ scope });
-	}
-
-	return false;
-}
-
-/**
- * 解析 table.dict
- */
-export function parseTableDict(value: any, item: ClTable.Column) {
-	const { style } = useConfig();
-
-	// 选项列表
-	const list: DictOptions = cloneDeep(getValue(item.dict || []));
-
-	// 字符串分隔符
-	const separator = item.dictSeparator === undefined ? "," : item.dictSeparator;
-
-	// 设置颜色
-	if (item.dictColor) {
-		list.forEach((e, i) => {
-			if (!e.color) {
-				e.color = style.colors[i];
-			}
-		});
-	}
-
-	// 绑定值
-	let values: any[] = [];
-
-	// 格式化值
-	if (isArray(value)) {
-		values = value;
-	} else if (isString(value)) {
-		if (separator) {
-			values = value.split(separator);
-		} else {
-			values = [value];
-		}
-	} else {
-		values = [value];
-	}
-
-	// 返回值
-	const result = values
-		.filter((e) => e !== undefined && e !== null && e !== "")
-		.map((v) => {
-			const d = deepFind(v, list, { allLevels: item.dictAllLevels }) || {
-				label: v,
-				value: v
-			};
-
-			return {
-				...d,
-				children: []
-			};
-		});
-
-	// 格式化返回
-	if (item.dictFormatter) {
-		return item.dictFormatter(result);
-	} else {
-		// tag 返回
-		return result.map((e) => {
-			return h(
-				<el-tag disable-transitions style="margin: 2px; border: 0" />,
-				{
-					type: e.type,
-					closable: e.closable,
-					hit: e.hit,
-					color: e.color,
-					size: e.size,
-					effect: e.effect || "dark",
-					round: e.round
-				},
-				{
-					default: () => <span>{e.label}</span>
-				}
-			);
-		});
-	}
-}
-
-/**
- * 解析 table.op.buttons
- */
-export function parseTableOpButtons(buttons: any[], { scope }: any) {
-	const { crud } = useCore();
-	const { style } = useConfig();
-	const slots = useSlots();
-
-	const list: any[] = getValue(buttons, { scope }) || ["edit", "delete"];
-
-	return list.map((vnode) => {
-		if (vnode === "info") {
-			return (
-				<el-button
-					text
-					bg
-					size={style.size}
-					v-show={crud.getPermission("info")}
-					onClick={() => {
-						crud.rowInfo(scope.row);
-					}}>
-					{crud.dict.label?.info}
-				</el-button>
-			);
-		} else if (vnode === "edit") {
-			return (
-				<el-button
-					text
-					bg
-					type="primary"
-					size={style.size}
-					v-show={crud.getPermission("update")}
-					onClick={() => {
-						crud.rowEdit(scope.row);
-					}}>
-					{crud.dict.label?.update}
-				</el-button>
-			);
-		} else if (vnode === "delete") {
-			return (
-				<el-button
-					text
-					bg
-					type="danger"
-					size={style.size}
-					v-show={crud.getPermission("delete")}
-					onClick={() => {
-						crud.rowDelete(scope.row);
-					}}>
-					{crud.dict.label?.delete}
-				</el-button>
-			);
-		} else {
-			return (
-				!vnode.hidden &&
-				renderNode(vnode, {
-					scope,
-					slots,
-					custom(vnode) {
-						return (
-							<el-button
-								text
-								type={vnode.type}
-								bg
-								{...vnode?.props}
-								onClick={() => {
-									vnode.onClick({ scope });
-								}}>
-								{vnode.label}
-							</el-button>
-						);
-					}
-				})
-			);
-		}
-	});
-}
-
-/**
- * 解析扩展组件
- */
-export function parseExtensionComponent(vnode: any) {
-	if (["el-select", "el-radio-group", "el-checkbox-group"].includes(vnode.name)) {
-		const list: any[] = getValue(vnode.options) || [];
 
 		const children = (
 			<div>

packages/crud/src/utils/vnode.tsx

@@ -30,7 +30,7 @@ const regs: Map<string, any> = new Map();
 
 // 解析节点
 export function parseNode(vnode: any, options: Options): VNode {
-	const { scope, prop, slots, children, _data } = options || [];
+	const { scope, prop, slots, children, _data } = options || {};
 
 	// 渲染后组件
 	let comp: VNode | null = null;
@@ -128,18 +128,14 @@ export function renderNode(vnode: any, options: Options) {
 			let placeholder = "";
 
 			switch (item.component?.name) {
-				case "el-select":
+				case "el-input":
-					placeholder = config.dict.label.placeholderSelect;
-					break;
-
-				default:
 					placeholder = config.dict.label.placeholder;
 					break;
 			}
 
 			if (placeholder) {
 				if (!item.component.props.placeholder) {
-					item.component.props.placeholder = placeholder + (item.label || '');
+					item.component.props.placeholder = placeholder
 				}
 			}
 		}
@@ -179,7 +175,7 @@ export function renderNode(vnode: any, options: Options) {
 				return options.custom(vnode);
 			}
 
-			return <cl-error-message title={`Error，name is required`} />;
+			return <cl-error-message title="Error，component name is required" />;
 		}
 	}
 }

packages/crud/tsconfig.json

@@ -1,25 +1,34 @@
 {
 	"compilerOptions": {
-		"target": "esnext",
+		"target": "ES2020",
-		"module": "esnext",
+		"useDefineForClassFields": true,
-		"strict": true,
+		"module": "ESNext",
-		"noImplicitAny": false,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
-		"jsx": "preserve",
-		"importHelpers": true,
-		"moduleResolution": "node",
 		"skipLibCheck": true,
-		"esModuleInterop": true,
+		"strict": false,
-		"allowSyntheticDefaultImports": true,
+		"noImplicitAny": false,
-		"sourceMap": false,
+
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "preserve",
+
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true,
+
+		"types": ["./index.d.ts"],
+
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["src/*"]
+		},
 		"declaration": true,
 		"declarationDir": "types",
-		"inlineSourceMap": false,
+		"emitDeclarationOnly": true
-		"disableSizeLimit": true,
-		"baseUrl": ".",
-		"outDir": "dist",
-		"paths": {},
-		"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
 	},
-	"include": ["src"],
+	"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-	"exclude": ["node_modules", "src/main.ts"]
+	"exclude": ["src/App.vue", "node_modules", "dist"]
 }

packages/crud/types/components/add-btn/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineComponent<{}, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/adv/btn.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<{}, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+declare const _default: import('vue').DefineComponent<{}, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
-    Search: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Search: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/adv/search.d.ts

@@ -1,8 +1,8 @@
-import { PropType } from "vue";
+import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     items: {
         type: PropType<ClForm.Item[]>;
-        default: () => never[];
+        default: () => any[];
     };
     title: StringConstructor;
     size: {
@@ -14,10 +14,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => string[];
     };
     onSearch: FunctionConstructor;
-}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "reset")[], "clear" | "reset", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("clear" | "reset")[], "clear" | "reset", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     items: {
         type: PropType<ClForm.Item[]>;
-        default: () => never[];
+        default: () => any[];
     };
     title: StringConstructor;
     size: {
@@ -30,13 +30,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     onSearch: FunctionConstructor;
 }>> & Readonly<{
-    onReset?: ((...args: any[]) => any) | undefined;
+    onReset?: (...args: any[]) => any;
-    onClear?: ((...args: any[]) => any) | undefined;
+    onClear?: (...args: any[]) => any;
 }>, {
     size: string | number;
     items: ClForm.Item<any>[];
     op: unknown[];
 }, {}, {
-    Close: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Close: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/context-menu/index.d.ts

@@ -1,5 +1,5 @@
-import { type PropType } from "vue";
+import { PropType } from 'vue';
-declare const ClContextMenu: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const ClContextMenu: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     show: BooleanConstructor;
     options: {
         type: PropType<ClContextMenu.Options>;
@@ -9,7 +9,7 @@ declare const ClContextMenu: import("vue").DefineComponent<import("vue").Extract
         type: ObjectConstructor;
         default: () => {};
     };
-}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     show: BooleanConstructor;
     options: {
         type: PropType<ClContextMenu.Options>;
@@ -23,7 +23,7 @@ declare const ClContextMenu: import("vue").DefineComponent<import("vue").Extract
     options: ClContextMenu.Options;
     show: boolean;
     event: Record<string, any>;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export declare const ContextMenu: {
     open(event: any, options: ClContextMenu.Options): ClContextMenu.Exposed;
 };

packages/crud/types/components/crud/helper.d.ts

@@ -1,4 +1,4 @@
-import { Mitt } from "../../utils/mitt";
+import { Mitt } from '../../utils/mitt';
 interface Options {
     mitt: Mitt;
     config: ClCrud.Config;
@@ -6,7 +6,7 @@ interface Options {
 }
 export declare function useHelper({ config, crud, mitt }: Options): {
     proxy: (name: string, data?: any[]) => void;
-    set: (key: string, value: any) => false | undefined;
+    set: (key: string, value: any) => boolean;
     on: (name: string, callback: fn) => void;
     rowInfo: (data: any) => void;
     rowAdd: () => void;

packages/crud/types/components/crud/index.d.ts

@@ -1,11 +1,11 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     name: StringConstructor;
     border: BooleanConstructor;
     padding: {
         type: StringConstructor;
         default: string;
     };
-}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     name: StringConstructor;
     border: BooleanConstructor;
     padding: {
@@ -15,5 +15,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{}>, {
     border: boolean;
     padding: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/dialog/index.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
@@ -29,9 +29,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    transparent: BooleanConstructor;
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "fullscreen-change")[], "update:modelValue" | "fullscreen-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:modelValue" | "fullscreen-change")[], "update:modelValue" | "fullscreen-change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
@@ -62,22 +63,24 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    transparent: BooleanConstructor;
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
-    "onFullscreen-change"?: ((...args: any[]) => any) | undefined;
+    "onFullscreen-change"?: (...args: any[]) => any;
 }>, {
     title: string;
     padding: string;
     width: string;
-    keepAlive: boolean;
     hideHeader: boolean;
     controls: unknown[];
     fullscreen: boolean;
+    keepAlive: boolean;
     modelValue: boolean;
+    transparent: boolean;
     scrollbar: boolean;
 }, {}, {
-    Close: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Close: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-    FullScreen: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    FullScreen: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-    Minus: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Minus: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/error-message/index.d.ts

@@ -1,6 +1,6 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     title: StringConstructor;
-}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     title: StringConstructor;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/filter/index.d.ts

@@ -1,6 +1,6 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     label: StringConstructor;
-}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     label: StringConstructor;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/flex1/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineComponent<{}, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/form-card/index.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     label: StringConstructor;
     expand: {
         type: BooleanConstructor;
@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     label: StringConstructor;
     expand: {
         type: BooleanConstructor;
@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     expand: boolean;
     isExpand: boolean;
 }, {}, {
-    ArrowDown: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    ArrowDown: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-    ArrowUp: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    ArrowUp: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/form-tabs/index.d.ts

@@ -1,9 +1,9 @@
-import { PropType } from "vue";
+import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     modelValue: (NumberConstructor | StringConstructor)[];
     labels: {
         type: ArrayConstructor;
-        default: () => never[];
+        default: () => any[];
     };
     justify: {
         type: PropType<"start" | "end" | "left" | "right" | "center" | "justify" | "match-parent">;
@@ -13,11 +13,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<"card" | "default">;
         default: string;
     };
-}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: (NumberConstructor | StringConstructor)[];
     labels: {
         type: ArrayConstructor;
-        default: () => never[];
+        default: () => any[];
     };
     justify: {
         type: PropType<"start" | "end" | "left" | "right" | "center" | "justify" | "match-parent">;
@@ -28,11 +28,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
     };
 }>> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
+    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
 }>, {
     type: "default" | "card";
     labels: unknown[];
     justify: "center" | "left" | "right" | "justify" | "start" | "end" | "match-parent";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/form/helper/index.d.ts

@@ -1,5 +1,5 @@
 export declare function useForm(): {
-    Form: import("vue").Ref<any, any>;
+    Form: import('vue').Ref<any, any>;
     config: {
         [x: string]: any;
         title?: any;
@@ -7,42 +7,42 @@ export declare function useForm(): {
         width?: any;
         props: {
             [x: string]: any;
-            inline?: boolean | undefined;
+            inline?: boolean;
-            labelPosition?: "left" | "right" | "top" | undefined;
+            labelPosition?: "left" | "right" | "top";
-            labelWidth?: string | number | undefined;
+            labelWidth?: string | number;
-            labelSuffix?: string | undefined;
+            labelSuffix?: string;
-            hideRequiredAsterisk?: boolean | undefined;
+            hideRequiredAsterisk?: boolean;
-            showMessage?: boolean | undefined;
+            showMessage?: boolean;
-            inlineMessage?: boolean | undefined;
+            inlineMessage?: boolean;
-            statusIcon?: boolean | undefined;
+            statusIcon?: boolean;
-            validateOnRuleChange?: boolean | undefined;
+            validateOnRuleChange?: boolean;
-            size?: ElementPlus.Size | undefined;
+            size?: ElementPlus.Size;
-            disabled?: boolean | undefined;
+            disabled?: boolean;
         };
         items: {
             [x: string]: any;
-            type?: "tabs" | undefined;
+            type?: "tabs";
-            prop?: (string & {}) | undefined;
+            prop?: string & {};
             props?: {
                 [x: string]: any;
                 labels?: {
                     [x: string]: any;
                     label: string;
                     value: string;
-                    name?: string | undefined;
+                    name?: string;
                     icon?: any;
-                    lazy?: boolean | undefined;
+                    lazy?: boolean;
-                }[] | undefined;
+                }[];
-                justify?: "left" | "center" | "right" | undefined;
+                justify?: "left" | "center" | "right";
-                color?: string | undefined;
+                color?: string;
-                mergeProp?: boolean | undefined;
+                mergeProp?: boolean;
-                labelWidth?: string | undefined;
+                labelWidth?: string;
-                error?: string | undefined;
+                error?: string;
-                showMessage?: boolean | undefined;
+                showMessage?: boolean;
-                inlineMessage?: boolean | undefined;
+                inlineMessage?: boolean;
-                size?: "medium" | "default" | "small" | undefined;
+                size?: "medium" | "default" | "small";
-            } | undefined;
+            };
-            span?: number | undefined;
+            span?: number;
             col?: {
                 span: number;
                 offset: number;
@@ -54,184 +54,184 @@ export declare function useForm(): {
                 lg: any;
                 xl: any;
                 tag: string;
-            } | undefined;
+            };
-            group?: string | undefined;
+            group?: string;
-            collapse?: boolean | undefined;
+            collapse?: boolean;
             value?: any;
-            label?: string | undefined;
+            label?: string;
             renderLabel?: any;
-            flex?: boolean | undefined;
+            flex?: boolean;
-            hook?: "string" | "number" | "boolean" | "join" | AnyString | "empty" | "split" | "booleanNumber" | "datetimeRange" | "splitJoin" | "json" | {
+            hook?: "string" | "number" | "boolean" | "join" | "split" | AnyString | "empty" | "booleanNumber" | "datetimeRange" | "splitJoin" | "json" | {
-                bind?: (ClForm.Hook["Pipe"] | ClForm.Hook["Pipe"][]) | undefined;
+                bind?: ClForm.Hook["Pipe"] | ClForm.Hook["Pipe"][];
-                submit?: (ClForm.Hook["Pipe"] | ClForm.Hook["Pipe"][]) | undefined;
+                submit?: ClForm.Hook["Pipe"] | ClForm.Hook["Pipe"][];
-                reset?: ((prop: string) => string[]) | undefined;
+                reset?: (prop: string) => string[];
-            } | undefined;
+            };
             hidden?: boolean | ((options: {
                 scope: obj;
-            }) => boolean) | undefined;
+            }) => boolean);
             prepend?: {
                 [x: string]: any;
-                name?: string | undefined;
+                name?: string;
                 options?: {
                     [x: string]: any;
-                    label?: string | undefined;
+                    label?: string;
                     value?: any;
-                    color?: string | undefined;
+                    color?: string;
-                    type?: string | undefined;
+                    type?: string;
                 }[] | {
                     value: {
                         [x: string]: any;
-                        label?: string | undefined;
+                        label?: string;
                         value?: any;
-                        color?: string | undefined;
+                        color?: string;
-                        type?: string | undefined;
+                        type?: string;
                     }[];
-                } | undefined;
+                };
                 props?: {
                     [x: string]: any;
-                    onChange?: ((value: any) => void) | undefined;
+                    onChange?: (value: any) => void;
                 } | {
                     value: {
                         [x: string]: any;
-                        onChange?: ((value: any) => void) | undefined;
+                        onChange?: (value: any) => void;
                     };
-                } | undefined;
+                };
-                style?: obj | undefined;
+                style?: obj;
                 slots?: {
                     [key: string]: (data?: any) => any;
-                } | undefined;
+                };
                 vm?: any;
-            } | undefined;
+            };
             component?: {
                 [x: string]: any;
-                name?: string | undefined;
+                name?: string;
                 options?: {
                     [x: string]: any;
-                    label?: string | undefined;
+                    label?: string;
                     value?: any;
-                    color?: string | undefined;
+                    color?: string;
-                    type?: string | undefined;
+                    type?: string;
                 }[] | {
                     value: {
                         [x: string]: any;
-                        label?: string | undefined;
+                        label?: string;
                         value?: any;
-                        color?: string | undefined;
+                        color?: string;
-                        type?: string | undefined;
+                        type?: string;
                     }[];
-                } | undefined;
+                };
                 props?: {
                     [x: string]: any;
-                    onChange?: ((value: any) => void) | undefined;
+                    onChange?: (value: any) => void;
                 } | {
                     value: {
                         [x: string]: any;
-                        onChange?: ((value: any) => void) | undefined;
+                        onChange?: (value: any) => void;
                     };
-                } | undefined;
+                };
-                style?: obj | undefined;
+                style?: obj;
                 slots?: {
                     [key: string]: (data?: any) => any;
-                } | undefined;
+                };
                 vm?: any;
-            } | undefined;
+            };
             append?: {
                 [x: string]: any;
-                name?: string | undefined;
+                name?: string;
                 options?: {
                     [x: string]: any;
-                    label?: string | undefined;
+                    label?: string;
                     value?: any;
-                    color?: string | undefined;
+                    color?: string;
-                    type?: string | undefined;
+                    type?: string;
                 }[] | {
                     value: {
                         [x: string]: any;
-                        label?: string | undefined;
+                        label?: string;
                         value?: any;
-                        color?: string | undefined;
+                        color?: string;
-                        type?: string | undefined;
+                        type?: string;
                     }[];
-                } | undefined;
+                };
                 props?: {
                     [x: string]: any;
-                    onChange?: ((value: any) => void) | undefined;
+                    onChange?: (value: any) => void;
                 } | {
                     value: {
                         [x: string]: any;
-                        onChange?: ((value: any) => void) | undefined;
+                        onChange?: (value: any) => void;
                     };
-                } | undefined;
+                };
-                style?: obj | undefined;
+                style?: obj;
                 slots?: {
                     [key: string]: (data?: any) => any;
-                } | undefined;
+                };
                 vm?: any;
-            } | undefined;
+            };
             rules?: {
                 [x: string]: any;
-                type?: "string" | "number" | "boolean" | "method" | "regexp" | "integer" | "float" | "array" | "object" | "enum" | "date" | "url" | "hex" | "email" | "any" | undefined;
+                type?: "string" | "number" | "boolean" | "method" | "regexp" | "integer" | "float" | "array" | "object" | "enum" | "date" | "url" | "hex" | "email" | "any";
-                required?: boolean | undefined;
+                required?: boolean;
-                message?: string | undefined;
+                message?: string;
-                min?: number | undefined;
+                min?: number;
-                max?: number | undefined;
+                max?: number;
                 trigger?: any;
-                validator?: ((rule: any, value: any, callback: (error?: Error) => void) => void) | undefined;
+                validator?: (rule: any, value: any, callback: (error?: Error) => void) => void;
             } | {
                 [x: string]: any;
-                type?: "string" | "number" | "boolean" | "method" | "regexp" | "integer" | "float" | "array" | "object" | "enum" | "date" | "url" | "hex" | "email" | "any" | undefined;
+                type?: "string" | "number" | "boolean" | "method" | "regexp" | "integer" | "float" | "array" | "object" | "enum" | "date" | "url" | "hex" | "email" | "any";
-                required?: boolean | undefined;
+                required?: boolean;
-                message?: string | undefined;
+                message?: string;
-                min?: number | undefined;
+                min?: number;
-                max?: number | undefined;
+                max?: number;
                 trigger?: any;
-                validator?: ((rule: any, value: any, callback: (error?: Error) => void) => void) | undefined;
+                validator?: (rule: any, value: any, callback: (error?: Error) => void) => void;
-            }[] | undefined;
+            }[];
-            required?: boolean | undefined;
+            required?: boolean;
-            children?: /*elided*/ any[] | undefined;
+            children?: /*elided*/ any[];
         }[];
         form: obj;
-        isReset?: boolean | undefined;
+        isReset?: boolean;
         on?: {
-            open?: ((data: any) => void) | undefined;
+            open?: (data: any) => void;
-            close?: ((action: ClForm.CloseAction, done: fn) => void) | undefined;
+            close?: (action: ClForm.CloseAction, done: fn) => void;
-            submit?: ((data: any, event: {
+            submit?: (data: any, event: {
                 close: fn;
                 done: fn;
-            }) => void) | undefined;
+            }) => void;
-            change?: ((data: any, prop: string) => void) | undefined;
+            change?: (data: any, prop: string) => void;
-        } | undefined;
+        };
         op: {
-            hidden?: boolean | undefined;
+            hidden?: boolean;
-            saveButtonText?: string | undefined;
+            saveButtonText?: string;
-            closeButtonText?: string | undefined;
+            closeButtonText?: string;
-            justify?: "flex-start" | "center" | "flex-end" | undefined;
+            justify?: "flex-start" | "center" | "flex-end";
             buttons?: (`slot-${string}` | ClForm.CloseAction | {
                 [x: string]: any;
                 label: string;
-                type?: string | undefined;
+                type?: string;
-                hidden?: boolean | undefined;
+                hidden?: boolean;
                 onClick: (options: {
                     scope: obj;
                 }) => void;
-            })[] | undefined;
+            })[];
         };
         dialog: {
             [x: string]: any;
             title?: any;
-            height?: string | undefined;
+            height?: string;
-            width?: string | undefined;
+            width?: string;
-            hideHeader?: boolean | undefined;
+            hideHeader?: boolean;
-            controls?: Array<"fullscreen" | "close" | AnyString> | undefined;
+            controls?: Array<"fullscreen" | "close" | AnyString>;
         };
     };
     form: obj;
-    visible: import("vue").Ref<boolean, boolean>;
+    visible: import('vue').Ref<boolean, boolean>;
-    saving: import("vue").Ref<boolean, boolean>;
+    saving: import('vue').Ref<boolean, boolean>;
-    loading: import("vue").Ref<boolean, boolean>;
+    loading: import('vue').Ref<boolean, boolean>;
-    disabled: import("vue").Ref<boolean, boolean>;
+    disabled: import('vue').Ref<boolean, boolean>;
 };
-export * from "./action";
+export * from './action';
-export * from "./api";
+export * from './api';
-export * from "./plugins";
+export * from './plugins';
-export * from "./tabs";
+export * from './tabs';

packages/crud/types/components/form/helper/plugins.d.ts

@@ -1,7 +1,7 @@
-import { Ref } from "vue";
+import { Ref } from 'vue';
 export declare function usePlugins(enable: boolean, { visible }: {
     visible: Ref<boolean>;
 }): {
-    create: (plugins?: ClForm.Plugin[]) => false | undefined;
+    create: (plugins?: ClForm.Plugin[]) => boolean;
     submit: (data: any) => Promise<any>;
 };

packages/crud/types/components/form/helper/tabs.d.ts

@@ -2,11 +2,11 @@ export declare function useTabs({ config, Form }: {
     config: ClForm.Config;
     Form: Vue.Ref<any>;
 }): {
-    active: import("vue").Ref<string | undefined, string | undefined>;
+    active: import('vue').Ref<string, string>;
-    list: import("vue").ComputedRef<ClFormTabs.labels>;
+    list: import('vue').ComputedRef<ClFormTabs.labels>;
     isLoaded: (value: any) => any;
     onLoad: (value: any) => void;
-    get: () => ClForm.Item<any> | undefined;
+    get: () => ClForm.Item<any>;
     set: (data: any) => void;
     change: (value: any, isValid?: boolean) => Promise<unknown>;
     clear: () => void;

packages/crud/types/components/form/index.d.ts

@@ -1,11 +1,13 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    name: StringConstructor;
     inner: BooleanConstructor;
     inline: BooleanConstructor;
     enablePlugin: {
         type: BooleanConstructor;
         default: boolean;
     };
-}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    name: StringConstructor;
     inner: BooleanConstructor;
     inline: BooleanConstructor;
     enablePlugin: {
@@ -16,5 +18,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     inline: boolean;
     inner: boolean;
     enablePlugin: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/index.d.ts

@@ -1,4 +1,4 @@
-import { App } from "vue";
+import { App } from 'vue';
 export declare const components: {
     [key: string]: any;
 };

packages/crud/types/components/multi-delete-btn/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineComponent<{}, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/pagination/index.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+declare const _default: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/refresh-btn/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineComponent<{}, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/row/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineComponent<{}, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/search-key/index.d.ts

@@ -1,5 +1,5 @@
-import { type PropType } from "vue";
+import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     modelValue: StringConstructor;
     field: {
         type: StringConstructor;
@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             label: string;
             value: string;
         }>>;
-        default: () => never[];
+        default: () => any[];
     };
     onSearch: FunctionConstructor;
     placeholder: StringConstructor;
@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: number;
     };
     refreshOnInput: BooleanConstructor;
-}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue" | "field-change")[], "change" | "update:modelValue" | "field-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("change" | "update:modelValue" | "field-change")[], "change" | "update:modelValue" | "field-change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: StringConstructor;
     field: {
         type: StringConstructor;
@@ -30,7 +30,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             label: string;
             value: string;
         }>>;
-        default: () => never[];
+        default: () => any[];
     };
     onSearch: FunctionConstructor;
     placeholder: StringConstructor;
@@ -40,9 +40,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     refreshOnInput: BooleanConstructor;
 }>> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
+    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
-    "onField-change"?: ((...args: any[]) => any) | undefined;
+    "onField-change"?: (...args: any[]) => any;
 }>, {
     width: string | number;
     refreshOnInput: boolean;
@@ -51,5 +51,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         label: string;
         value: string;
     }[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/search/helper/plugins.d.ts

@@ -0,0 +1,3 @@
+export declare function usePlugins(): {
+    create: (plugins?: ClSearch.Plugin[]) => void;
+};

packages/crud/types/components/search/index.d.ts

@@ -1,12 +1,12 @@
-import { PropType } from "vue";
+import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     inline: {
         type: BooleanConstructor;
         default: boolean;
     };
     props: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => {};
     };
     data: {
         type: ObjectConstructor;
@@ -14,23 +14,26 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     items: {
         type: PropType<ClForm.Item[]>;
-        default: () => never[];
+        default: () => any[];
     };
     resetBtn: {
         type: BooleanConstructor;
         default: boolean;
     };
-    collapse: BooleanConstructor;
+    collapse: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     onLoad: FunctionConstructor;
     onSearch: FunctionConstructor;
-}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "reset"[], "reset", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "reset"[], "reset", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     inline: {
         type: BooleanConstructor;
         default: boolean;
     };
     props: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => {};
     };
     data: {
         type: ObjectConstructor;
@@ -38,23 +41,26 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     items: {
         type: PropType<ClForm.Item[]>;
-        default: () => never[];
+        default: () => any[];
     };
     resetBtn: {
         type: BooleanConstructor;
         default: boolean;
     };
-    collapse: BooleanConstructor;
+    collapse: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     onLoad: FunctionConstructor;
     onSearch: FunctionConstructor;
 }>> & Readonly<{
-    onReset?: ((...args: any[]) => any) | undefined;
+    onReset?: (...args: any[]) => any;
 }>, {
-    items: ClForm.Item<any>[];
-    props: Record<string, any>;
-    inline: boolean;
     data: Record<string, any>;
+    props: Record<string, any>;
+    items: ClForm.Item<any>[];
+    inline: boolean;
     resetBtn: boolean;
     collapse: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/table/helper/data.d.ts

@@ -2,6 +2,6 @@ export declare function useData({ config, Table }: {
     config: ClTable.Config;
     Table: Vue.Ref<any>;
 }): {
-    data: import("vue").Ref<obj[], obj[]>;
+    data: import('vue').Ref<obj[], obj[]>;
     setData: (list: obj[]) => void;
 };

packages/crud/types/components/table/helper/height.d.ts

@@ -2,6 +2,6 @@ export declare function useHeight({ config, Table }: {
     Table: Vue.Ref<any>;
     config: ClTable.Config;
 }): {
-    maxHeight: import("vue").Ref<number, number>;
+    maxHeight: import('vue').Ref<number, number>;
-    calcMaxHeight: import("lodash-es").DebouncedFunc<() => Promise<void>>;
+    calcMaxHeight: import('lodash-es').DebouncedFunc<() => Promise<void>>;
 };

packages/crud/types/components/table/helper/op.d.ts

@@ -1,7 +1,7 @@
 export declare function useOp({ config }: {
     config: ClTable.Config;
 }): {
-    visible: import("vue").Ref<boolean, boolean>;
+    visible: import('vue').Ref<boolean, boolean>;
     reBuild: (cb?: fn) => Promise<void>;
     showColumn: (prop: string | string[], status?: boolean) => void;
     hideColumn: (prop: string | string[]) => void;

packages/crud/types/components/table/helper/render.d.ts

@@ -1,7 +1,7 @@
 export declare function useRender(): {
-    renderColumn: (columns: ClTable.Column[]) => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    renderColumn: (columns: ClTable.Column[]) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
         [key: string]: any;
-    }> | null)[];
+    }>[];
     renderEmpty: (emptyText: string) => any;
     renderAppend: () => any;
 };

packages/crud/types/components/table/index.d.ts

@@ -1,16 +1,16 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     columns: {
         type: ArrayConstructor;
-        default: () => never[];
+        default: () => any[];
     };
     autoHeight: {
         type: BooleanConstructor;
-        default: null;
+        default: any;
     };
-    height: null;
+    height: any;
     contextMenu: {
-        type: (BooleanConstructor | ArrayConstructor)[];
+        type: (ArrayConstructor | BooleanConstructor)[];
-        default: null;
+        default: any;
     };
     defaultSort: ObjectConstructor;
     sortRefresh: {
@@ -22,21 +22,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
         default: string;
     };
-}>, () => false | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("selection-change" | "sort-change")[], "selection-change" | "sort-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("selection-change" | "sort-change")[], "selection-change" | "sort-change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     columns: {
         type: ArrayConstructor;
-        default: () => never[];
+        default: () => any[];
     };
     autoHeight: {
         type: BooleanConstructor;
-        default: null;
+        default: any;
     };
-    height: null;
+    height: any;
     contextMenu: {
-        type: (BooleanConstructor | ArrayConstructor)[];
+        type: (ArrayConstructor | BooleanConstructor)[];
-        default: null;
+        default: any;
     };
     defaultSort: ObjectConstructor;
     sortRefresh: {
@@ -49,13 +49,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
     };
 }>> & Readonly<{
-    "onSelection-change"?: ((...args: any[]) => any) | undefined;
+    "onSelection-change"?: (...args: any[]) => any;
-    "onSort-change"?: ((...args: any[]) => any) | undefined;
+    "onSort-change"?: (...args: any[]) => any;
 }>, {
     columns: unknown[];
     autoHeight: boolean;
+    height: any;
     contextMenu: boolean | unknown[];
     sortRefresh: boolean;
     rowKey: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/components/upsert/index.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     items: {
         type: ArrayConstructor;
-        default: () => never[];
+        default: () => any[];
     };
     props: ObjectConstructor;
     sync: BooleanConstructor;
@@ -13,10 +13,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onClosed: FunctionConstructor;
     onInfo: FunctionConstructor;
     onSubmit: FunctionConstructor;
-}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("opened" | "closed")[], "opened" | "closed", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("opened" | "closed")[], "opened" | "closed", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     items: {
         type: ArrayConstructor;
-        default: () => never[];
+        default: () => any[];
     };
     props: ObjectConstructor;
     sync: BooleanConstructor;
@@ -29,10 +29,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onInfo: FunctionConstructor;
     onSubmit: FunctionConstructor;
 }>> & Readonly<{
-    onOpened?: ((...args: any[]) => any) | undefined;
+    onOpened?: (...args: any[]) => any;
-    onClosed?: ((...args: any[]) => any) | undefined;
+    onClosed?: (...args: any[]) => any;
 }>, {
     sync: boolean;
     items: unknown[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

packages/crud/types/entry.d.ts

@@ -0,0 +1,13 @@
+import { App } from 'vue';
+declare const Crud: {
+    install(app: App, options?: any): {
+        name: string;
+    };
+};
+export { Crud };
+export * from './emitter';
+export * from './hooks';
+export * from './locale';
+export { registerFormHook } from './utils/form-hook';
+export { renderNode } from './utils/vnode';
+export { ContextMenu } from './components/context-menu';

packages/crud/types/hooks/crud.d.ts

@@ -1,10 +1,10 @@
-import { Ref } from "vue";
+import { Ref } from 'vue';
-export declare function useCrud(options?: ClCrud.Options, cb?: (app: ClCrud.Ref) => void): Ref<ClCrud.Ref | undefined, ClCrud.Ref | undefined>;
+export declare function useCrud(options?: ClCrud.Options, cb?: (app: ClCrud.Ref) => void): Ref<ClCrud.Ref, ClCrud.Ref>;
-export declare function useUpsert<T = any>(options?: ClUpsert.Options<T>): Ref<ClUpsert.Ref<any> | undefined, ClUpsert.Ref<any> | undefined>;
+export declare function useUpsert<T = any>(options?: ClUpsert.Options<T>): Ref<ClUpsert.Ref<any>, ClUpsert.Ref<any>>;
-export declare function useTable<T = any>(options?: ClTable.Options<T>, cb?: (table: ClTable.Ref) => void): Ref<ClTable.Ref<T> | undefined, ClTable.Ref<T> | undefined>;
+export declare function useTable<T = any>(options?: ClTable.Options<T>, cb?: (table: ClTable.Ref) => void): Ref<ClTable.Ref<T>, ClTable.Ref<T>>;
-export declare function useForm<T = any>(cb?: (app: ClForm.Ref<T>) => void): Ref<ClForm.Ref<T> | undefined, ClForm.Ref<T> | undefined>;
+export declare function useForm<T = any>(cb?: (app: ClForm.Ref<T>) => void): Ref<ClForm.Ref<T>, ClForm.Ref<T>>;
-export declare function useAdvSearch<T = any>(options?: ClAdvSearch.Options<T>): Ref<ClAdvSearch.Ref<T> | undefined, ClAdvSearch.Ref<T> | undefined>;
+export declare function useAdvSearch<T = any>(options?: ClAdvSearch.Options<T>): Ref<ClAdvSearch.Ref<T>, ClAdvSearch.Ref<T>>;
-export declare function useSearch<T = any>(options?: ClSearch.Options<T>): Ref<ClSearch.Ref<T> | undefined, ClSearch.Ref<T> | undefined>;
+export declare function useSearch<T = any>(options?: ClSearch.Options<T>): Ref<ClSearch.Ref<T>, ClSearch.Ref<T>>;
 export declare function useDialog(options?: {
     onFullscreen(visible: boolean): void;
 }): ClDialog.Provide;

packages/crud/types/hooks/index.d.ts

@@ -1,4 +1,4 @@
-import { Mitt } from "../utils/mitt";
+import { Mitt } from '../utils/mitt';
 export declare function useCore(): {
     crud: ClCrud.Ref;
     mitt: Mitt;
@@ -13,4 +13,4 @@ export declare function useRefs(): {
 };
 export declare function useProxy(ctx: any): any;
 export declare function useElApi(keys: string[], el: any): obj;
-export * from "./crud";
+export * from './crud';

packages/crud/types/index.d.ts

@@ -1,14 +0,0 @@
-import type { App } from "vue";
-import "./static/index.scss";
-declare const Crud: {
-    install(app: App, options?: Options): {
-        name: string;
-    };
-};
-export default Crud;
-export * from "./emitter";
-export * from "./hooks";
-export * from "./plugins";
-export * from "./locale";
-export { registerFormHook } from "./utils/form-hook";
-export { ContextMenu } from "./components/context-menu";

packages/crud/types/locale/en.d.ts

@@ -15,7 +15,6 @@ declare const _default: {
     advSearch: string;
     searchKey: string;
     placeholder: string;
-    placeholderSelect: string;
     tips: string;
     saveSuccess: string;
     deleteSuccess: string;

packages/crud/types/locale/index.d.ts

@@ -16,7 +16,6 @@ export declare const locale: {
         advSearch: string;
         searchKey: string;
         placeholder: string;
-        placeholderSelect: string;
         tips: string;
         saveSuccess: string;
         deleteSuccess: string;
@@ -49,7 +48,6 @@ export declare const locale: {
         advSearch: string;
         searchKey: string;
         placeholder: string;
-        placeholderSelect: string;
         tips: string;
         saveSuccess: string;
         deleteSuccess: string;
@@ -65,7 +63,7 @@ export declare const locale: {
         collapse: string;
         expand: string;
     };
-    zhCn: {
+    "zh-cn": {
         op: string;
         add: string;
         delete: string;
@@ -82,7 +80,6 @@ export declare const locale: {
         advSearch: string;
         searchKey: string;
         placeholder: string;
-        placeholderSelect: string;
         tips: string;
         saveSuccess: string;
         deleteSuccess: string;
@@ -98,7 +95,7 @@ export declare const locale: {
         collapse: string;
         expand: string;
     };
-    zhTw: {
+    "zh-tw": {
         op: string;
         add: string;
         delete: string;
@@ -115,7 +112,6 @@ export declare const locale: {
         advSearch: string;
         searchKey: string;
         placeholder: string;
-        placeholderSelect: string;
         tips: string;
         saveSuccess: string;
         deleteSuccess: string;

packages/crud/types/locale/ja.d.ts

@@ -15,7 +15,6 @@ declare const _default: {
     advSearch: string;
     searchKey: string;
     placeholder: string;
-    placeholderSelect: string;
     tips: string;
     saveSuccess: string;
     deleteSuccess: string;

packages/crud/types/locale/zh-cn.d.ts

@@ -15,7 +15,6 @@ declare const _default: {
     advSearch: string;
     searchKey: string;
     placeholder: string;
-    placeholderSelect: string;
     tips: string;
     saveSuccess: string;
     deleteSuccess: string;

packages/crud/types/locale/zh-tw.d.ts

@@ -15,7 +15,6 @@ declare const _default: {
     advSearch: string;
     searchKey: string;
     placeholder: string;
-    placeholderSelect: string;
     tips: string;
     saveSuccess: string;
     deleteSuccess: string;

packages/crud/types/plugins/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * 设置聚焦，prop为空则默认第一个选项
- * @param prop
- * @returns
- */
-export declare function setFocus(prop?: string): ClForm.Plugin;