feat: ✨ 添加icon组件，更多icon选择

web/package.json

@@ -19,10 +19,12 @@
 		"axios": "^1.2.1",
 		"countup.js": "^2.3.2",
 		"cropperjs": "^1.5.13",
+		"e-icon-picker": "^2.1.1",
 		"echarts": "^5.4.1",
 		"echarts-gl": "^2.0.9",
 		"echarts-wordcloud": "^2.1.0",
 		"element-plus": "^2.2.26",
+		"font-awesome": "^4.7.0",
 		"js-cookie": "^3.0.1",
 		"js-table2excel": "^1.0.3",
 		"jsplumb": "^2.15.6",

web/src/assets/iconfont/iconfont.css

@@ -0,0 +1,55 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3882322 */
+  src: url('iconfont.woff2?t=1676892176164') format('woff2'),
+       url('iconfont.woff?t=1676892176164') format('woff'),
+       url('iconfont.ttf?t=1676892176164') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-xiaoxizhongxin:before {
+  content: "\e665";
+}
+
+.icon-xitongshezhi:before {
+  content: "\e7ba";
+}
+
+.icon-caozuorizhi:before {
+  content: "\e611";
+}
+
+.icon-guanlidenglurizhi:before {
+  content: "\ea45";
+}
+
+.icon-rizhi:before {
+  content: "\e60c";
+}
+
+.icon-system:before {
+  content: "\e684";
+}
+
+.icon-Area:before {
+  content: "\eaa2";
+}
+
+.icon-file:before {
+  content: "\e671";
+}
+
+.icon-dict:before {
+  content: "\e626";
+}
+
+.icon-configure:before {
+  content: "\e733";
+}
+

web/src/assets/iconfont/iconfont.json

@@ -0,0 +1,79 @@
+{
+  "id": "3882322",
+  "name": "dvadmin3",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "dvadmin3前端项目icon",
+  "glyphs": [
+    {
+      "icon_id": "630252",
+      "name": "消息中心",
+      "font_class": "xiaoxizhongxin",
+      "unicode": "e665",
+      "unicode_decimal": 58981
+    },
+    {
+      "icon_id": "10465939",
+      "name": "系统设置",
+      "font_class": "xitongshezhi",
+      "unicode": "e7ba",
+      "unicode_decimal": 59322
+    },
+    {
+      "icon_id": "13952258",
+      "name": "操作日志",
+      "font_class": "caozuorizhi",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "26876046",
+      "name": "管理登录日志",
+      "font_class": "guanlidenglurizhi",
+      "unicode": "ea45",
+      "unicode_decimal": 59973
+    },
+    {
+      "icon_id": "4520330",
+      "name": "日志",
+      "font_class": "rizhi",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "11686866",
+      "name": "system",
+      "font_class": "system",
+      "unicode": "e684",
+      "unicode_decimal": 59012
+    },
+    {
+      "icon_id": "12004865",
+      "name": "Area",
+      "font_class": "Area",
+      "unicode": "eaa2",
+      "unicode_decimal": 60066
+    },
+    {
+      "icon_id": "15838480",
+      "name": "file",
+      "font_class": "file",
+      "unicode": "e671",
+      "unicode_decimal": 58993
+    },
+    {
+      "icon_id": "16880980",
+      "name": "dict",
+      "font_class": "dict",
+      "unicode": "e626",
+      "unicode_decimal": 58918
+    },
+    {
+      "icon_id": "32434794",
+      "name": "configure",
+      "font_class": "configure",
+      "unicode": "e733",
+      "unicode_decimal": 59187
+    }
+  ]
+}

web/src/main.ts

@@ -9,16 +9,39 @@ import 'element-plus/dist/index.css';
 import '/@/theme/index.scss';
 import mitt from 'mitt';
 import VueGridLayout from 'vue-grid-layout';
-import piniaPersist from 'pinia-plugin-persist'
+import piniaPersist from 'pinia-plugin-persist';
 // @ts-ignore
-import fastCrud from './settings.ts'
+import fastCrud from './settings.ts';
 import pinia from './stores';
