优化

.vscode/crud.code-snippets

@@ -33,7 +33,7 @@
 			"    </cl-crud>",
 			"</template>",
 			"",
-			"<script lang=\"ts\" name=\"菜单名称\" setup>",
+			"<script lang=\"ts\" name=\"$1\" setup>",
 			"import { useCrud, useTable, useUpsert } from \"@cool-vue/crud\";",
 			"import { useCool } from \"/@/cool\";",
 			"",
@@ -52,7 +52,7 @@
 			"// cl-crud",
 			"const Crud = useCrud(",
 			"    {",
-			"        service: service.demo.goods",
+			"        service: service$2",
 			"    },",
 			"    (app) => {",
 			"        app.refresh();",

package.json

@@ -22,7 +22,7 @@
 		"core-js": "^3.38.1",
 		"dayjs": "^1.11.13",
 		"echarts": "^5.5.1",
-		"element-plus": "2.8.4",
+		"element-plus": "2.8.8",
 		"file-saver": "^2.0.5",
 		"lodash-es": "^4.17.21",
 		"marked": "^14.1.3",
@@ -64,7 +64,7 @@
 		"npm-run-all2": "^6.2.3",
 		"prettier": "^3.3.3",
 		"rollup-plugin-visualizer": "^5.12.0",
-		"sass": "1.77.0",
+		"sass": "1.81.0",
 		"terser": "^5.36.0",
 		"typescript": "~5.5.4",
 		"vite": "^5.4.8",

packages/crud/index.d.ts