-import permission from  "/@/plugin/permission/index";
+import permission from '/@/plugin/permission/index';
-const app = createApp(App);
+import eIconPicker, { iconList } from 'e-icon-picker';
-pinia.use(piniaPersist)
+import 'e-icon-picker/icon/default-icon/symbol.js'; //基本彩色图标库
+import 'e-icon-picker/index.css'; // 基本样式，包含基本图标
+import 'font-awesome/css/font-awesome.min.css';
+import elementPlus from 'e-icon-picker/icon/ele/element-plus.js'; //element-plus的图标
+import fontAwesome470 from 'e-icon-picker/icon/fontawesome/font-awesome.v4.7.0.js'; //fontAwesome470的图标
+import eIconList from 'e-icon-picker/icon/default-icon/eIconList.js';
+import { analyzingIconForIconfont } from 'e-icon-picker'; //引入解析json的函数
+import iconfont from '/@/assets/iconfont/iconfont.json'; //引入json文件
+import '/@/assets/iconfont/iconfont.css'; //引入css
+let forIconfont = analyzingIconForIconfont(iconfont); //解析class
+iconList.addIcon(forIconfont.list); // 添加iconfont dvadmin3的icon
+iconList.addIcon(elementPlus); // 添加element plus的图标
+iconList.addIcon(fontAwesome470); // 添加fontAwesome 470版本的图标
+
+let app = createApp(App);
+
+app.use(eIconPicker, {
+	addIconList: eIconList, //全局添加图标
+	removeIconList: [], //全局删除图标
+	zIndex: 3100, //选择器弹层的最低层,全局配置
+});
+
+pinia.use(piniaPersist);
 directive(app);
 other.elSvg(app);
-app.use(permission)
+
+app.use(permission);
 app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t }).use(i18n).use(VueGridLayout).use(fastCrud).mount('#app');
 
 app.config.globalProperties.mittBus = mitt();

web/src/views/system/menu/crud.tsx

@@ -1,32 +1,37 @@
-import * as api from "./api";
+import * as api from './api';
-import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, } from "@fast-crud/fast-crud";
+import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
-import { dictionary } from "/@/utils/dictionary";
+import { dictionary } from '/@/utils/dictionary';
-import iconSelector from '/@/components/iconSelector/index.vue'
+import { eIconPicker, eIcon } from 'e-icon-picker';
-import {useCompute} from '@fast-crud/fast-crud'
+import { useCompute } from '@fast-crud/fast-crud';
-import {inject} from 'vue'
+import { inject } from 'vue';
-import {functions} from "lodash-es";
+import { functions } from 'lodash-es';
-const {compute} = useCompute()
+import { apiPrefix as menuPrefix } from './api';
+import XEUtils from 'xe-utils';
+import { request } from '/@/utils/service';
+const { compute } = useCompute();
 interface CreateCrudOptionsTypes {
 	crudOptions: CrudOptions;
 }
 