@@ -1,3 +1,4 @@
+import Mitt from "mitt";
 // vue
 declare namespace Vue {
 	interface Ref<T = any> {
@@ -249,10 +250,7 @@ declare namespace ClCrud {
 			event: {
 				done: fn;
 				next: Service["api"]["page"];
-				render: (
+				render: (data: any | any[], pagination?: Response["page"]["pagination"]) => void;
-					list: Response["page"]["list"],
-					pagination?: Response["page"]["pagination"]
-				) => void;
 			}
 		): void;
 		onDelete(
@@ -266,6 +264,8 @@ declare namespace ClCrud {
 	interface Ref {
 		"cl-table": ClTable.Ref;
 		"cl-upsert": ClUpsert.Ref;
+		id: number;
+		mitt: Mitt;
 		name: string;
 		routePath: string;
 		permission: Permission;

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

@@ -70,8 +70,8 @@ export function useHelper({ config, crud, mitt }: Options) {
 			}
 
 			// 渲染
-			function render(list: any[], pagination?: any) {
+			function render(data: any | any[], pagination?: any) {
-				const res = { list, pagination };
+				const res = isArray(data) ? { list: data, pagination } : data;
 				done();
 				success(res);
 				mitt.emit("crud.refresh", res);
@@ -87,12 +87,15 @@ export function useHelper({ config, crud, mitt }: Options) {
 							}
 
 							if (isArray(res)) {
-								render(res);
+								res = {
-							} else {
+									list: res,
-								render(res.list, res.pagination);
+									pagination: {
+										total: res.length
+									}
+								};
 							}
 
-							success(res);
+							render(res);
 							resolve(res);
 						})
 						.catch((err) => {

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

@@ -55,7 +55,9 @@ export default defineComponent({
 					// 字典
 					dict: {},
 					// 权限
-					permission: {}
+					permission: {},
+					// 事件
+					mitt
 				},
 				cloneDeep({ dict, permission })
 			)

src/config/proxy.ts

@@ -1,6 +1,7 @@
 export const proxy = {
 	'/dev/': {
-		target: 'http://127.0.0.1:8001',
+		target: 'https://show.cool-admin.com/api',
+		// target: 'http://127.0.0.1:8001',
 		changeOrigin: true,
 		rewrite: (path: string) => path.replace(/^\/dev/, '')
 	},

src/modules/demo/views/crud/components/crud/service.vue

@@ -49,15 +49,15 @@ import { ref } from 'vue';
 import { useCool } from '/@/cool';
 
 //【很重要】service 是所有请求的集合，是一个对象（刷新页面和保存代码会自动读取后端的所有接口）
-const { service } = useCool();
+const { service, route } = useCool();
 console.log('service', service);
 
 // cl-crud 配置
 const Crud = useCrud(
 	{
-		//【很重要】配置 service，如：service.demo.goods
+		//【很重要】配置 service，如：service.base.sys.user
-		// 不需要到具体的方法，如：service.demo.goods.page，这是错误的！
+		// 不需要到具体的方法，如：service.base.sys.user.page，这是错误的！
-		service: service.demo.goods
+		service: service.base.sys.user
 
 		// 自定义配置1，添加本地 service 文件。
 		// 【很重要】参考 /src/modules/demo/service/test.ts
@@ -83,7 +83,13 @@ const Crud = useCrud(
 		// }
 	},
 	app => {
+		// 首次调用刷新接口。在弹窗的情况下可以注释，用 Crud.value?.refresh() 方式手动调用
 		app.refresh();
+
+		// 带参数
+		// app.refresh({
+		// 	userId: route.query.id
+		// });
 	}
 );
 

src/modules/demo/views/crud/components/other/tips.vue

@@ -14,7 +14,6 @@
 				<cl-crud ref="Crud">
 					<cl-row>
 						<cl-refresh-btn />
-						<cl-add-btn />
 						<cl-multi-delete-btn />
 
 						<cl-flex1 />
@@ -53,7 +52,7 @@ const { service } = useCool();
 // cl-crud 配置
 const Crud = useCrud(
 	{
-		service: service.demo.goods
+		service: service.base.sys.user
 	},
 	app => {
 		app.refresh();
@@ -61,8 +60,8 @@ const Crud = useCrud(
 );
 
 // cl-table 配置
-//【很重要】添加类型标注 <Eps.DemoGoodsEntity>，也可以自定义<{ title: string; price: number }>
+//【很重要】添加类型标注 <Eps.BaseSysUserEntity>，也可以自定义类型
-const Table = useTable<Eps.DemoGoodsEntity>({
+const Table = useTable<Eps.BaseSysUserEntity>({
 	autoHeight: false,
 	contextMenu: ['refresh'],
 
@@ -71,30 +70,22 @@ const Table = useTable<Eps.DemoGoodsEntity>({
 			type: 'selection'
 		},
 		{
-			label: '商品标题',
+			prop: 'headImg', //【很重要】编辑的时候会提示 BaseSysUserEntity 实体的属性名
-			prop: 'title', //【很重要】编辑的时候会提示 DemoGoodsEntity 实体的属性名
+			label: '头像',
+			component: {
+				name: 'cl-avatar'
+			},
 			minWidth: 140
 		},
 		{
-			label: '主图',
+			prop: 'name',
-			prop: 'mainImage',
+			label: '姓名',
-			minWidth: 140,
+			minWidth: 150
-			component: {
-				name: 'cl-image',
-				props: {
-					size: 60
-				}
-			}
 		},
 		{
-			label: '价格',
+			prop: 'nickName',
-			prop: 'price',
+			label: '昵称',
-			minWidth: 120
+			minWidth: 150
-		},
-		{
-			label: '库存',
-			prop: 'stock',
-			minWidth: 120
 		},
 		{
 			label: '创建时间',
@@ -109,49 +100,40 @@ const Table = useTable<Eps.DemoGoodsEntity>({
 });
 
 // cl-upsert 配置
-//【很重要】添加类型标注 <Eps.DemoGoodsEntity>，也可以自定义<{ title: string; price: number }>
+//【很重要】添加类型标注 <Eps.BaseSysUserEntity>，也可以自定义类型
-const Upsert = useUpsert<Eps.DemoGoodsEntity>({
+const Upsert = useUpsert<Eps.BaseSysUserEntity>({
 	items: [
 		{
-			label: '商品标题',
+			prop: 'headImg', //【很重要】编辑的时候会提示 BaseSysUserEntity 实体的属性名
-			prop: 'title', //【很重要】编辑的时候会提示 DemoGoodsEntity 实体的属性名
+			label: '头像',
+			component: {
+				name: 'cl-upload',
+				props: {
+					text: '选择头像'
+				}
+			}
+		},
+		{
+			prop: 'name',
+			label: '姓名',
+			span: 12,
+			required: true,
 			component: {
 				name: 'el-input'
 			}
 		},
 		{
-			label: '主图',
+			prop: 'username',
-			prop: 'mainImage',
+			label: '用户名',
+			required: true,
+			span: 12,
 			component: {
-				name: 'cl-upload'
+				name: 'el-input'
-			}
-		},
-		{
-			label: '价格',
-			prop: 'price',
-			hook: 'number',
-			component: {
-				name: 'el-input-number',
-				props: {
-					min: 0.01,
-					max: 10000
-				}
-			}
-		},
-		{
-			label: '库存',
-			prop: 'stock',
-			component: {
-				name: 'el-input-number',
-				props: {
-					min: 0,
-					max: 1000
-				}
 			}
 		}
 	],
 	onSubmit(data, { next }) {
-		// 【很重要】data 的类型也会被定义成 DemoGoodsEntity
+		// 【很重要】data 的类型也会被定义成 BaseSysUserEntity
 
 		next({
 			...data,

vite.config.ts

@@ -46,7 +46,8 @@ export default ({ mode }: ConfigEnv): UserConfig => {
 		css: {
 			preprocessorOptions: {
 				scss: {
-					charset: false
+					charset: false,
+					api: 'modern-compiler'
 				}
 			}
 		},