-export const createCrudOptions = function ({ crudExpose,menuButtonRef }: { crudExpose: CrudExpose,menuButtonRef:any }): CreateCrudOptionsTypes {
+export const createCrudOptions = function ({ crudExpose, menuButtonRef }: { crudExpose: CrudExpose; menuButtonRef: any }): CreateCrudOptionsTypes {
-    const hasPermissions:any = inject('$hasPermissions')
+	const hasPermissions: any = inject('$hasPermissions');
 	//验证路由地址
 	const validateWebPath = (rule: string, value: string, callback: Function) => {
-        const isLink = crudExpose.getFormData().is_link
+		const isLink = JSON.parse(crudExpose.getFormData().is_link);
-        let pattern = /^\/.*?/
+		console.log(isLink);
+		let pattern = /^\/.*?/;
 		if (isLink) {
-            pattern = /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/g
+			pattern = /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/g;
 		} else {
-            pattern = /^\/.*?/
+			pattern = /^\/.*?/;
 		}
+		// console.log('isLink', isLink, 'pattern', pattern, pattern.test(value));
 		if (!pattern.test(value)) {
-            callback(new Error('请正确的地址'))
+			callback(new Error('请正确的地址'));
 		} else {
-            callback()
+			callback();
-        }
 		}
+	};
 
 	const pageRequest = async (query: PageQuery) => {
 		return await api.GetList({});
@@ -47,11 +52,11 @@ export const createCrudOptions = function ({ crudExpose,menuButtonRef }: { crudE
 	 * @param row
 	 * @returns {Promise<unknown>}
 	 */
-    const loadContentMethod = (tree:any, treeNode:any, resolve:any)=>{
+	const loadContentMethod = (tree: any, treeNode: any, resolve: any) => {
-        api.GetList({ parent: tree.id }).then((res:any) => {
+		api.GetList({ parent: tree.id }).then((res: any) => {
-            resolve(res.data)
+			resolve(res.data);
-        })
+		});
-    }
+	};
 
 	return {
 		crudOptions: {
@@ -59,48 +64,46 @@ export const createCrudOptions = function ({ crudExpose,menuButtonRef }: { crudE
 				pageRequest,
 				addRequest,
 				editRequest,
-                delRequest
+				delRequest,
 			},
-            pagination:{
+			pagination: {
-              show:false
+				show: false,
 			},
-            table:{
+			table: {
-                rowKey:'id',
+				rowKey: 'id',
-                lazy:true,
+				lazy: true,
-                load:loadContentMethod,
+				load: loadContentMethod,
-                treeProps:{children: 'children', hasChildren: 'hasChild'}
+				treeProps: { children: 'children', hasChildren: 'hasChild' },
 			},
 			actionbar: {
 				buttons: {
 					add: {
-                        show: hasPermissions('Menu:Create')
+						show: hasPermissions('Menu:Create'),
-                    }
+					},
-                }
+				},
 			},
 			rowHandle: {
 				buttons: {
 					custom: {
-                        text: "按钮配置",
+						text: '按钮配置',
-                        type:'warning',
+						type: 'warning',
 						tooltip: {
-                            placement: "top",
+							placement: 'top',
-                            content: "按钮配置"
+							content: '按钮配置',
 						},
-                        show:compute(({row}:any)=>{
+						show: compute(({ row }: any) => {
 							if (row.web_path && !row.is_link) {
-                                return true && hasPermissions()
+								return true && hasPermissions();
 							}
-                            return false
+							return false;
-
 						}),
-                        click:(context:any):void => {
+						click: (context: any): void => {
-                            const {row} = context
+							const { row } = context;
-                            menuButtonRef.value.drawer=true
+							menuButtonRef.value.drawer = true;
-                            menuButtonRef.value.selectOptions = row
+							menuButtonRef.value.selectOptions = row;
-                            menuButtonRef.value.initGet()
+							menuButtonRef.value.initGet();
-
+						},
-                        }
+					},
-                    }
 				},
 			},
 			columns: {
@@ -112,117 +115,118 @@ export const createCrudOptions = function ({ crudExpose,menuButtonRef }: { crudE
 						align: 'center',
 						width: '80px',
 						columnSetDisabled: true, //禁止在列设置中选择
-                        // formatter: (context) => {
+						formatter: (context) => {
-                        //     //计算序号,你可以自定义计算规则，此处为翻页累加
+							//计算序号,你可以自定义计算规则，此处为翻页累加
-                        //     let index = context.index ?? 1;
+							let index = context.index ?? 1;
-                        //     let pagination = crudExpose.crudBinding.value.pagination;
+							let pagination: any = crudExpose.crudBinding.value.pagination;
-                        //     return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
-                        // },
+						},
 					},
 				},
 				search: {
 					title: '关键词',
 					column: {
-                        show: false
+						show: false,
 					},
 					search: {
 						show: true,
 						component: {
 							props: {
-                                clearable: true
+								clearable: true,
+							},
+							placeholder: '请输入关键词',
 						},
-                            placeholder: '请输入关键词'
-                        }
 					},
 					form: {
 						show: false,
 						component: {
 							props: {
-                                clearable: true
+								clearable: true,
-                            }
+							},
-                        }
+						},
+					},
+				},
+				parent: {
+					title: '父级菜单',
+					column: {
+						show: false,
+					},
+					type: 'dict-cascader',
+					dict: dict({
+						url: menuPrefix,
+						value: 'id',
+						label: 'name',
+						children: 'children',
+						isTree: true,
+						getData: async ({ url }: { url: string }) => {
+							return request({
+								url: url,
+								params: { limit: 100, status: 1, is_catalog: 1 },
+							}).then((ret: any) => {
+								const responseData = ret.data;
+								const result = XEUtils.toArrayTree(responseData, {
+									parentKey: 'parent',
+									strict: true,
+								});
+								return [{ id: null, name: '根节点', children: result }];
+							});
+						},
+					}),
+					form: {
+						component: {
+							filterable: true,
+							placeholder: '请选择父级菜单',
+							props: {
+								props: {
+									checkStrictly: true,
+									value: 'id',
+									label: 'name',
+								},
+							},
+						},
 					},
 				},
-                // parent: {
-                //     title: '父级菜单',
-                //     column: {
-                //         show: false
-                //     },
-                //     type: 'dict-cascader',
-                //     dict: dict({
-                //         url: menuPrefix,
-                //         value: "id",
-                //         label: "name",
-                //         children: "children",
-                //         isTree: true,
-                //         getData: async ({ url }: { url: string }) => {
-                //             return request({
-                //                 url: url,
-                //                 params: { limit: 100, status: 1, is_catalog: 1 },
-                //             }).then((ret: any) => {
-                //                 const responseData = ret.data;
-                //                 const result = XEUtils.toArrayTree(responseData, {
-                //                     parentKey: "parent",
-                //                     strict: true,
-                //                 });
-                //                 return [{ id: null, name: "根节点", children: result }];
-                //             });
-                //         }
-                //     }),
-                //     form: {
-                //         component: {
-                //             filterable: true,
-                //             placeholder: '请选择父级菜单',
-                //             props: {
-                //                 props: {
-                //                     checkStrictly: true,
-                //                     value: "id",
-                //                     label: "name",
-                //                 }
-                //             }
-                //         },
-                //     }
-                // },
 				name: {
 					title: '菜单名称',
 					search: {
 						show: true,
 						component: {
 							props: {
-                                clearable: true
+								clearable: true,
-                            }
+							},
-                        }
+						},
 					},
 					type: 'input',
 					form: {
-                        rules: [ // 表单校验规则
+						rules: [
-                            { required: true, message: '菜单名称必填项' }
+							// 表单校验规则
+							{ required: true, message: '菜单名称必填项' },
 						],
 						component: {
 							props: {
-                                clearable: true
+								clearable: true,
 							},
-                            placeholder: '请输入菜单名称'
+							placeholder: '请输入菜单名称',
 						},
 					},
-                    column:{
+					column: {
-                        width:180,
+						width: 180,
-                    }
+					},
 				},
 				icon: {
 					title: '图标',
 					form: {
 						component: {
-                            name: iconSelector,
+							name: eIconPicker,
-                            vModel: 'modelValue'
+							vModel: 'modelValue',
-                        }
+						},
 					},
 					column: {
 						component: {
-                            name: "fs-icon",
+							name: eIcon,
-                            vModel: "icon",
+							vModel: 'modelValue',
-                            style: "font-size:18px"
+							style: 'font-size:18px',
-                        }
+						},
 					},
 				},
 				sort: {
@@ -232,19 +236,19 @@ export const createCrudOptions = function ({ crudExpose,menuButtonRef }: { crudE
 					form: {
 						value: 1,
 						component: {
-                            placeholder: '请输入排序'
+							placeholder: '请输入排序',
-                        }
+						},
-                    }
+					},
 				},
 				is_catalog: {
 					title: '是否目录',
 					type: 'dict-switch',
 					dict: dict({
-                        data: dictionary("button_whether_bool")
+						data: dictionary('button_whether_bool'),
 					}),
 					form: {
 						component: {
-                            placeholder: '请选择是否目录'
+							placeholder: '请选择是否目录',
 						},
 						// valueChange(key, value, form, { getColumn, mode, component, immediate, getComponent }) {
 						//     if (!value) {
@@ -255,13 +259,13 @@ export const createCrudOptions = function ({ crudExpose,menuButtonRef }: { crudE
 						//         form.is_link = false
 						//     }
 						// }
-                    }
+					},
 				},
 				is_link: {
 					title: '外链接',
 					type: 'dict-switch',
 					dict: dict({
-                        data: dictionary('button_whether_bool')
+						data: dictionary('button_whether_bool'),
 					}),
 					form: {
 						value: false,
@@ -270,7 +274,7 @@ export const createCrudOptions = function ({ crudExpose,menuButtonRef }: { crudE
                                 const { form } = context
                                 return !form.is_catalog
                             }, */
-                            placeholder: '请选择是否外链接'
+							placeholder: '请选择是否外链接',
 						},
 						/*  valueChange(key, value, form, { getColumn, mode, component, immediate, getComponent }) {
                              form.web_path = undefined
@@ -296,36 +300,35 @@ export const createCrudOptions = function ({ crudExpose,menuButtonRef }: { crudE
                                  }
                              }
                          } */
-                    }
+					},
 				},
 				web_path: {
 					title: '路由地址',
 					width: 150,
 					column: {
-                        show: false
+						show: false,
 					},
 					form: {
 						rules: [
 							{ required: true, message: '请输入正确的路由地址' },
-                            { validator: validateWebPath, trigger: 'change' }
+							{ validator: validateWebPath, trigger: 'change' },
 						],
 						component: {
 							show(context: any) {
-                                const { form } = context
+								const { form } = context;
-                                return !form.is_catalog
+								return !form.is_catalog;
 							},
 							props: {
-                                clearable: true
+								clearable: true,
 							},
-                            placeholder: '请输入路由地址'
+							placeholder: '请输入路由地址',
 						},
 						helper: {
 							render(h) {
-                                return (< el-alert title="浏览器中url的地址,请以/开头" type="warning" />
+								return <el-alert title="浏览器中url的地址,请以/开头" type="warning" />;
-                                )
+							},
-                            }
+						},
-                        }
+					},
-                    }
 				},
 				component: {
 					title: '组件地址',
@@ -333,63 +336,57 @@ export const createCrudOptions = function ({ crudExpose,menuButtonRef }: { crudE
 					show: false,
 					dict: dict({
 						getData: () => {
-                            const files: any = import.meta.globEager("@views/**/*.vue");
+							const files: any = import.meta.globEager('@views/**/*.vue');
 							let result: Array<any> = [];
 							Object.keys(files).forEach((key: string) => {
 								result.push({
-                                    label: key.replace(/(\.\/|\.vue)/g, ""),
+									label: key.replace(/(\.\/|\.vue)/g, ''),
-                                    value: key.replace(/(\.\/|\.vue)/g, ""),
+									value: key.replace(/(\.\/|\.vue)/g, ''),
 								});
 							});
 							return result;
 						},
 					}),
 					column: {
-                        show: false
+						show: false,
 					},
 					form: {
-                        rules: [
+						rules: [{ required: true, message: '请选择组件地址' }],
-                            { required: true, message: '请选择组件地址' }
-                        ],
 						component: {
 							props: {
 								clearable: true,
-                                filterable: true // 可过滤选择项
+								filterable: true, // 可过滤选择项
 							},
-                            placeholder: '请输入组件地址'
+							placeholder: '请输入组件地址',
 						},
 						helper: {
 							render(h) {
-                                return (< el-alert title="src/views下的文件夹地址" type="warning" />
+								return <el-alert title="src/views下的文件夹地址" type="warning" />;
-                                )
+							},
-                            }
+						},
-                        }
 					},
 				},
 				component_name: {
 					title: '组件名称',
 					width: 170,
 					form: {
-                        rules: [
+						rules: [{ required: true, message: '请输入组件名称' }],
-                            { required: true, message: '请输入组件名称' }
-                        ],
 						component: {
 							show(context: any) {
-                                const { form } = context
+								const { form } = context;
-                                return !form.is_catalog && !form.is_link
+								return !form.is_catalog && !form.is_link;
 							},
 							props: {
-                                clearable: true
+								clearable: true,
 							},
-                            placeholder: '请输入组件名称'
+							placeholder: '请输入组件名称',
 						},
 						helper: {
 							render(h) {
-                                return (< el-alert title="xx.vue文件中的name" type="warning" />
+								return <el-alert title="xx.vue文件中的name" type="warning" />;
-                                )
+							},
-                            }
+						},
-                        }
+					},
-                    }
 				},
 				menuPermission: {
 					title: '拥有权限',
@@ -398,23 +395,24 @@ export const createCrudOptions = function ({ crudExpose,menuButtonRef }: { crudE
 					form: {
 						show: false,
 						component: {
-                            elProps: { // el-select的配置项，https://element.eleme.cn/#/zh-CN/component/select
+							elProps: {
+								// el-select的配置项，https://element.eleme.cn/#/zh-CN/component/select
 								filterable: true,
 								multiple: true,
-                                clearable: true
+								clearable: true,
-                            }
+							},
-                        }
+						},
-                    }
+					},
 				},
 				cache: {
 					title: '缓存',
 					search: {
-                        show: true
+						show: true,
 					},
 					width: 60,
 					type: 'dict-switch',
 					dict: dict({
-                        data: dictionary('button_whether_bool')
+						data: dictionary('button_whether_bool'),
 					}),
 					form: {
 						value: false,
@@ -423,64 +421,64 @@ export const createCrudOptions = function ({ crudExpose,menuButtonRef }: { crudE
 							//     const { form } = context
 							//     return !form.is_catalog
 							// },
-                            placeholder: '请选择是否缓存'
+							placeholder: '请选择是否缓存',
 						},
 						helper: {
 							render(h) {
-                                return (< el-alert title="是否开启页面缓存,需要组件名称和xx.vue页面的name一致" type="warning" />
+								return <el-alert title="是否开启页面缓存,需要组件名称和xx.vue页面的name一致" type="warning" />;
-                                )
+							},
-                            }
+						},
-                        }
+					},
-                    }
 				},
 				visible: {
 					title: '侧边可见',
 					search: {
-                        show: true
+						show: true,
 					},
 					width: 75,
 					type: 'dict-switch',
 					dict: dict({
-                        data: dictionary('button_whether_bool')
+						data: dictionary('button_whether_bool'),
 					}),
 					form: {
 						value: true,
 						component: {
-                            placeholder: '请选择侧边可见'
+							placeholder: '请选择侧边可见',
 						},
-                        rules: [ // 表单校验规则
+						rules: [
-                            { required: true, message: '侧边可见必填项' }
+							// 表单校验规则
+							{ required: true, message: '侧边可见必填项' },
 						],
 						helper: {
 							render(h) {
-                                return (< el-alert title="是否显示在侧边菜单中" type="warning" />
+								return <el-alert title="是否显示在侧边菜单中" type="warning" />;
-                                )
+							},
-                            }
+						},
-                        }
+					},
-                    }
 				},
 				status: {
 					title: '状态',
 					sortable: true,
 					search: {
-                        show: true
+						show: true,
 					},
 					width: 70,
 					type: 'dict-switch',
 					dict: dict({
-                        data: dictionary('button_status_bool')
+						data: dictionary('button_status_bool'),
 					}),
 					form: {
 						value: true,
 						component: {
-                            placeholder: '请选择状态'
+							placeholder: '请选择状态',
+						},
+						rules: [
+							// 表单校验规则
+							{ required: true, message: '状态必填项' },
+						],
+					},
+				},
+			},
 		},
-                        rules: [ // 表单校验规则
-                            { required: true, message: '状态必填项' }
-                        ]
-                    }
-                }
-            }
-        }
 	};
-}
+};

web/src/views/system/whiteList/crud.tsx

@@ -40,7 +40,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 						formatter: (context) => {
 							//计算序号,你可以自定义计算规则，此处为翻页累加
 							let index = context.index ?? 1;
-							let pagination = crudExpose.crudBinding.value.pagination;
+							let pagination: any = crudExpose.crudBinding.value.pagination;
 							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
 						},
 					},

web/tsconfig.json

@@ -68,7 +68,7 @@
 		/* Advanced Options */
 		"skipLibCheck": true /* Skip type checking of declaration files. */,
 		"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
-		"suppressImplicitAnyIndexErrors": true
+		"suppressImplicitAnyIndexErrors": false
 	},
 	"include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.tsx", "src/**/*.d.ts"], // **Represents any directory, and * represents any file. Indicates that all files in the src directory will be compiled
 	"exclude": ["node_modules", "dist"] // Indicates the file directory that does not need to be compiled